ImgFunction Examples
We've put together some example website pages to help show, how you manage and display your images can greatly affect the efficiency and speed of your website.
Each of the example pages are built from the same core HTML page and contain the same set of svg images and photographs taken by us using an android mobile phone.
On each page we have taken these core set of images and either applied a new process or setting, with an explanation of what we did and test results to show how it has effected / improved the page.
These examples are built using HTML & CSS, though if you are using a CMS then you may be able to apply settings to give you these options.
Our currently released examples are below which we will be adding to soon.
Image Resizing & Optimization Examples
Original Images
This example page shows the original full sized photographs without any process to change the image files.
Original Image PageSized Images
The Sized example page shows the photographs after we have resized the originals using a photo editor.
Sized Image PageOptimized Images
The Optimized example page shows how we used the resized photographs and then put them through a free online tool that reduces their file sizes.
Optimized Image PageThese three example pages show the workflow of taking the original photographs to resizing and then optimizing them. On each page we give a brief description of what we did and how. Then show test results of how each process effects the loading speed of each page.
Modern Image File Format Examples
Webp Images
The Webp example page shows how we have taken the resized photographs and converted them from .jpg to .webp files using a free online tool.
Webp Image PageAvif Images
The Avif example page shows how we took the resized photographs and converted them from .jpg to .avif files using a free online tool.
Avif Image PageNote: Depending where your website is hosted, you may need to set the correct mime type for Webp/Avif images.
Additional Image Examples
Lazy Loading Images
Lazy Loading example page shows how you can offer users faster pages with the adding of an attribute to the img tags in your webpage.
Lazy Loading Image PagePicture Compare
Spot the difference! We've put together 3 photographs of the same Minster image, 2 of which are Optimized at different qualities for you to compare.
Picture Image PageNote: Other options can be applied to the img tag to help with loading and performance depending on your site needs.
For more information on these take a read of Google's web.dev pages.
A good one to get started with is Browser-level image lazy-loading.
If you would like help to tune your website images & settings, then please contact us.