Most people just upload images to their WordPress website without a second thought. But did you know that large image files will slow down your site? Sometimes these large files can even slow down your site a lot.
Whether they’re images you took yourself with your phone or camera or created in Photoshop or another software or they’re images you downloaded from a stock photo site, they need to be optimized for the web, ideally BEFORE you upload them.
In this post, I’ll show you several ways to optimize your images for faster web performance without losing quality.
First, let’s answer a couple of common questions: what is image optimization? And, why is it important?
What is image optimization?
Image optimization is a process of compressing an image into the smallest file size possible without losing quality. And these days, it’s pretty easy to do with a handful of tools and plugins that will automatically compress images by up to 80% without any visible loss of quality.
Why is image optimization important?
The two biggest reasons to ensure your images are optimized are site speed and hosting costs. Images, on average, make up 21% of a webpage’s weight. That’s a lot! And we know that faster websites rank higher in search engines, which means image optimization is something every website must do if they want to rank well.
Additionally, image optimization is important because:
- Optimized images take up less storage and bandwidth usage
- Help make your website speed faster
- Greatly improve SEO rankings
- And help to reduce the size of backup files
How to save and optimize images for web performance
The key to successful image optimization is to find the balance between lowest file size and image quality.
The factors that play a role in optimizing images are:
- file format – jpg, png, gif
- compression – higher compression equals smaller file size
- dimensions – the height and width of the image
Now, when it comes to image format, jpg is often best for images with lots of colors, png is best for simple images or when you need a transparent (clear) background, and gif is typically for animated images only.
Before we talk about the best tools and plugins to use for compression, let’s talk a bit about image dimensions.
Image dimensions
Photos from your camera or your phone will generally be very high resolution like 300DPI and large file dimensions (height and width). A typical 300DPI image will be around 2000 pixels or more in dimension and are best suited for print or desktop publishing. They are not suitable for web.
Reducing an image’s dimensions will also greatly reduce the file size of the image. You can resize images using an image editing software like Photoshop, Gimp, or Affinity Photo. If you’re on a Mac, you can even use the Preview app.
Optimization tools and programs
As I mentioned above, most image editing software like Photoshop allows you to adjust optimization and compression settings quite easily. There are also several powerful and free tools on the web as well. I recommend using one of these options (image editing software or an online tool) before uploading your images to WordPress. This method will save you a lot of disk space on your hosting account.
Online tools you can use include:
- TinyPNG – https://tinypng.com
- JPEG Mini – https://jpegmini.com
- Photoshop Express – https://www.adobe.com/photoshop/online/compress-image.html
- Optimizilla – https://imagecompressor.com/
- Kraken.io – https://kraken.io/web-interface
The other option is a WordPress plugin. There are several good ones on the market. Just remember, the best option is to optimize your images before uploading to your WordPress website.
Below are the WP plugins I recommend if you need to go that route:
- WP Smush – has both free and paid options
- ShortPixel – also has both free and paid options
- Imagify.io – has both free and paid options as well
- reSmush.it – totally free!
Final thoughts
If you’re not already ensuring your images are web optimized, you should start doing so immediately. In that case, you can install one of the WP plugins and compress images that have already been uploaded to your site. Then, be sure to compress them before uploading using one of the tools or software mentioned above.
TIP: if you’re using Photoshop, choose the Export > Save for web option.
Optimizing your images will make a huge difference in your site’s speed, not to mention the fact that faster websites are great for SEO, and you’ll likely see an increase in your search engine ranking.
In addition to image optimization, the two things that will significantly help you speed up your site are using a caching plugin and using a CDN. I’ll talk about those in another post in the future so stay tuned!
Hopefully this has helped you understand a bit more about image compression and why it matters. If you need support or further help, fill out the quote form on the Techie Bits page and I’d be happy to help you get things setup and moving in the right direction.
