I see it all the time. WordPress sites loaded with huge unoptimized images. The result is a beautiful page that loads as slow as molasses.
Optimizing images for your WordPress site is more important than ever. Google is rolling out the mobile first index, and page load speed is a ranking factor.
More people than ever are using mobile devices to browse the web. Loading unoptimized images, especially over a slow mobile network, takes a long time — which is super irritating.
People are more impatient than ever, so they click away, never to return.
For your website to succeed in a mobile-first environment, you’ve got to optimize those images.
So I’m going to show you the easiest ways to ensure that the images on your site are lean and mean, and still look great.
First a little basic web image info.
What is an optimized image?
There are 3 things to focus on when optimizing an image for the web: physical size, format, and compression.
It’s important to be sure that your images fit the area they occupy. An image that’s too large for its intended space gets squeezed down to fit. That taxes the users’ browser.
An image that is too small gets stretched out. The greater the size difference, the worse that image looks.
WordPress has a couple of features that help you avoid this problem. On upload, WordPress creates 3 new copies, a large, medium, and thumbnail version.
These are the default settings:
You can, and should, set your media size settings in Settings > Media to the widths used in your theme. For example, the content area of this site is 1020px wide, so I have the large image set to that width. I set the height to 0 because I don’t want to limit the height.
Tip: You can use the Regenerate Thumbnails plugin to resize already uploaded images. Always take a backup before running Regenerate Thumbnails!
In 2015, support for responsive images was included in the WordPress core. The browser will only download the best choice for the device. That speeds up loading time and saves bandwidth.
You can learn more about that on the WordPress website.
The JPG, or JPEG, format supports millions of colors. That makes them good for photographs and images without transparency.
JPG images are lossy. That means that some loss of data occurs when compressed. When optimizing a JPG for the web it is a tradeoff between quality and file-size.
The GIF format is the granddaddy of web graphics. They support a maximum of 256 colors, which means, on today’s web, they are pretty limited. They are fine for simple graphics with flat colors, but they have lost popularity as better formats have improved. GIFs are great for simple animations – of course, you are familiar with the animated GIF.
The GIF format is lossless. Unlike JPG, there is no loss of data when compressed.
PNG images are a lot like GIFs but you can’t animate them. There are 2 kinds. PNG-24 supports millions of colors, and PNG-8 supports only 256 colors.
The PNG format is lossless and supports transparency. It’s great for logos and icons and any graphics with transparent areas.
SVG, the only vector illustration on our list, is a whole other animal. An SVG file contains code directing the browser to draw the image. Since they are the only code they are very lightweight and scalable with no loss of quality. They are often used for icons and logos – the MGWebworks logo is an SVG.
It’s unlikely that you will be uploading SVG files to your site. If you want to learn more about the SVG format, read this great Sitepoint article.
There is a lot to learn about image formats, but here is the gist when it comes to optimization:
JPG: Great for photographs, images with lots of color.
PNG: Great for icons and illustrations.
GIF: Good for graphics with flat color, simple animations. Somewhat old school.
The majority of images that you will need to optimize are JPG, for example, photographs, and PNG. Screenshots tend to be PNG.
Image compression is the process of reducing it’s size so it takes up less space. We are talking about data here, not measurements. Data is removed during compression. The trick is to reduce it enough, but not so much that quality is reduced to an unacceptable level.
This is the single most common issue I see. I have fixed so many sites that were loaded with huge images, uploaded directly from a phone, I can’t count them all. In fact, this is what prompted me to write this post.
A 2MB image from a phone can typically be reduced to less than 100KB, usually much less than that.
For the unaware: 1MB = 1024KB, so this is a significant difference. I will explain the easiest ways to do this, keep reading!
What about pixels per inch (PPI)?
It’s a widespread belief that images for the web need be 72px per inch. The good news is that this is not true, so you don’t have to worry about that.
Don’t believe me? Take a gander at this:
WordPress Image Optimization Plugins
There are many plugins available that will optimize your image for you. Most offer a limited free version and a premium version with more features or better compression.
Just a few:
- ewww Image Optimizer
My favorite is Shortpixel, and I install it on every site. I like it because it creates the lightest image after compression, and the images still look great.
The settings include the option to limit the physical size, you can have it convert PNG to JPG – great for screenshots, and it even supports WebP.
It saves the original images in a dedicated folder, so there is an undo if you’re not happy with the results.
Shortpixel optimizes images when you upload, and you can optimize individual images on the media page. It will also optimize PDF files.
I’ve seen it reduce a 2MB image down to 50KB, and still look great. I put it on every site I build.
There is a free plan that will optimize 100 images per month. That doesn’t go as far as you may think though. When an image is uploaded, WordPress creates multiple versions of different sizes. It also compresses the images, but not enough. Each version of each image is counted as 1 image, so 1 image can actually be 7 or 8, depending on your theme and plugins.
Shortpixel offers monthly plans and one-time pay-as-you-go plans. Unless you upload thousands of images a month, I think the best bet is the pay-as-you-go plans. Whatever plan you choose, the pricing is very reasonable, and money well spent.
Optimize Images with Desktop Software
You can optimize images for the web with Photoshop, but there are also some great free graphics applications available that do a great job.
GIMP is an excellent Photoshop alternative that has been around for years. It was originally only available for Linux. But now there are both Windows and Mac versions.
Paint.net is a great Photoshop alternative for Windows.
ImageOptim is a great little app, but it’s only for Mac.
Download – https://imageoptim.com/mac
So Optimize Those Images!
Whatever method you choose, it’s really important that your WordPress site not get bogged down with unoptimized images. It slows your page load times, annoys your users, and quickly fills your hosting account.
The easiest way to manage images is with a good plugin like Shortpixel. If you want to do things another way that’s fine, just make sure you do it.