Images are an important piece of the puzzle when your creating articles for your site. They help tell the story visually. They break up text so it’s not just one huge page of words. The issue is how to get them optimized so they still look great but keep the file size down so your page loads quickly? I recently went out on a mission to find out which plugin, software, or service seems to work the best when it comes to optimizing images for WordPress.
Why do you need to optimize your Images?
Fist let me tell you a story…
I have an older stepdaughter who many years ago decided to help her Dad out with creating a website for his business. She was spending the summer over there and she needed something to keep her busy.
So I gave her the HTML tome I had lying around (it was around 1000 pages!) and said have fun! Well a few months go by and I don’t hear anything about it. She comes back home from summer break and proudly hands me a disk saying “I did it!”
Well, she did it alright. The website she created was 170 megabytes in size! It took almost 5 minutes to render locally on my computer! So, I did my best without trying to hurt her feelings informed her that it was a bit too large and let me see what I can do to fix it. I re-wrote the entire site and optimized the images to get it down to a much more manageable 2-3 megs (entire site size).
Although this example was a simple HTML website created over 10 years ago. The point is that you need to keep your file sizes down to make sure your website is actually able to render when people visit it.
With visitors demanding more from your website. You want to provide the best experience possible for them. The site needs to be visually appealing as well as provide great content. It also has to load fast. The faster the better.
Optimizing images is just one step in the direction to help get your website to load faster.
WordPress – Use the Size Formats For Your Theme
When you are using images it is important that you are uploading the correct size of images that match your theme. For the current theme I’m using that means I need to choose a format that is 700px in width and 400px high so it will look right in the articles and the front page for the featured image. WordPress will handle the rest for me when it comes to building thumbnails etc for the site.
Use the Correct Image Format
It’s important that you use the correct image format for your website. I use the following rules for image formats to use:
- .PNG – I use this format first. For most of the images I upload it offers the best in terms of image quality and file size.
- .JPG (.JPEG) – I use this format whenever it’s going to be a picture of a ‘real thing’ such as pictures of landscapes, people etc and I want the quality to remain high. The tradeoff is going to be a larger file size.
- .GIF – I use these for anything that is going to be animated or very simple graphics that are usually small images such as icons.
Which Optimization Service Works the Best?
Now you know the formats to use and what sizes work best with your theme. How do you go about optimizing them? So I went and tested a few of the more popular ones out there to see how they would work. To do this I created an image inside of Canva (which is awesome btw!) and ran it through the four below to see how it would perform. The image is 1000px x 1400px and has a beginning file size of 195KB which is a decent file size for so large an image.
But you can get the file size down a bit more by using the following:
Note: One last thing before we get started. I used a pretty simple image for this tutorial with only a few colors in it. If you are attempting to compress photographs or those with a lot of different color? The file sizes still might not compress down as much as the example I’m using.
Yes, it’s expensive. And if your only using it for basic image editing. It is quite a large investment for an image editor. The thing is it does just about EVERYTHING you want to do. And optimizing your images for the web is one that it does quite well.
How to Use PhotoShop to Optimze Images
- Open the picture in Photoshop – File -> Open (CTRL + O for Windows or CMD + O for Mac)
- Click on File -> Save for Web and Devices… (CTRL + ALT + SHIFT + S for Windows Option + SHIFT + COMMAND +S for Mac)
- In the Dialog box that pops up you will then choose which file format you wish to use.
- Since this was already a .PNG image. I selected PNG-8 and left the defaults alone. You can select to remove the META data (shows copyright, author etc.) but that is up to you.
Optimized File Size: 56KB
There are other options out there that are free besides PhotoShop though so you don’t have to spend a ton of money just to do basic image manipulation/optimization:
Read More: The Must Have Free Software List for Windows
Update: Smush.it is no more. If you have the plugin installed? Uninstall it (Or you can pay WP DEV for their pro service – bleh)
Yahoo’s Smush.it service will take any image type you wish to upload either one image at a time or in bulk, optimize them and then provide a zip file for you to then upload to your website. Or you can use the WordPress plugin. It does a great job of optimizing images as well. The only big downfall this service has? Sometimes it goes down. If it does – it could possibly take your images down with it if your using the plugin. Note: I highly suggest going to your WordPress Settings -> Media and select “Do not process on upload” in the Smush.it settings. It will save you a lot of headaches! To use the service to optimize your image you upload (Assuming your using the WordPress Plugin): Go to your Media Library within the WordPress Admin page. Look for the “Smush.it” column on the far right. Click on the “smush.it” text to have it optimize the image. After it completes you will see how much you saved. Note: For testing I used the web service. Your results will end up being the same. Optimized File Size: 178 KB
EWWW Image Optimizer
This is another image optimization plugin for WordPress. Unlike Smush.it it uses your web server to optimize your images. I really do like this plugin though. It offers a lot of different options that Smush.it doesn’t offer. You can setup WP-Cron jobs to have it go through and automatically optimize images, hide the plugin for those who don’t have admin rights, and even convert jpeg to png onsite if you wish.
To use the EWWW Image Optimizer plugin you go through the same steps as Smush.it:
- Go to your Media Library within the WordPress Admin page.
- Look for the “Optimize” column on the far right.
- Click on the “Optimize” text to have it optimize the image.
- After it completes it will display how much you saved.
Optimized File Size: 177 KB
Dustin Stout from dustn.tv showed this new compression service recently. Being the doubting thomas I am I had to test it for myself. Well it does as good a job if not better than Photoshop did. And it does it for FREE.
To optimize your image using compressor.io:
- Go to the compressor.io website.
- Click on the big TRY IT button.
- Choose the compression type to use Lossy or Lossless (I’ll post a link below for the definition.)
- Drag or upload the image you wish to optimize.
- Watch the magic happen.
- Download the image.
Optimized File Size: 35KB
TinyPNG is another great website that offers you free image optimization. You drag and drop the images up to their website and they will do the rest. You can even run a bulk job of up to 20 images at once if you need to. The kicker though is that your images have to be under 1 meg in size. If your taking HDR pictures? This might not work out so well for you. For most stock images etc. it will work great!
As you can see compressor.io is the clear winner in terms of optimizing the file size of your images while maintaining image quality for the web. Photoshop comes in a close second though. While smush.it and EWWW are pretty close together they don’t compress images quite as well.
Regardless of what you use make sure you have your images setup properly using the correct sizes and formats for your own site. Then use any of the methods above to ensure that your page loads quickly and you should be all set.
- Wikipedia: Lossy vs. Lossless – Learn more about these different compression types for images.
- Adobe Creative Suite: Optimizing Images for the Web – This Adobe help page goes into more detail on how to use PhotoShop to optimize images for the web. I offer only a brief explanation on how I do it so figured this would help you better understand WHY I do what I do 🙂
Have Anything to Add?
Share your own tips, utilities, tricks in the comments below on how you optimize images for your own site. And make sure to share this article with those who you think need to learn how to do this for their own websites. – Thanks!
Copyright: jeecis / 123RF Stock Photo