Image compression is an underrated but essential tool in both the Technical SEO and your website’s functioning.
Image formatting’s primary goal is to strike the right balance between the lowest possible file size and acceptable image quality. While there is more than one way to optimize these images, some are better than others.
That being said, one of the best and most popular ways to optimize is to simply compress an image before uploading to WordPress. This can be done with a tool like Affinity Photo or Adobe Photoshop.
Another way to optimize and compress images is to use PhotoBulk, a Setapp program. This program allows you to easily upload, edit, crop, resize, and save images and place them directly into your WordPress site page.
However, regardless of which method you decide to go with, there are two primary things to consider when compressing images: the file format and type of compression you utilize. By choosing the right combination of compression type and file format, you can reduce your image size by up to 5 times! You’ll have to experiment with each image or file format to see what works best.
Choose the Right File Format
Prior to modifying your images, you will want to make sure you’ve selected the best file type. There are several types of files you can use:
- PNG – produces higher quality images. It was created as a lossless image format, although it can also be lossy.
- GIF – the best choice for animated images. It only uses lossless compression.
- JPEG – uses both lossless and lossy optimization. You can adjust the quality level to find a balance between file size and quality.
For a better comparison of file formats, check out this graphic from Page Cloud!
image You can choose the best image file format based on your needs. These are not all the available formats, either. There are others, such as WebP and JPEG XR, but they’re not always supported by every browser. One tip we can offer is to use JPEG/JPG for images with lots of color and PNG for basic images.
Understand Compression Quality vs. Size in Image Compression
It is also essential to understand that you can use two types of compression: lossy and lossless.
Lossy: Lossy is a filter that eliminates some of the data of your image. This will negatively influence the image quality, so you will want to be careful of how much you reduce the image. You can use image editing tools such as Adobe Photoshop, Affinity Photo, or other image compressors to adjust the quality settings of a photo.
Lossless: Lossless is a filter that compresses the data of your image. Using lossless doesn’t reduce the photo quality, but it does require the images you want to use to be uncompressed before they can be rendered. Lossless compressions can be done quickly on your desktop using tools such as FileOptimizer, Photoshop, or ImageOptim.
To better understand lossy vs. lossless compression, check out this picture below. Our bird on the the left is an example of lossless image compression, while our bird on the right is an example of lossy image compression.
It is easy to experiment with different compression techniques and find out what works best for you, depending on image and format. If the tools you are using have the option, save the image for the web. This is an option in many image editing programs and will give you the quality adjustments to perform optimal compression. Keep in mind that you may lose some of your images’ quality, so it is best to experiment with different programs to find the best balance between quality and file size you can.
Use Image Optimization Tools and Programs
There are a ton of image compression/image editing programs out there, both premium and free, that you can utilize to optimize your photos. Some programs will give you the tools to do your own optimizations, others do the work for you. It is up to your needs to decide which type of program you will use. Here at TKD Design, we personally recommend PhotoBulk, but Adobe Photoshop and Affinity Photo are also affordable easy-to-use programs!
Resize Images to Scale
In the past, it was imperative that you upload images to scale, but now WordPress 4.4 supports responsive images (images that are not scaled down by CSS). This is great because WordPress will now automatically create several sizes of each image that are uploaded to the media library. Including the available sizes of an image into a srcset attribute will then allow you to choose and download the most appropriate size and trash the others.
Clean Your Media Library
Looking for a tool to save space while also cleaning up your media library? Well, you can use a handy plugin called Media Cleaner to find unused media files and get them cleaned out to free up storage space on your site. This plugin will scan all your media files across your posts and pages and list unused ones in the Media Cleaner Dashboard so you then can browse through and delete them at your discretion. Easy!
Media Cleaner also implements a simple-to-use deletion system: when files are deleted, they are moved to a trash directory inside the plugin. That way, you will be able to test your website for a while and make sure everything is fine and no important media is missing! Even if an important file or media item is missing, you can restore it with just a click!
And that’s the rundown on image compression! If you have more questions about image compression and storing media, contact TKD Design!
