Optimising your images is paramount for your website’s page loading times. Optimising images for the web can reduce your total page load size by up to 80%.
Increased page speeds can result in better search engine rankings, improve your visitors’ browsing experience, hence your conversion rates (increased sales and signups), and save you storage space and bandwidth.
So, is that enough of good reasons for you to do the little bit of extra work?
We’ll show you how.
First a quick note about File Formats
The most commonly used file formats online are JPEG and PNG.
- JPEGsJPEG’s are good for most situations because of its compatibility, use of color, and small file size. JPEG’s should be used for all of your full
color photographs like featured images and background images. - PNGs best for screenshots and website design images. It uses lossless compression techniques so quality is higher, however this also means larger file sizes. PNG’s are great for smaller images with a lot of detail. The PNG format also supports transparent background capability which is perfect for logos and graphical elements.
- GIFs best suited for low quality images with just a few colours. GIF format is widely used for animated files.
Optimizing Your Images Before Uploading To Your Website
It is best practice to optimise images before uploading them to your website.
In Photoshop CC you will find this option in >File >Export >Save for Web
Guideline: Quality slider to around 20. Try to get your filesize to max 200KB.
If you don’t use Photoshop don’t fret, there are many free graphic editing applications:
- GIMP. GIMP is a cross-platform image editor available for GNU/Linux, OS X, Windows and more operating systems. It is free software, you can change its source code and distribute your changes.
Whether you are a graphic designer, photographer, illustrator, or scientist, GIMP provides you with sophisticated tools to get your job done. You can further enhance your productivity with GIMP thanks to many customization options and 3rd party plugins. - ImageOptim (MAC) ImageOptim makes images load faster. Removes bloated metadata. Saves disk space & bandwidth by compressing images without losing quality.
- RIOT(Windows) Radical Image Optimization Tool (RIOT for short) is a free image optimizer that will let you to visually adjust compression parameters while keeping minimum filesize.
- PNGGauntlet (Windows) PNG compression app for Windows. Uses PNGOUT, OptiPNG, and DeflOpt to create the smallest PNGs, without sacrificing any image quality. Converts JPG, GIF, TIFF, and BMP files to PNG
- Trimage (Linux) A cross-platform tool for losslessly optimizing PNG and JPG files for web. It was inspired by imageoptim. All image files are losslessly compressed on the highest available compression levels, and EXIF and other metadata is removed.
- TinyJPG reduces the file size of your JPEG images. Every uploaded image is analyzed to apply the best possible JPEG encoding. Based on the content of your image an optimal strategy is chosen. The result is a quality image without wasting storage or bandwidth.
-
Optimizing Your Images After Uploading To Your Website
As we said before it is best practice to optimise images before you upload them, however, if you need to save time there are many plugins available that can optimise your images after you have uploaded them to your website.
One of the most well-known optimisation plugins for WordPress is WP Smush – Compress, Optimize and Lazy Load Images
By WPMU DEV
Smush meticulously scans every image you upload – or have already added to your site – cuts all the unnecessary data and scales it for you before adding it to your media library.
Best to run the application when your website traffic is low e.g. overnight as the plugin can be a CPU hog when it is optimising images.
Alternatives to WP Smush include EWWW Image Optimizer, CW Image Optimizer, Imsanity and Hammy. Many WordPress users prefer using these plugins as they do not rely on an external server to process your images.
Please note that compressing an image will reduce file size, but can compromise quality if you compress an image too much. It is therefore important to get the balance between image quality and image file size right.
If image quality is your highest priority (e.g. for photographers), try out Lazy Load. This greatly improves page load time as images will only load when they are visible in the viewport.
Yes but what size?
Choosing the Image Sizes
Match the image size to the space where it will display.
If the image will display as a full-screen header it will need to be much larger than if it were an image for a blurb in a 1/6 column. Only use 1920 x 1080 where that size is needed.
Most of the time, a 1280 image will work just fine in place of a 1920 image. If the space calls for a 200 x 200, then resize your images to that size.
Image Dimension Guidelines Based on Divi’s Column Layouts
