Performance
Media files
For most web sites - the largest files for the users to download is usually media files like images and videos.
Image optimization
The file size of an image can greatly decrease if it is being optimized. You can test by using an service like TinyPNG.
Itiden Image optimizer
You can test to upload your image and see the difference in different file formats at https://image.itiden.se/
Static sites
When build a static site, images could be optimized during the build step using vite-plugin-imagemin. This will probably make the build step take longer time. If lots of images are used this might not be the best solution.
Dynamic sites
When using a CMS or an upload functionality where editors or users can manually upload images it's important to make sure the best solution is used. If the users uploading images has the knowledge of first optimizing the image before upload - that would be the best solution. If that is not possible, make sure to optimize images either when uploaded or when requested (the optimized image should in this case be cached so that it does not need to be optimized at every request).
Statamic
Statamic has built in support for image optimization using Glide. Read more at https://statamic.dev/image-manipulation.
WordPress plugins
To make sure images uploaded to WordPress are optimized use the Plugin wp-cubi-imagemin and to make use of webp format use WebP Express.
composer require globalis/wp-cubi-imagemin wpackagist-plugin/webp-expressNext gen formats
Formats used by images are constantly being improved. Make sure that images used are available as webp or avif. Notice that all web browsers might not support these formats so fallback images might be needed in png or jpeg.
Browser availability
Lazy load images
When a web site has lots of assets to download it's a good idea to make sure to prioritize downloading visible items. Adding loading="lazy" to a <img> element makes sure the image is not loaded until it is visible in the browser window.
<img src="image.jpg" alt="..." loading="lazy" />Use correct image sizes
There is no need to download an image to the browser that has more pixels to it than the screen area that is displaying it. For example if an image takes up 60x60 pixels on the users physical display, downloading an image that is 600x600 pixels is unnecessary and slows down the initial loading of the site. Make sure that images have appropriate sizes to avoid unnecessary loading or blurry images.
High resolution displays
Most modern laptops and essentially all smartphones incorporates a 2x or 3x DPI (Dots per inch) with means that the screen scales up the content by two or three times. This is because the high resolution of these displays which would otherwise cause the content to look tiny. Instead these displays would render a 300px wide element over 600 or 900 actual pixels.
This is great, but causes a problem with images* since scaling a raster image will make it look pixelated and softer than the rest of the site which will scale correctly. We simply need more pixels.
To solve this we can use the “srcset” image attribute to specify different size variants of the same image.
If we were to have a 300px wide img element we could have a srcset attribute like this.
*This doesnt affect vector based graphic like .svg images. It only affects bitmaps/raster images like .jpeg and .png
<img srcSet="img.jpg 300px, img.jpg 600px, och img.jpg 900px" sizes="300px"/>The browser would then automatically select the appropriate image based on the DPI of the display.
To do
Images used on the web site is optimized.
Next gen formats are used.
Images are lazy loaded.
Correct image sizes are used