Image Size ?

Its4john

Free Member
Nov 10, 2017
154
13
Lincoln
I'm playing around with some images to upload to a website.

Main pic from my camera phone is 2.9Mb, dimensions are 3264x2448 (I assume this is pixels?)

I've resized the image to 1.2Mb, dimensions are 1280x960

Which is best? main one for quality, or reduced one so as not to slow down the page loading speeds?

Whats the ideal combination ?
 

SEOpie

Free Member
  • Oct 16, 2014
    129
    41
    Kent
    seopie.co.uk
    Yes, what you're referring to is the resolution, which is measured in pixels.

    1.2MB is still way too big to be optimal. Depending on the application, I would be looking at limiting the file size to a maximum of 100-120Kbs. Even 120kbs is quite large.

    To do this you can reduce the resolution of an image to a point before it becomes visibly noticeable.

    You can optimise images using online tools (such as this) or via software such as Photoshop.

    Remember to resize the image to the size you require first before optimising the resolution.

    A more advanced consideration is to use media queries in CSS to serve different images based on the device operating system and screen size (some iOS devices have Retina screens which in effect double the resolution).
     
    • Like
    Reactions: Its4john
    Upvote 0
    D

    Deleted member 59730

    Main pic from my camera phone is 2.9Mb, dimensions are 3264x2448 (I assume this is pixels?)

    I've resized the image to 1.2Mb, dimensions are 1280x960
    There is something wrong here. The larger image is 6.5 times larger than the small one but you don't have the corresponding reduction in Mb.

    Your ideal process is to convert the camera jpg to a tiff file > do any adjustments like retouching > save > alter the size > then re-save as a jpeg with medium setting.

    If its not right go back to your saved Tiff.
     
    Upvote 0

    Paul Murray

    Free Member
    Nov 24, 2011
    656
    189
    Manchester
    Images are the main blockage in a website's load speed (which is important for a number of reasons), so you should always aim to optimise them as much as possible.

    The simplest solution is to resize them to the actual size you need, save them as a JPG (or PNG if you need a transparent background) and optimise them using TinyPNG. This will strip out superfluous data from the image to reduce the file size quite dramatically.

    However, with retina screens and responsive sites, things get tricky. You'll likely need the same images in different sizes or ratios which you can switch out based on the resolution of the device viewing the site, and/or the size of the browser window.

    Which site are you uploading to? Is it your own site, a site builder, a third party website, etc?

    Most modern platforms or CMS's will create differently sized images for different devices automatically (or have a plugin that will). In which case you just upload the large image and let them take care of everything. As a rule of thumb, I recommend just making an image twice as big as you need to account for retina screens. So if the image size you need is 600px wide, make it 1200px wide.

    Note that this is far from ideal, especially on mobile where you would want to show a much smaller version to reduce bandwidth usage and load speeds. The ideal solution is to check the resolution and device viewing the site and serve them appropriately sized images. However, depending on the site/platform you are referring to, this may not even be an option for you.
     
    Upvote 0

    Paul Murray

    Free Member
    Nov 24, 2011
    656
    189
    Manchester
    Thanks Paul, you and SEOpie have said to resize the images THEN optimise. I'm going to show my ignorance now and ask what do you mean by optimise if its other than getting the size right ?

    I mean just resize the images, then upload them to TinyPNG. That's the optimisation bit.

    If you upload the large image, save the optimised version from TinyPNG, then resize it, the Preview app will add back in a load of useless data, meaning your image is not as small as it could be.

    Resize > Use TinyPNG > Upload to your site.
     
    Upvote 0

    Paul Murray

    Free Member
    Nov 24, 2011
    656
    189
    Manchester
    Do you have a link that conforms that? I've heard conflicting opinions about that, and Google hinted that they might use it as a ranking factor. I'd be curious to know for certain if it's been proved.

    I actually prefer my images to not rank a lot of the time. Being a designer my work gets lifted and passed off and even sold on quite often, mostly by people in other countries so I don't really want it to be easy to find with a quick Google search. Of course, once it's on somewhere like Tumblr it's all over anyway, and have repeatedly found my logos being used where they shouldn't.

    For products, obviously it makes sense to get them ranking, but the old adage of 'if you don't want it stolen, don't put it on the internet' is very much true and image theft is a constant thorn in my side.
     
    Upvote 0
    D

    Deleted member 59730

    I've heard conflicting opinions about that, and Google hinted that they might use it as a ranking factor. I'd be curious to know for certain if it's been proved.
    Google isn't the only search engine. Personally I use Qwant.

    I have had experience of people finding my images because of the metadata. If you don't have metadata you need full descriptive text on the page and ideally only one photo per page for an image search to work.

    As far as theft is concerned in the UK we have IPEC for copyright cases. For an analysis of how some cases have worked out see.... https://www.create.ac.uk/publicatio...y-enterprise-court-in-historical-perspective/
     
    Upvote 0
    P

    PDQ Funding

    If your site is a wordpress site there is different plugin's you can use to compress the image, smush, for example, this will allow the site back up to speed. Minifying the site is CSS /Java, html will help and use a cache.

    Google have a load speed page so this might help to let you see where it is going wrong if any.
     
    Upvote 0

    Inva

    Free Member
    Aug 10, 2018
    370
    62
    Do you have a link that conforms that? I've heard conflicting opinions about that, and Google hinted that they might use it as a ranking factor. I'd be curious to know for certain if it's been proved.
    I have no proof but it seems to me it's easier to rank somewhere if there's some info to rank for. Without info what are we ranking for?

    Regarding the image i agree with the media query proposal. There are simply too many screen sizes these days and image size (kb) doesn't scale.
     
    Upvote 0

    Latest Articles