Images are one of the simplest files to add to a site, yet can be one of the larger files included if they’re not optimised correctly. It’s fundamental that image size is addressed on desktop in order to provide a good experience to the end user.
But what about mobile? Will the same images work seamlessly for both devices?
The easy answer is yes, but not without flaws.
As mobile devices are progressing in their display capabilities, especially with the introduction of retina screens and high resolution displays, the need to provide the end user with well optimised images now collides with providing retina optimised images. Simply placing a 72dpi image onto a mobile phone will leave the image looking fuzzy and, if already optimised, illegible.
Recent experiences with an eCommerce client have meant working out how to overcome this issue. The need to present a product in the best possible light is essential, even more so for an eCommerce client as their customers expect to be able to see the quality and detail in the product.
- There are plenty of Java files and tools available that provide the ability to create a better quality image, but essentiality it still relies upon the main image being well-optimised to start with.
I have been testing how optimising and resizing images, at different sizes and qualities, will produce an acceptable result for a mobile device, whilst keeping the file size as low as possible. From these tests I have come to the conclusion that for a generic range of images, batched to a certain quality and size, the best option is to increase the dimensional size to double the size requires, and set the quality to between 20% and 30%. When testing this on an image with a medium colour pallet, I got an output file size of 24kb for a small image and about 40kb for a larger image.
Once you have your ‘double size image’, it’s simply a case of using CSS; to either render the size down to a fixed half size, OR to set the image to 100%. As long as the x2 size image is larger than 600px it will render well on an iPhone or other mobile device of that screen size. Obviously it is worth testing a few images as the file size and quality is dependent on the amount of colours used in the colour pallet. Once you have set your desired range it will work a treat!
So to Recap
- Make the image size at least double the height and width
- Optimise the quality of the image based on the colour pallet
- Use CSS to shrink the image to fit!
by Austin Waddecar on 26/03/2014