I would like to share with you my findings about optimizing jpg files for the web, mostly from my own experience but also confirmed by other fellow designers. You could of course start from 0% quality and increase point by point upto 100% and then decide what suits your needs, yet these settings work for me and allow me to be productive with losing precious time nitpicking.
- 20% the first optimization milestone. You should notice a drastic improvement from 19% to 20%. When striving for maximum performance, this means that some images may be saved at 20% quality and still be decent enough to fulfill their purpose – thumbnails and images with few details are ideal here.
- 30%, 51%, 60%… are the next milestones in optimization. As with 20%, these percentages deliver much better quality than their immediate counterparts. Keep your eye on the file size and make a sound decision.
- 70% to 85% is my preferred setting. I feel that most images display very well from 70% onwards, with little noticeable difference with 100%. When not presenting full resolution photographs, you can be comfortable using this range.
- 100% should be reserved for your high quality images that you wish to present at their best. About photographs, it should also be noted that the jpg format is destructive, meaning that multiple saves will compress the image further, lowering the overall quality regardless of the chosen optimization. Therefore, purists should aim to compose and deliver striking images from the take, with little to no manipulation, using first the RAW format and processing to jpg once. Yes, despite its accessibility, photography is still an art.
Alternatives/complements
- some people are using smush.it, a Yahoo service that allows you to further compress an image using an non-destructive algorithm. You then upload the resulting file to your web server. Personally, I don’t see the point of relying on an external service to prepare your images, or have not encountered a case where the extra performance is worth the longer workflow.
- a nice complement to your optimization toolbox that also works with other image formats are CSS sprites for small image transitions such as rollover effects. CSS sprites are efficient, small in size, and allow you to group effects together which is a nice organizational bonus.
Page performance always played an important part on web design and development. While relevancy of the information is better dealt from the search engine level, we all value our time and as such, a good web page will still present its content fast. No matter how relevant or striking your content is, few users will wait aimlessly that your page loads: at best, they will keep your page open in a tab while resuming their common activities on other tabs. At worse, they will discard your page or, if you deal with services, visit a competitor instead.
Performance can be improved both from the web design or development perspectives. While developers can improve database queries and decrease server calls, designers can improve the presentation layer. Minimalist designs and clever use of typography can help, yet graphic files might still be necessary. I hope that this article will help you improve the performance of your jpg files. Be aware of overall performance, experiment, and optimize!