Grow your CSS skills. Land your dream job.

Best techniques for image optimisation (Standard and Retina)

  • # May 1, 2013 at 3:02 pm

    Hi guys

    I am currently experimenting with the best way of optimising images to get the smallest file size, whilst still retaining good quality. These images will be served for mobile and retina devices.

    I will already be loading different images for smaller devices than I would on desktop.

    My current technique for mobile images is creating the image in photoshop twice as big, then in photoshop save for web at 0% quality (jpegs). Then let the image resize down in the browser. This works well for normal images but the quality is noticeably poor for retina.

    I have tried 4 techniques

    1) Save as normal size, and save at good quality

    2) Save image twice as big as above, but instead of 0% compression, maybe try something like 10 or 20% compression, so better quality

    3) Save image 4x as big, then save for web at 0% compression.

    4) Use pixel-ratio media queries to determine if retina, then serve a bigger image.

    I have tried the above, no.3 gives the best results but also biggest file size.

    Would like to hear some of your suggestions on how you handle images, and if you bother with retina.

    Thanks

    # May 1, 2013 at 3:12 pm

    Forgot to add, the second technique seems to give the best balance between file size and image quality, so the point of this thread is to see if there is a better technique I have missed.

    # May 1, 2013 at 7:48 pm

    Have a look at [ImageOptim](http://imageoptim.com/ “ImageOptim”). It strips out unnecessary image data resulting in a smaller compressed file suitable for web.

    I typically save images for web (normal size) in PS then use ImageOptim for final production. You simply drag the intended image folder into the app and they automatically update after the compression is complete.

    A couple tips…

    1.) be sure to check the **convert to sRGB** option in the Save For Web window…otherwise your color profiles will end up distorted

    2.) it’s always a good idea to duplicate your image folder prior to compression…incase you wish to make future changes

    Hope that helps

    # May 1, 2013 at 8:04 pm

    Have you considered sizing the original image _down_ to twice the display size you’d like it to be, then use CSS to reduce the image size by 50% – when viewed on retina it would then still be that retina-sized image.

    i.e. You have a 1000px image, you display it at 50% (500px) on your site, but the image displayed is the 1000px image.

    Wait… does that work? Somebody confirm or deny, this is a non-tried hypothesis for me and I haven’t read up enough on retina yet.

    # May 1, 2013 at 8:24 pm

    @siouxfan45

    That does work. I would only use that method if you’re serving a limited amount of images…otherwise your load times will suffer drastically.

    Have a look at the following resources for further info about this…

    [Images on retina](http://www.fngtps.com/2012/reasonable-ways-to-use-high-resolution-images-on-retina-displays/ “Images on retina”)

    [Retina JS](http://retinajs.com “retina JS”)

    # May 2, 2013 at 3:56 pm

    @rugg agreed

    I also do your technique however I am not a fan of ImageOptim. I tend to get better results with http://www.jpegmini.com

    @siouxfan45 yes that would obviously display the best results but ridiculous file sizes. This post was more for clever techniques of keeping file size small also.

    I will stick to my 2nd technique for now.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".