How to properly prepare and optimize raster based images for use on your website.
One question I get asked by almost all of my clients when it comes to website content management is how to properly prepare and optimize raster based images for use on your website.
This question seems simple but has a few different considerations to keep in mind including:
Where the images will appear on your site (will this image be viewed full screen width or smaller inside the content of the page)
What the nature of the image is that you are looking to use (is this image of a landscape or a logo)
How many other images appear on the same page (will this image be used in a slider containing several other images)
Talk with Ecra about your next project!
Because page load time is a key component of the User Experience and is also important to Google for page rank purposes, careful consideration should be paid to balancing display quality with page performance.
Image resolution should be appropriate for the size the image will appear for the majority of users.
Most websites opt to serve the same image for display on both standard and high resolution retina displays and with today’s mobile friendly responsive environments, the browser will typically scale the image to fit whatever its container size is – so it’s usually best to upload a higher resolution image that will work for all use case scenarios.
To illustrate how this works, I’ll give an example.
Let’s say you have an image of a landscape with some mountains that will appear in the content of the page on the left side of a two column layout with a content container maximum width of 500 pixels for each column.
For this use case example, I would recommend the image be sized to 1000 pixels which is twice the resolution (pixel width) of the maximum HTML container where the image will appear. This will look crisp in both the high resolution retina display and the standard resolution display.
The proper format for this image will be JPEG as it is a full color photograph of a landscape with a lot of color variation in the image and no hard color breaks like you would see with a logo or image that contains typography. This will also allow the image to be compressed at a higher level. Along with the JPEG format – which is a lossy format where color information is tossed out to simplify the image and reduce file size – the compression should be set to the highest level before the image quality starts to noticeably degrade. This will be different for each image and is subjective – up to the person viewing the image to judge. For an image like a landscape photo, over compression will result in an image that starts to look blurry. In Adobe Photoshop, the level of compression will usually be between 30 and 60 on the compression slider (out of a range up to 100).
If the image is a logo with hard color breaks or requires transparency in the background – it will need to be saved in a lossless format that supports an alpha channel. PNG-24 is the format to use for these types of images. PNG is a lossless format so these images will retain their nice clean color break edges but will not be as small (compressed) as a JPEG file so it becomes important to further reduce file size through a a service like https://tinypng.com/ which will take your PNG image and further optimize it – allowing it to reduce in size up to 70% without noticeable quality loss.
There are also some good image optimization plugins for website CMS platforms like WordPress which can help with optimization of individual images you upload to your site. One good one is Smush Image Compression and Optimization.
