Best techniques for image optimisation (Standard and Retina)

[croydon86]

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

[croydon86]

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.

[croydon86]

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

[Author]

Posts