Do you want to learn how to optimize images for WordPress and make your website load fast?
Note: Image optimization is VITAL!
From my 10+ years of experience as a WordPress designer and developer, I can tell you that its importance is still very underrated.
I had numerous support cases when customers asked why their website was loading so slowly.
And yes, you guessed it, they usually blamed the WordPress theme while, in fact, they simply uploaded the image directly from the camera without optimization whatsoever.
This resulted in an EXTREMELY slow website because each image was over 10 MB in size.
Can you imagine?!
This post covers:
- 4 Easy methods to optimize images for WordPress
- 3 Best WordPress image optimization plugins
- 3 Best image optimization tools & programs
- Conclusion: master image optimization in WP
- FAQs about image optimization for WordPress
Fortunately, extreme cases like these are rare.
But even if your images are resized accordingly, there is usually still more that you can do to improve the loading time of your website.
Better loading speed = Better user experience.
The visual difference between an optimized image and an unoptimized one is insignificant, so it makes no sense NOT to apply it.
As you can see from the image above, it’s almost impossible to notice any difference between the two images.
That’s why image optimization is so important – there is almost no downside.
4 Easy Methods To Optimize Images For WordPress
There are several ways to reduce the image size, and it depends on the situation which one is the best.
Before we dive into different image optimization methods, let’s check all the advantages of it:
- Your website will load faster (don’t forget to read our guide on choosing a fast WordPress theme).
- Your Google PageSpeed score will improve.
- You will be placed higher in the search engine rankings.
- Lower bounce rate resulting in more page views.
- You will spend fewer resources on your server, which can result in a lower cost.
- You will save mobile data for your visitors.
1. Compress Your WordPress Images
So what exactly is image compression, and does it affect the quality of your images?
It’s a process applied to an image to minimize its size in bytes without degrading image quality below an acceptable threshold.
A compressed image requires LESS bandwidth, thus speeding up content delivery.
In layman’s terms, it simply means that the image and your website will load faster.
There are several popular online tools that you can use, for instance:
All these tools work similarly.
You either drag & drop or upload the image via the uploader tool, let the software do its magic and voila, you’re done.
You can expect a 20% – 40% reduction (sometimes a lot more) in size, which is a big deal if it’s applied to all the images on your website.
Using a COMPRESSION TOOL is an excellent option if you are just starting with a fresh website and don’t have many images.
But if you have many images on an already established website, then using a WordPress plugin is a better solution.
2. Resize Images
Don’t be like the users in the intro of our tutorial. No amount of compression will help if you upload the image in full resolution.
It’ll still be HUGE!
The downloaded image is usually bigger than needed if you download your images from stock websites like Pexels, Unsplash, or Shutterstock.
This means you have to resize it with an application like Photoshop or use an online tool from the list above.
Some websites like Pexels already have the option to download images in various sizes, which can greatly help you in this regard (and save you time).
3. Change the Image File Format
JPG format is the standard file format of digital cameras and is the most common image format used on the web because of its compression and universal support.
It’s best for photographs with small file sizes as it has almost no visible quality loss because of compression.
On the other hand, the advantage of PNG format is the lossless compression, which means there is absolutely no quality loss each time the file is opened and saved.
PNGs are also GOOD when you have an image with a strong contrast between different colors that need to remain sharp.
For example, it’s much better to use PNGs when you’re taking a screenshot of a user interface where different interface elements strongly transition between dark and light backgrounds.
Another thing to note is that JPG images can’t have a transparent background, while PNGs can, making them perfect for logos.
4. Use a CDN To Serve Your Images
A CDN or a content delivery network is a clever technique for storing your website and its content, including images.
How does it work?
A CDN has servers distributed across the globe. That’s why even if your origin server is in London, but you get a visitor from South Carolina, CDN ensures to deliver the images through a server nearest to South Carolina.
Without a CDN, your images will load through a London server, which may take additional time for the person from South Carolina to see them. And speed is crucial these days – especially on mobile!
3 Best WordPress Image Optimization Plugins
Resizing and compressing many images can be a tedious task.
A WordPress plugin is the only practical option if you have a website with many existing images and would like to start optimizing them.
Fortunately, there are many great WordPress image optimization plugins available, and I will share with you my favorite ones.
1. Imagify
Imagify is currently the most advanced image optimization plugin to help you resize and compress images.
It’s also the plugin ULTIDA uses for all its images.
This way, you can optimize your images automatically within your WordPress backend.
The advanced option of Imagify is a conversion to a next-get image format WebP.
It’s a modern image format that provides superior lossless and lossy compression for images on the web.
Fun fact: WebP lossless images are 26% smaller than PNGs.
The plugin basically works out of the box. Auto optimization on upload and backup of original images are enabled by default.
The most important step for any user is to set up the maximum pixels width for image resizing.
If any image you upload is above that size, it will be automatically resized, so you never have oversized images on your website.
SO. COOL.
Imagify is free for up to approximately 200 images (20MB).
If you have more images the growth package costs $4.99 and is suitable for websites that have up to 5,000 images.
The unlimited package is $9.99 per month and as the title says, you can have unlimited images on your website.
2. WP Smush
Another great plugin that you can use is WP Smush. It is currently the most popular plugin with 1+ million active installations.
Similar to Imagify, the plugin offers auto-optimization and compression on image upload.
But here are some extra features:
- Super-Smush is a new feature that optimizes images up to 2x more than regular smush with multi-pass lossy compression.
- Strip the image metadata to reduce image size further. While this information might be important to photographers, it’s unnecessary for most users and safe to remove.
- Compress original images. By default, WordPress will only compress the generated attachments when you upload images, not the original ones. Enable this feature to compress the original images.
3. IMSANITY
Imsanity is a great choice if you have to resize many images (in bulk) at once.
The plugin will adapt your images according to the size and quality parameters you set.
You can resize both new and old images.
It’s not a full-scale solution like Imagify and Smush, but it’s free, so if you’re not a demanding user, the plugin will work just fine for you.
3 Best Image Optimization Tools & Programs
We already explained why image resizing and optimizing are important and that you should never upload an image straight from the camera.
Let’s check some of the best applications that will get the job done – without a WordPress plugin.
1. Adobe Photoshop
The most renowned piece of software for image editing is of course Adobe Photoshop.
From photo edits to total image transformations, Adobe Photoshop has you covered.
While it can do basically everything you can imagine, it’s also great for resizing and compressing your images.
Attention: Remember not to save the image at maximum quality.
The only downside of Photoshop is its price. If you are not using it for professional means (ex. a photographer, artists, web designer, etc.), searching for a free solution is better.
2. GIMP
GIMP is a cross-platform image editor available for GNU/Linux, macOS, Windows, and other operating systems.
The beauty of it is its price.
Yes, you guessed it.
It’s absolutely free, now and forever.
It doesn’t have all the fancy functions of Photoshop, but if you only need to resize the image and make some small edits to it, GIMP is the perfect tool for you.
3. TinyJPG/PNG
If you prefer using online tools, TinyJPG or TinyPNG are the places to go.
Just note that this tool will only compress the image. For resizing, you still have to use one of the applications reviewed above.
I usually resize the image first and then use TinyJPG/PNG.
Conclusion: Master Image Optimization In WP
Despite being crucial, image optimization is often overlooked.
Yet, it’s a game-changer for site speed, something I’ve learned firsthand over my decade-long WordPress design and development career.
Imagine this: A website slowed to a crawl because it’s laden with 10+ MB images straight from a camera.
Sounds all too common, right?
But you now learned how to properly optimize images to ensure your WordPress website loads fast for the ultimate user experience.
Faster load times also mean improved SEO rankings, lower bounce rates, and, importantly, saved resources.
Don’t let bulky images weigh down your site ever again.
FAQs About Image Optimization For WordPress
What is image optimization?
Image optimization is a process of reducing the image file size without sacrificing much of its quality. The point of doing so is to ensure your website loads as fast as possible.
Benefits of image optimization for WordPress
There are several benefits of image optimization:
- Faster website load
- Better Google PageSpeed score
- A higher position in SERP
- Lower bounce rate
- Fewer server resources spent & mobile data saved
Does WordPress automatically optimize images?
No, WordPress has no image optimization by default. You either have to do it manually or use one of the many available WordPress plugins.
What is the best image size for WordPress?
There is no correct answer here but in general the lower the better. There is no need to overcomplicate your life in this matter.
Unless you are running an image-heavy website, following our tutorial steps will ensure that your images look great and load fast.
Should I compress images before uploading them to WordPress?
If you don’t have a lot of images and want to keep full control over your images (and don’t want to install another plugin), resizing and compressing them before uploading is a viable option.
But in most cases (my recommendation), it’s just better to let the plugin do its job.
Is PNG or JPEG better for WordPress?
Both formats are great for images. JPGs are slightly better for photographs and normal images and PNGs are better for images with high contrast (JPG format can get blurry when saved to a lower quality).
And PNG format is the only one that can process transparent backgrounds (good for logos).
::
Note: This article was originally published on November 23, 2022. But our team regularly reviews it and updates it with necessary improvements for accuracy.
