The level at which your website performs largely affects your user experience and SEO. You might start to lose visitors on your website if your page takes so much time to load.
In the case of photography websites, the importance of images cannot be overemphasized. Putting into the consideration the widespread use of mobile devices by many of your website visitors, you will need to keep the size of your images in check.
A lossless compression of some images is suggested by Google, with the aim of saving data.
Let’s talk about the 3 main areas of website image optimization (for performance):
- Image dimensions (in pixels)
If you want to put up images on your site just for display, make sure the images are not of high-resolution irrespective of whatever format they are in.Having a protected image archive that also serves image licenses and prints, is the only reason you can upload high-resolution images. (e.g. Photoshelter which is well secured at all times). In any other case, like showing images in a blog post or a portfolio, always use images with minimized dimensions.Full-width slideshows
A width of 2560 pixels is best recommended for full-width slideshows (this stretches automatically to the browser’s full size). This is because 2560 pixels is the resolution width that 27” and 30” monitors commonly use.
You can choose any height for your images to produce an aspect ratio you’re okay with.
The initial aspect ratio of images should be kept intact for full-page slide shows while the images for smaller slideshows should be reduced to an aspect ratio of about 3:1 or more.
With the help of your browsers “inspect element” tool, find out the size of which the site shows the images and then double it. You can also do a screenshot of the site after which you can determine the size of the image.
Large images in “lightbox” displays
Imagine a gallery slideshow where a thumbnail when clicked, enlarges into a lightbox display. Such an image because of its need to enlarge on the screen should be kept at a width of 1500 pixels max and a height of about 800-900 pixels max.
A small file size aids faster transition between images. And since controlling the image dimensions helps to retain the small size of the file, it is highly recommended.
- JPG Compression Level/Image QualityIn the quality slider, you scarcely have to export images at 100 (this is the assumption that you are making use of Adobe Lightroom as a tool). Exporting images at 60 or 70 provides smaller file sizes and good quality.The quality difference when you go between 100 and 70-80 is negligible and gives a massive difference in file size. You only get horrible quality and detectable image noise when you go below 50-60%.
If you are exporting images from Adobe Photoshop, you can apply the same principle.
And if you’re making use of the most recent version of Photoshop CC, make sure you use their new export dialog by clicking File > Export > Export As…You can actually carry out experiments to figure out a compression level that suits you best. In most cases, people choose 60%-70% as their suitable compression level.
- WordPress compression PluginsIf you are using WordPress, consider yourself fortunate. You will get a lot up help from numerous plugins that work automatically. Once you upload an image, they take it and compress it to create an ideal file size.There are several solutions like TinyPNG and EWWW but I love Imagify best.A manageable monthly quota is given to those who have free accounts with them a bit if you plan to optimize as many images as you want on a monthly basis, then it’s best to get a premium plan.
There are two levels of optimization available to give you a good compromise between image quality and file size. You can with choose the plugin’s “Aggressive” optimization level or the “normal” optimization level.
If possible, you can bulk-optimize all your previous images from the WordPress media library.
That’s pretty much everything. These all show that the performance of your site and consequently, it’s SEO depends on how well you control your image’s file size.
Professional users can go on to a higher level by reading Google’s “Image optimization” article as a fundamental guide.
Let me remind you once again that this excludes image archiving services (which have effective security measures put in place and which creates as the site needs, low-resolution thumbnails from initially high-resolution files) or if you put up your images for sale as prints or downloads. But if you merely need to display your images via your own website, then it is pertinent that you adopt these image optimization practices.
So make out time this week to:
- Go back and optimize existing images on your website
- Update your image uploading and exporting workflow