Imagery is a critical part of any website design. However, research has shown that images and media files consume a hefty 63% of bandwidth on modern websites. Reducing the impact of images through image optimization is thus crucial for website performance.
The goal of image optimization is to reduce the file sizes without sacrificing too much of the image quality. It’s often a hard balance to strike and takes experimentation with different methods and approaches.
Optimize Images Before Uploading
Select the Correct File Format
Choosing the right image format can make a difference in the total file size of your image. JPG and PNG are the two most common file formats on the Internet.
Generally, JPG is used for realistic images, photographs and images with gradients or millions of colors. JPG usually has a smaller overall file size and can be resized without much quality loss.
PNG, on the other hand, usually results in a larger file size and is typically used for vectors, line art, transparent images and limited color images, such as logos. Make sure to use the right file type for the image you are selecting and uploading.
For JPGs or PNGs, you can reduce the size by saving your images as “web optimized” versions. In Photoshop and photo editing tools, you can select this option when exporting and saving an image.
Resize Any Oversized Images
Massive, oversized images are often the cause of slow page speeds. Resizing your images to the dimensions most suitable for the layout and container of your website is an extremely important step in optimization.
If you upload a massive, unscaled image to your site, it will require additional CPU resources and slow down your site. It is also recommended not to resize your images using HTML. For most areas of your WordPress site, you never need to upload an image larger than 1600 px.
Your web designer or developer can let you know the best dimensions to use for larger images such as banners or home page. Always find out the ideal size before uploading extremely large files.
When exporting your resized images, best practices aim to keep the file sizes under a couple hundred kilobytes. This typically can be achieved by ensuring the file is saved as web optimized at a resolution of 72 dots per inch (dpi), which is the web standard.
Remove Exif Data
Exif data is metadata like GPS coordinates, creation date, type of camera and other details that is added to photographs. Most often it can increase file sizes considerably so it is advisable to remove this information entirely.
Using Image Compression Tools
Image compression involves minimizing the size in bytes of a graphics file without degrading the image quality to an unacceptable level. There are 2 different ways to compress images: lossless compression and lossy compression.
Lossless compression is a technique where the original image data is not lost even after compression. On the other hand, lossy compression removes some of the data in order to create a reduced file size.
The challenge is to find a happy medium between the file size and the level of compression used. There are several tools available for image compression, including desktop software, browser-based tools, and WordPress plugins.
Desktop Software for Optimization
Desktop tools offer more control over optimization settings but often require a bit of a learning curve. Some examples are Adobe Photoshop, Gimp and Paint among others. If you aren’t familiar with these programs and the steps, it’s best to look at another option below.
Online Tools for Image Compression
Browser-based tools and services may offer a more simplistic approach to image compression for those that may not want to spend time learning photo editing software. A few popular ones include TinyPNG, ImageOptim, OptiPNG, ImageSmaller and Optimizilla.
WordPress Image Optimization Plugins
WordPress plugins allow you to optimize images as you upload, eliminating the extra steps that desktop software and online tools may require. Some plugins can even optimize images already in your media library. There are both free and premium plugins. EWWW Image Optimizer and WP Smush are two popular, free ones.
It is always best to have a web developer review the plugins and install the best option on your website. Some plugins may cause a strain on your server and compatibility issues can occur between different plugins.
If you are looking for help with image optimization or improving the performance of a slow WordPress site, reach out to our team and we’d be happy to help.
