Michael Yalonides – Front End Designer / Developer of Competitive Edge Digital.
Creating a website, nowadays, can be easily done by using tools such as WordPress or any similar CMSs (Content Management Systems). Such systems are mainly aimed at end-users and prioritise ease of use by employing several tricks to “get the job done”. For example, WordPress automatically compresses .jpeg files and even downsamples 4K images to a more manageable size.
Depending on the type of website you are building/running, the underlying technology used to create said website, and your technical proficiency, you can follow different image optimization strategies to better suit your needs.
As an end-user, when creating or using a CMS based system such as WordPress, you have limited options on how to optimize your images, depending on the theme you are using. If you are lucky, you get the option to upload a desktop and a mobile version of the image you want to use. Adding images via various page builders like Elementor, WPBakery, etc., offers a bit more flexibility, allowing you to upload separate desktop, tablet, and mobile versions of the image. Of course, you can add as many versions of the image as you see fit by adding extra code to the theme either by using the element <picture>
As you can see below we can tell the browser to load a different image depending on the resolution of the device the webpage is served on. In this example, we have 4 images. One image for 4K desktops, another for 2.5K desktops, and a desktop version for small screens. Finally, we have the <img> element which loads the default image if none of the above criteria are met. In such a way we can target all the devices we want.
<picture>
<source media=”(max-width: 3840px) and (min-width: 2561px)” srcset=”example-4k.jpg”>
<source media=”(max-width: 2560px) and (min-width: 1921px)” srcset=”example-2560.jpg”>
<source media=”(max-width: 1366px) and (min-width: 1025px)” srcset=”example-1366.jpg”>
<img src=”example.jpg” alt=”Example image description”>
</picture>
The other method images are served is as background images. You can also change the image served by changing the background-image property using @media and the .css background-image property.
A picture is worth a thousand words.
REASONS TO OPTIMISE YOUR IMAGES
Nowadays, the number of devices your website can be viewed on can be daunting. This can range from 4K desktop screens down to old work desktops with resolutions no bigger than 1366 pixels wide and everything in between. Don’t forget all the tablet resolutions in landscape and portrait orientations. Finally, we have all the mobile devices with various different screen sizes. Taking that into account, using a single image or a couple of images with the expectation that it will display properly on most devices is hopeful at best.
Here are the main reasons for manually optimizing your images:
- The client views the image best optimised for his/her device. The image is displayed as you want and not how the theme assumes the image should be viewed.
- Serving devices with higher pixel densities such as tablets and mobiles with images with double or triple the pixel densities of the desktop versions. This way you avoid blurry images on such higher pixel density devices.
- Improved loading times for a better user experience.
WORDPRESS PLUGINS
If you don’t want to use a program to manually optimise your images you can choose from various plug-ins that automatically optimise the images for you. Here is a list of plugins you can choose from:
MANUAL OPTIMIZATION PROGRAMS OR ONLINE CONVERTERS
While there are various websites that offer image optimization services, in my opinion, the best way to prepare your images would be by using a program like Adobe Photoshop. A free alternative would be GIMP which is compatible with all the major operating systems.
Eyeballing the image quality of the exported image by yourself is the best way to ensure a good balance between image quality and file size. An online tool or automated compression plug-in can save you some time but results may vary.
If you want something done right, do it yourself.
IMAGE OPTIMISATION WHAT IMAGE FORMAT TO CHOOSE?
.jpg The most common image format. Best used for photographs like the desert image you view in this page’s background.
.png The successor to .gif Best used for exporting graphics like the image below this page’s title. Graphics with text and shapes should be exported to .png depending on the file size difference between it and a .jpg file of similar quality. Like it’s predecessor and unlike .jpg, .png also supports transparency.
.svg Best used for exporting vector graphics like the CED logo on the page’s header and footer and the one floating above a rock formation if you are viewing this page from a desktop. Individual shapes of the .svg can be animated with .css which opens up a lot of possibilities. Add the file size savings and the peace of mind of using a single image instead of several raster images.
.webp This has been available for a while now but support by all major browsers didn’t arrive before September 2020. It promises to replace .jpg by providing around 30% better compression at the same quality. It’s also coming after .png by also providing around 20% better compression while also supporting transparency, something up until now, only .png supported. Old-school .gif days should also be numbered since this also supports animation. It would be great if .webp manages to replace all three image formats(.jpg, .png & .gif).
IN CONCLUSION
While the possibilities offered by newly supported image formats will lead to wider adoption of higher resolution images, the pace of that adoption by theme developers remains to be seen. More control on what the website will approximately look like, besides the three main categories of desktop, tablet & mobile would also be welcomed.
There are lots of ways to speed up your website and optimising your images is probably the best and easiest way to go about it. Last but not least, don’t forget the alt tag to go along with those images 😉
