Since we have published our extension XT Adaptive Images, we have collected several recommendations to prepare the images of a web site. Better photos on your website improve the user experience, guaranteeing a higher-level engagement.
Our extension is focused on resizing the images for each device screen size and delaying the load of the assets until they are visualized. However, there are several tips to take into account BEFORE the image is published on the site.
This is our list of recommendations to prepare the web images for desktop and mobile users:
1. Make it count
Images are the best possible way to impress your users. However, they can easily confuse your users, introduce unnecessary noise, and ruin the performance of your site. Always, try to focus the attention on only one image, or in a small number of photos that support the main topic of the page. Count the pictures, and think if they are necessary. If they are not, replace them with icons or vectorial images, whose have a much lower footprint.
2. Start with high-quality images
Look for the perfect image or photo. Don't be shy, include faces, smiles, and images that generate an emotional response. At this point, pixels don't matter, choose the biggest possible "original" format.
3. Define the "desktop" image size
In a perfect world, when you publish an image on web site, you should manually produce versions of the same image for each screen size, and decorate them with the proper code to render only the adequate image for a device. In practice, this is not feasible, and an extension such us XT Adaptive Images helps to simplify the task.
At this point in the process, you have to define the "desktop" image size of an image, based on the canvas space where it is going to be shown. For instance, if you are writing an article, you check a previous article to confirm the dimensions of the available canvas space.
Your browser Dev Tools can give you the information of the image (right click, inspect). For instance, in Chrome Dev Tools, you can inspect the image to known the size of a displayed image and the intrinsic size of the picture. The intrinsic size is the width and height of the uploaded file. The difference between them must be as low as possible. For the desktop, the difference should be zero to save as many pixels as possible.
4. Compress the images with modern formats
There is an infinite number of compression formats for images. Before uploading the image to the web site, compress the image as much as possible, always keeping an eye on a reasonable quality.
There is news about modern formats that can be used. For instance, WebP promises significant improvements, but it is not widely supported. https://caniuse.com/#search=webp.
Additionally, there are variations of PNG (OptiPNG) and JPG (MozJPG) that can reduce the size of most files. You can test the results on this online tool https://squoosh.app. Always, use it before uploading an image.
These new formats are still not supported on the server backend or in PHP; however, better image compression can be easily streamlined at the edition time.
5. Deliver images via CDN
A CDN (Content Delivery Network) is the best way to serve and distribute images worldwide. There are several methods to implement it.
Cloudflare provides a comprehensive service that includes the optimization of image delivery. However, the service sits between your site and the user, so you must be comfortable with the whole solution.
On the other hand, you can use XT Adaptive Images or Regular Labs's CDN for Joomla! to implement what is called a Pull CDN.
6. Lazy Load assets
By default, an HTML page loads everything when the user visits the page. If a resource is not visualized, then the browser could not load it when the page is initially loaded. So, the resource can be delayed until the user navigates. This technique is named "Lazy Load". At this time, you can implement it with XT Adaptive Images, or you can find several similar extensions here. For the future, Chrome has promised to implement the lazy load natively.
7. Proofreading and second opinions
When everything is ready, the piece of information is written and almost published in its final form, ask someone to check the full article. There are always points that an author misses, cultural differences to consider and other aspects that could be forgotten in the composition of the text and the image. This point goes beyond image optimization, but at the end of the day what matters is how the sum of different aspects affect the outcome of the creation.
To the moon!
Sign me up!
Contact Us
Legal
