Introduction
If the website takes time to load, images are your number one suspect. A single unoptimised image can significantly affect your page speed. We have a complete list of steps that you can take to optimise images for your website.
1. Resize Images
Raw images are typically way wider than what the browser needs to render – you can significantly reduce the size of image from megabytes to kilobytes by simply resizing it (depend on size of image).
We can all agree that a fullscreen hero banner image can be considered as the largest image a website can have, if so? Then I recommend no image should be above 2400px wide (and no image should be above the size of 500kb) in your website image folder.
Let’s consider a typical medium image to be a size of half screen (or up to around 65% of full screen) wide, featured image. I would recommend it to be resized below 1500px wide (and may not exceed 250kb of file size).
We can consider a smaller image to be around the size of a typical vertical card and may be less than 800px wide (with the file size kept below 100kb).
Quick Summary
- Largest size: Resized to 2400px (or less) wide and exported to 500kb (or less).
- Medium size: Resized to 1500px (or less) wide and exported to 250kb (or less).
- Small size: Resized to 800px (or less) wide and exported to 100kb (or less).
2. NextGen Format
First of all, I will advise you to use a proper image format suitable for a website. See below recommendations:
- Use SVG for web graphics like logos, illustrations, and charts
- Use PNG if you cannot obtain the SVG version of the above image type
- Anything else just use JPG/JPEG
With WebP format you will get average of 30% more compression than JPEG and JPEG 2000 format, without loss of image quality.
Once you have all your images resized (and copies for each image resized for different device sizes) and have used proper formatting, you can now convert these images (except SVGs) to NextGen format to significantly reduce the file size while maintaining the quality. Choose from WebP or AVIF format and bulk format them using a tool such as Anyweb and extract these copies to the same directory with original formatted images.
3. Compress images
I recommend to never attempt to compress images until you have tried to resize and adjust the quality to be arround below or equal to the image size that make sense for a website ( mention above in step number one ) . If you followed all the steps above, now it is time to bulk compress your images using smart lossy compression tool like Tiny PNG. Make sure to compress the NEXTgen images too.
4. Responsive Images
Now you have all you images optimised, it is time to upload them to your server within your website image folder.
[html]
<img class="js-lazyload"
sizes="(max-width: 600px) 480px, 800px"
srcset="photo-480w.jpg 480w, photo-800w.jpg 800w"
src="phoyo-800w.jpg" alt="Photo Information"
width="800" height="400" loading="lazy"
/>
[/html]
In our HTML image element above, we will explain each and every attribute defined in the example above:
- SRCSET : Used to load all copies for each image and help direct the browsers to choose appropriate version image based on user device needs.
- SIZES: Used to load the suitable resized image copy provided from the list of copies within SRCSET IMG attribute. This works similar to CSS Media Queries (but the advantage of this approach is that the breakpoint rules will be applied soon as the image (HTML) is loaded.
- Height: Sizes within these attributes are the same as image dimensions, thus browser will reserve a blank box/space. Please make sure to use CSS to set your intend image height and width to make the image responsive (typically style=”height:auto; width:100%”).
- Lazyload: This is native HTML aproach to lazy load images or Iframes (as opposed to using JavaScript) to load an image/iframe only when a user scrolls to it. This way we save users data (and website load time) instead of download content that a user is not interested in. I recommend to also use the JavaScript approach as the native HTML lazyload attribute is not yet supported by all browsers. Deferring offscreen or hidden helps reduces issues with time to interactive(TTL).
- AlT: Description used when image cannot be loaded (Maybe there is network issue or the image URL is broken), the text within this attribute is displayed with a broken image icon. This attribute is used for accessibility for disabled people.
5. Serving Next-Gen Images
Next-Gen formats are not supported by all browsers, so we have to find a way serve the NEXTgen image to browsers that support it, and serve the original format to the browsers that do not support it (Next-Gen format). There are two ways to achieve such requirements.
1.Using Picture Tag:
An easy, native HTML approach to load different images for different needs like loading Next-Gen format image for modern browsers, and also loading original image format as fallback for older browsers. Consider an example below:
[html]
<!–Load Webp Using HTML Picture tag–>
<piture>
<source srcset="img/photo.webp" type="image/webp" />
<source srcset="img/photo.jpg" type="image/jpeg" />
<img src="img/photo.jpg" alt="Picture Information" />
</picture>
[/html]
The browser will go through all <source> elements inside <picture> tag, aiming to display images within the first <source> element meets the requirement specified within the tag in this case, if the browser support WebP). If the browser does not find a source tag that meets the required conditions then it will use the <img> tag underneath all <source> elements.
2.Using HTACCESS
Another option is to use an .HTACCESS file. This file runs before the browser can render your website page – just be careful when you are using this file (this website might break if errors are encounter ).
The advantage of using this file is that you do not need to modify your HTML and therefore, it is scalable as you are writing less code. The code snippet below will check if the current browser supports WebP and if it does, then it checks to see if you have a WebP version of that particular image within the same directory. If you do have it then it will display the WebP format instead of orignal format image.
[html]
<IfModule mod_rewrite.c>
RewriteEngine On
# Check if browser supports WebP images
RewriteCond %{HTTP_ACCEPT} image/webp
# Check if WebP replacement image exists
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
# Serve WebP image instead
RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=REQUEST_image]
</IfModule>
<IfModule mod_headers.c>
# Vary: Accept for all the requests to jpeg, png and gif
Header append Vary Accept env=REQUEST_image
</IfModule>
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>
[/html]
Conclusion
If you followed all the steps mentioned above, I can assure that you can no longer have any issues with images slowing down your website.