How To Optimize Images For WordPress In 2024
We want our images razor sharp and we want them now!
It’s difficult to build a reputation of a true professional when pixelated images dominate our online space, be it a portfolio, WooCommerce store, or a WordPress website for selling services.
That’s why every serious business owner needs to make sure that the posted images are crisp and of the top-notch quality; poorly cropped ones with visible pixels all over won’t make the best impression on their clients, after all.
There’s also the matter of page speed to consider — if you upload images that weigh a ton, they’ll slow down your side and make the overall experience horrible, especially on mobile devices.
But optimizing images isn’t as easy as it should be, and people have lots of questions on how to do it properly. In this article, we’ll try to answer them all, promising nothing less than best practices everyone should follow.
Without further ado, let’s see what can be done about keeping our WordPress site in perfect shape.
Image Size
There’s one sure way of slowing down your WordPress website: uploading images that are way too big, both in size and in weight. It’s a common enough mistake that you can pay dearly for.
Not only will your bandwidth suffer, your SEO ranking might take a hit, too. So if you never cared about the size of uploaded images, this is your sign to start taking it much more seriously.
How big should the image be? Just the exact size you need and not a pixel more. Ideally, if you need a 1200×720 image, you’ll upload a 1200×720 image.
If you need the same image but in different sizes, should you upload all of them? Ideally, yes, but that’s your call to make; you can use the HTML size attribute to make WordPress scale the images as needed. But there’s a price in the form of slowing down the site, so think twice; if you don’t have too many images, your site might survive this. Otherwise, it’s better to sacrifice disk space instead and create different versions of the same image.
At the same time, keep an eye out for your WordPress media library and delete at once any files that are no longer useful. Wasting space like that is pointless, after all.
To make these different versions, it’s best to do it before uploading with the help of such software like Photoshop, Figma, GIMP, and similar.
In Photoshop, it’s as easy as opening your chosen file and selecting Image → Image Size. In the new window, you’ll be able to provide the exact weight and height that you need, in inches, centimeters, pixels, or percentages.
You can also crop the image, if you don’t mind cutting off some parts of it. To do that, you can use Photoshop’s Crop Tool. Once selected, you’ll be able to drag the borders of the image to change its size however you want.
Most of the time, similar software offers similar solutions, so you should be able to repeat that process in other tools!
If you don’t have them installed, you can also use free online solutions such as Picresize or Image Resizer; they work in similar ways!
Image Resolution
Those that are familiar with printing images, know that image resolution is extremely important. If you print a picture with not enough dots per inch (better known as simply DPI), it’ll be blurred and in result, low-quality.
DPI has to be calculated based on the final dimensions of the piece and the distance between the viewer and the image. For example, billboards, which are seen from far away, can be set to 20 DPI; on the other hand, a fashion catalog would need 300 DPI, because we’ll be staring at it from up close.
Thankfully, you don’t need to bother about any of it, as long as your image will still stay digital. The best practice is to set all your images to 72 PPI (pixels per inch, DPI’s equivalent) and not a pixel more — otherwise, your file size will grow exponentially.
That’s why, if you have an image that’s small in dimensions, but it still weighs a ton and you don’t know why, the issue might be in the aforementioned resolution.
Image File Formats
But before you jump into resizing all your assets, let’s make sure it’s in the right format first. And the right format depends on the type of the picture you’re about to include.
If you’re uploading high quality images or photographs, pick JPEG; this will ensure all your colors are bright and saturated enough, while also staying true to the captured details. This format is also fully supported across the web, so you’ll never run into any issues. But there’s one downside: if you compress the JPEG image, it will lose some of the quality, so keep that in mind!
If you’re uploading illustrations, you want to keep their edges razor sharp even after compression; in this case, going for the PNG format is your best bet. It also comes with transparency, so if you want to have a picture without a background, pick PNG. The drawback — your PNG images will weigh more than JPEGs.
If you want the best of the both worlds, choose WEBP; this fairly new format supports both lossy and lossless compression, while also supporting transparency. All the WEBP files are also smaller than JPEG and PNG ones, consuming less cellular data, as well as supported by popular browsers. Best yet WEBP supports animations, so you can get rid of all your GIFs entirely.
The only downsides are that converting images into this format isn’t as simple, and the commonly used image editing software doesn’t support it.
If you’re uploading logos and icons, pick SVG; this vector format will ensure your assets will look sharp in any resolution and across all devices, removing the need to upload different versions of the same image. It also supports transparency, required for logos.
In short:
| JPEG | PNG | WEBP | SVG | |
| COMPRESSION | lossy | lossless | both | lossless |
| FILE SIZE | small | medium | very small | very small |
| TRANSPARENCY | no | yes | yes | yes |
| ANIMATION | no | no | yes | no |
Image Compression
Now, we have our images both in the right size and format. But can we work on them some more, to make them as lightweight as possible while maintaining its quality?
Of course — so let’s move on to image compression.
Here, you can also follow two different paths: you can compress the image in an editing software, if you have one, or use online image compression tools, which will allow you to compress images in bulk. For example, you may use TinyPNG, Compressor.io, or ImageOptim.
The advantage of using an image editing software lies in the fact that you have control over the compression. You decide on the exact percentage; meanwhile, using other tools, all you can do is to pray.
After uploading your compressed image to your WordPress website, check on different devices how it presents. See your website from your client’s perspective!
To Plug Or Not To Plug?
We went over the holy trinity of image optimization — the size, the format, and the compression.
If you know a thing or two about WordPress, then you surely know that there’s nothing that can’t be fixed with a good old plugin. So why haven’t we recommended one yet?
Because plugins consume hardware resources. And the more plugins you have, the more storage space will be taken, potentially slowing down the site. That’s why you should only use plugins for those things that are truly critical and can’t be done in any other way; everything else should be done off of the hosting server.
But if for some reason you want to use an image compression plugin, you can take a look at some of the popular solutions:
- ShortPixel
- WP Smush
- EWWW Image Optimizer
- Imagify Image Optimizer
- Optimole
Image Optimization: How To Do It Well
In short:
- Make sure your files are exactly as big as you need them. If you need a 500×500 picture, upload a 500×500 picture, exactly.
- WordPress can resize all your images for you, but it’s better to upload many versions of the same image to your media library.
- Check on your image resolution; never let it be bigger than 72 PPI.
- Learn about file formats and pick what’s appropriate: JPEG for high-quality photographs, PNG for transparent graphics, SVG for icons and logos, and WEBP if you want to be perfect.
- Compress your images to find the balance between quality and file size. In the ideal scenario, you’d compress them manually with an editing software rather than with a WordPress plugin.
For people who aren’t well versed in graphic design, this may seem a lot. But in practice, it’s easy and quick enough to become second hand in no time at all. So don’t be scared, and ensure your website becomes an unforgettable eye candy!
Frequently Asked Questions: How To Optimize Images For WordPress?
What Are The Best Image Optimization Plugins?
Some of the best image optimization plugins for WordPress are ShortPixel, WP Smush, EWWW Image Optimizer, Imagify Image Optimizer, and Optimole. But we don’t recommend using plugins; it’s much better to do it yourself, using online tools or image editing software. This way, you won’t waste any resources and won’t slow down the site.
What Are The Best Practices For Optimizing Images?
The best practices include ensuring that your WordPress images are compressed, resized, and of the right format: for example, JPEG is suitable for high quality photographs, but SVG are much better for icons, while PNGs would do a great job with illustrations that require transparency. Never upload images without checking the size, weight, and the image formats of your assets!
How To Upload Optimized Images To WordPress?
After optimizing images, you can easily upload them on WordPress. After logging in to your WordPress website, select “Media” from the sidebar. On the new page, where you’ll find all the existing images, find the “Add New Media File” button and drag the files to upload them. And that’s it — just remember to delete any files that are not in use anymore!
Can Baldy Optimized Images Impact Search Engine Rankings?
Optimizing images is important to ensure your WordPress website doesn’t get slow over time — and if it does get slow, the user experience will suffer as a result, which will make Google score it much lower. That’s why it’s important to learn how to resize images without compromising image quality.
