Trust me, you don’t want Google to hate your website. Fortunately you can reduce your images’ file sizes to help improve your website’s performance. One problem with formatting them is that modifications often reduce their quality. That’s not a bad thing as long as you don’t make them ugly.
There are some tricks and techniques that let you reduce the images’ file size and still keep them pretty enough to proudly display them on your website. So let’s take a look at how to format your images without making them ugly, as well as how to optimize images for web and performance.
#1. The Benefits of Formatting Your Images
First, why do you need to format your images? What are the benefits? There are a lot of benefits of optimizing your images for performance. Here is a look at the main benefits.
- It will improve your page loading speed. If your page takes too long to load your visitors might get tired of waiting and move on to something else.
- It improves your SEO. Your site will rank higher in search engine results. Large files slow down your site and search engines hate slow sites.
- Creating backups will be faster.
- Smaller image file sizes use less bandwidth. Networks and browsers will appreciate this.
- Requires less storage space on your server.
#2. How To Optimize Images for Web and Performance
The primary goal of formatting your images is to find the balance between the lowest file size and an acceptable quality. There is more than one way to perform almost all of these optimizations. One of the most popular tools is Adobe Photoshop, but there are several alternatives. Some of these tasks can be performed using plugins.
The two primary things to consider are the file format and type of compression you use. By choosing the right combination of file format and compression type you can reduce your image size by as much as 5 times. You’ll have to experiment with each image or file format to see what works best.
Choose the Right File Format
Before you start modifying your images, make sure you’ve chosen the best file type. There are several types of files you can use:
- PNG – produces higher quality images, but also has a larger file size. It only uses lossless compression.
- JPEG – uses lossy and lossless optimization. You can adjust the quality level for a good balance of quality and file size.
- GIF – only uses 256 colors. It’s the best choice for animated images. It only uses lossless compression.
There are several others, such as JPEG XR and WebP, but they’re not universally supported by all browsers.
Ideally you should use JPEG (or JPG) for images with lots of color and PNG for simple images.
Lossy – this is a filter that eliminates some of the data. This will degrade the image, so you’ll have to be careful of how much to reduce the image. The file size can be reduced by a large amount. You can use tools such as Adobe Photoshop or other image editors to adjust the quality settings of an image.
Lossless – this is a filter that compresses the data. This doesn’t reduce the quality but it will require the images to be uncompressed before they can be rendered. You can perform a lossless compression on your desktop using tools such as Photoshop, FileOptimizer, or ImageOptim. Some plugins will apply Gzip compression to images (minify them).
It’s best to experiment with your compression techniques to see what works best for each image or format. If your tools have the option make sure you save the image for web. This is an option in many image editors and will give you the quality adjustments so you can perform optimal compression. You’ll lose some of the quality, so experiment to find the best balance you can without making the images ugly.
Here is a list of tools to optimize your images. Some are free. Some give you the tools to perform your own optimizations and others do the work for you.
#3. Image Optimization Plugins You Can Use
You don’t have to do all of the formatting by hand. You can use plugins to do at least some of the work for you automatically. There are several plugins that will automatically optimize your image files as you upload them. They’ll even optimize images that you’ve already uploaded. This is a handy feature – especially if you already have a website filled with images. Here’s a look at some of the best plugins to format your images for better performance.
This is the free version of the premium plugin and will reduce the hidden information from images to reduce the size without reducing quality. It will scan images and reduce them as you upload them to your site. It will also scan images that you’ve already uploaded and reduce those too. It will bulk smush up to 50 files at once. You can also manually smush if you want. It will smush JPEG, GIF, and PNG image types. File sizes are limited to 1MB.
This free plugin uses the TinyJPG or TinyPNG service (the free account lets you compress around 100 images per month) to optimize your JPG and PNG images. It will automatically compress new images and bulk compress your existing images. It will convert CMYK to RBG to save space. It will compress JPEG images up to 60% and PNG images up to 80% without a visible loss in image quality. It does not have a file size limit.
This free plugin will compress 100 images per month and will compress multiple types of files including PNG, JPG, GIF, and even PDF files. It will do both lossy and lossless image compression. It will convert CMYK to RGB. It takes your images and thumbnails into the cloud for processing and then brings them back to your site to replace the originals. It creates a backup of the original files so you can manually restore them if you want. It will convert gallery files in bulk. There is no limit to the file size.
The Optimus WordPress Image Optimizer uses lossless compression to optimize your images. Lossless means you won’t see any quality loss. It supports WooCoomerce and multi-site and has a nice bulk optimization feature for those with already large existing media libraries. It also is compatible with the WP Retina WordPress plugin. There is a free and premium version. In the premium version you pay once annually and you can compress an unlimited amount of images.
Imagify is created by the same team who developed WP Rocket, which most of you are probably familiar with. It is WooCommerce, NextGen Gallery, and WP Retina compatible. It also has a bulk optimization feature and you can choose between three different leves of compression, normal, aggressive, and ultra. It has a restore feature as well, so if you are unhappy with the quality you can one-click restore and re-compress at a level which better suits your needs. There is a free and a premium version. You are limited to a quota of 25 MB of images per month with a free account.
#4. Best Practices
- Use vector images whenever possible – especially for logos, icons, text, etc.
- Minify with Gzip compression and compress SVG (scalable vector graphics)
- Remove unnecessary image data
- Crop the white space and recreate it by using CSS to provide the padding
- Use CSS3 effects as much as possible
- Save your images in the proper dimensions instead of letting HTML or CSS resize them
- Use web fonts instead of placing text within images – they look better when scaled and take less space
- Use raster images only for scenes with lots of shapes and details
- Reduce the bit-depth to a smaller color palette
- Use lossy compression where possible
- Experiment to find the best settings for each format
- Use GIF if you need animation
- Use PNG if you need high detail and high resolutions
- Use JPG for general photos and screenshots
- Scale your images to their display size to reduce the number of pixels
- Remove any unneeded image metadata
- Automate the process as much as possible
- Save images as Optimized for Web
Once you’ve formatted your images for better performance and followed best practices, your site will be better liked by search engines, browsers, and networks, and will load faster for your readers. Oh, and if you would like to know how to prevent hotlinking your images check out our tutorial.
Have you formatted your images for better performance? Do you format them by hand, use a plugin, or both? Is there another tool or plugin you would recommend? Do you have something to add? Let us know about your techniques and best practices in the comments below!