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.
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
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.