File Size
An image has no business being over 1Mb in size. This is a red flag. To check, open your inspector > network and filter by images. Load the page and sort by decreasing size to view your largest images.
If you’re unsure, use this app to check for the best file size while keeping an acceptable amount of quality: https://squoosh.app/
Dimension
The biggest factor is the dimension. Due to the prevalence of retina devices these days, your image dimensions need to be twice the displayed pixel size. However, we need to define the upper bounds for images. Generally your biggest image fill be anything that is the full size of the viewport. Your container should also have a maximum size. Suggested maximum container size: 1400px. Therefore the ultimate maximum image width should never be more than 2800px.
Medium images would do fine for most cases at 1000px wide. Use your best judgement. Context matters too. If you’re choosing an image that’s to be used as the hero image on the homepage that’s full width, you may want a higher resolution image to account for large retina screens.
Format
Different kinds of images should use different formats. Follow these guidelines
- JPEG, for photo realistic, or anything with a lot of gradient colors, shadows, and generally a lot of different colors and no need for sharp edges.
- PNG, for anything that needs crisp edges, transparencies and has few colors.
- WebP, due to lower client support as of this day, this should be provided through a service like CloudFlare which will detect client support of WebP and serve in that format.
Compression
Even with the proper format selected, your image may still have a high file size. This is where image compression comes in. Certain software comes with tools that will do this for you.
WordPress
- EWWW Image Optimizer
- Imagify
- Compress JPEG & PNG images – this generally provides better savings but requires an account API and is pay per use. Request use only in special cases.
Photoshop
Photoshop offers a “Save for Web” function when saving images. Always use this when exporting assets. Play around with different settings to achieve best results.
MacOS
ImageOptim – handy for bulk optimization on Mac.
Sketch
An ImageOptim Plugin is available for Sketch.
CDN
Besides the file size, sometimes the response time of an image may be due to a network factor. You’ll notice this by a high time value in your inspector. To improve this, implement a CDN. A CDN will distribute your image assets across a large array of servers which reduces the network distance and increases availability of the asset to the user. These servers are also usually configured to serve static assets efficiently as well. The following are some CDN’s that can be implemented:
- Cloudflare
- DigitalOcean Spaces
- Google Cloud Storage
- Kinsta
WordPress
WordPress has a few plugins that can offload the media library onto a CDN to increase performance and also reduce server storage needs:
Usage
The best image contraception is abstinence. Avoid using images when possible.
- Don’t load a full icon library when you can embed only the SVGs you need.
- For simple shapes, use CSS
- For interactive images (those that are apparent on first load) consider using ajax calls to load them in instead of loading all at once and hiding.
- Convince clients to avoid sliders.
- Use lazy loading. This loads assets only when they’re in view. This is especially useful for long or content heavy pages.
Video
It’s not uncommon to use a video as a background. Use the following command to optimize your video
ffmpeg -i video.mp4 -c:v libvpx-vp9 -an -b:v 700k -s hd720 video-700k.mp4