Image Size ?

Discussion in 'SEO, PPC and Online Marketing' started by Its4john, Aug 17, 2018.

  1. Its4john

    Its4john UKBF Regular Full Member

    116 6
    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 ?
     
    Posted: Aug 17, 2018 By: Its4john Member since: Nov 10, 2017
    #1
  2. SEOpie

    SEOpie UKBF Regular Full Member

    103 39
    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).
     
    Posted: Aug 17, 2018 By: SEOpie Member since: Oct 16, 2014
    #2
  3. Its4john

    Its4john UKBF Regular Full Member

    116 6
    Excellent, thanks. Its nice to see a website which does some freeby stuff without having to do some registration first :)
     
    Posted: Aug 17, 2018 By: Its4john Member since: Nov 10, 2017
    #3
  4. atmosbob

    atmosbob UKBF Ace Free Member

    3,331 742
    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.
     
    Posted: Aug 17, 2018 By: atmosbob Member since: Oct 26, 2009
    #4
  5. Its4john

    Its4john UKBF Regular Full Member

    116 6
    I'm using a Mac and I've never got my head around image sizing on it.
    I might just fire up my old windows laptop and use 'Paint'
     
    Posted: Aug 17, 2018 By: Its4john Member since: Nov 10, 2017
    #5
  6. atmosbob

    atmosbob UKBF Ace Free Member

    3,331 742
    What software do you have on the Mac?
     
    Posted: Aug 17, 2018 By: atmosbob Member since: Oct 26, 2009
    #6
  7. Its4john

    Its4john UKBF Regular Full Member

    116 6
    It’s just the OS it came with. I’ve not got any special imaging software on it.
     
    Posted: Aug 18, 2018 By: Its4john Member since: Nov 10, 2017
    #7
  8. Paul Murray

    Paul Murray UKBF Regular Free Member

    649 187
    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.
     
    Posted: Aug 18, 2018 By: Paul Murray Member since: Nov 24, 2011
    #8
  9. Its4john

    Its4john UKBF Regular Full Member

    116 6
    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 ?
     
    Posted: Aug 18, 2018 By: Its4john Member since: Nov 10, 2017
    #9
  10. atmosbob

    atmosbob UKBF Ace Free Member

    3,331 742
    That is a bit like having a tool shed with no tools.
     
    Posted: Aug 18, 2018 By: atmosbob Member since: Oct 26, 2009
    #10
  11. Paul Murray

    Paul Murray UKBF Regular Free Member

    649 187
    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.
     
    Posted: Aug 18, 2018 By: Paul Murray Member since: Nov 24, 2011
    #11
  12. atmosbob

    atmosbob UKBF Ace Free Member

    3,331 742
    There is a downside to removing metadata from an image. Your image will rank higher in image search if there is good metadata attached. In the event of your image being infringed you will get much higher damages if the infringer removes your name from the metadata.
     
    Posted: Aug 18, 2018 By: atmosbob Member since: Oct 26, 2009
    #12
  13. Paul Murray

    Paul Murray UKBF Regular Free Member

    649 187
    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.
     
    Posted: Aug 18, 2018 By: Paul Murray Member since: Nov 24, 2011
    #13
  14. atmosbob

    atmosbob UKBF Ace Free Member

    3,331 742
    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/
     
    Posted: Aug 18, 2018 By: atmosbob Member since: Oct 26, 2009
    #14
  15. Its4john

    Its4john UKBF Regular Full Member

    116 6
    How do you install/optimise video?

    I'd like to put two videos on a website (9 sec long) but they are 18Mb each.
     
    Posted: Aug 21, 2018 By: Its4john Member since: Nov 10, 2017
    #15
  16. PDQ Funding

    PDQ Funding UKBF Newcomer Full Member

    7 0
    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.
     
    Posted: Sep 14, 2018 By: PDQ Funding Member since: Jul 9, 2018
    #16
  17. Hugh Jampton

    Hugh Jampton UKBF Contributor Free Member

    45 5
    What platform are you using: Wordpress?

    If so install the plugin "Smush" as advised above, it will automatically take the images to a compatible size.

    If they still come up as too big on GT metrix - Then follow the link from GT and use that resized pic.
     
    Posted: Sep 14, 2018 By: Hugh Jampton Member since: Apr 30, 2017
    #17
  18. Inva

    Inva UKBF Regular Free Member

    129 15
    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.
     
    Posted: Sep 14, 2018 By: Inva Member since: Aug 10, 2018
    #18
  19. Richard Patey

    Richard Patey UKBF Contributor Free Member

    31 0
    take the 1.2MB and get it to < 200kb for optimal page load for SEO
     
    Posted: Sep 15, 2018 at 5:06 PM By: Richard Patey Member since: Sep 15, 2018
    #19
  20. xoxoseo

    xoxoseo UKBF Newcomer Free Member

    29 0
    I always use optimizilla.com for size optimization. Here is a good article about pic optimization for web moz com/blog/image-link-building
     
    Posted: Sep 16, 2018 at 2:21 PM By: xoxoseo Member since: Apr 2, 2018
    #20