Elegant Themes Blog

Stay up to date with our most recent news and updates

How To Optimize Images For Your WordPress Website

Images are a vital part of grabbing a visitor’s attention, breaking up long pieces of content, and helping your content be shared across the web. Unfortunately, images also increase the size of your pages.

Every image that you add to a page has to be downloaded by visitors from your server to their computer. This increases page loading times, which can frustrate visitors and have an adverse effect on search engine rankings.

Too many images will also increase your bandwidth significantly and use up more storage on your server. This is unlikely to be a problem at the start of your website’s life, however it could increase your hosting costs over time.

In this article, I would like to show you how you can optimize your images for your WordPress website.

File Formats

Graphic applications allow you to save images in a number of different file formats. The most commonly used file formats online are JPEG and PNG.

JPEGS are better suited for photographs as they contain many colors. The format uses compression in order to reduce file size. PNGs are more suited to screenshots and website design images such as icons and buttons. It uses lossless compression techniques so quality is higher, however this also means larger file sizes.

Optimizing your images will reduce file size, but it will also effect the quality of the image.

The other format that you will see used frequently on the internet is GIF. GIFs are better suited for low quality images with just a few colors. Today, the GIF format is widely known on the internet as being the file format for animated files.

Optimizing Your Images Before Uploading To Your Website

WordPress has a useful thumbnail feature that will automatically create three different sizes of any image you upload. This can be found in the WordPress admin area under settings/media.

You can adjust the thumbnail sizes are you see fit. or example, you can configure WordPress to create a 150×150 pixel thumbnail image, a 300×200 pixel medium image and a 600×600 pixel large image.

If you uploaded an image that was 1,000 pixels in width, you could display the large image in your article and link to the full size image. This is exactly what many bloggers do, however it is not the optimal way of handling images. Whilst the file size of thumbnail images will be smaller as WordPress reduces the size of the uploaded image, WordPress does not compress images when it creates thumbnails. A more efficient method is to optimize images before you upload it them to your website.

Most graphical editing applications allow you to reduce the quality of an image for the internet. In Photoshop, this option is called “Save for Web and Devices”.

Most graphic editing applications have an option to save images for the internet.

Photoshop allows you to choose the file type of the image and the quality of the image. The bottom left hand side of the interface also details what the image file size will be if you save the image using a particular setting.

Photoshop allows you to choose the exact level of optimization.

Comparative optimization options are available in other graphic editing applications, such as GIMP. If your graphical editor does not have an optimization option, I recommend checking out one of the following applications:

All of the above applications are free to download. There are many premium applications available online too though I do not see any major benefits to using them over their free alternatives.

One of the best features of Radical Image Optimization Tool is the ability to compare the image you are optimizing with the original image.

Optimizing Your Images After Uploading To Your Website

There are many plugins available that can optimize your images after you have uploaded them to your website. I believe that it is better to optimize images before you upload them, however I do understand why many website owners optimize images after uploading as it can save time.

One of the most well known optimization plugins for WordPress is Yahoo’s WP Smush.it. Utilizing the Smush.it API, the plugin allows you to strip meta data from JPEGs (date, time, camera etc.), optimize JPEG compression, convert GIF files to PNG and remove unused images.

Smush.it can optimize all of your images at once.

If you have not optimized your images in the past, Smush.it is a quick and effective way of reducing the file size of all of your uploaded images. Be warned that the plugin can be a CPU hog when it is optimizing images. It is therefore best to run the application when your website traffic is low e.g. overnight.

Final Thoughts

The importance of optimizing your images should not be underestimated. Optimizing your images will reduce your website’s page loading times, reduce bandwidth and improve the browsing experience for visitors. Your search engine ranking should also improve due to your pages loading quicker.

Please remember that whilst compressing an image will reduce file size, quality can also be notably reduced if you compress an image too much. It is therefore important to get the balance between image quality and image file size right.

For those of you who place a big priority on image quality (e.g. photographers), I recommend trying out Lazy Load. Once the plugin is activated, your images will only be displayed to visitors when the images are visible in their browser. This greatly reduces the initial size of web pages as images will only load when the user scrolls down the page.

If you would like to know more about optimizing your WordPress, I encourage you to read my recent article “Optimize Your WordPress Website Using These Simple Tips“. In the article I cover a lot of important topics such as reducing post revisions, enabling caching and utilizing a content delivery network.

As always, if you have any questions regarding this tutorial, please leave a comment below

By Kevin Muldoon

Kevin is our resident tutorial master. He has years of experience with WordPress, and is a professional blogger with a special interest in social media, internet marketing and web design.

Hi Kevin, this is a very nice article. I have been using SmushIt since a long time. I do a batch process via ImageOptim before uploading them. Currently I am facing some issues after updating my theme into TwentyFourteen. Some of the featured images are resizing via html/css resulting bad user experience. I guess it is something to do with responsive theme that resizing such images for better Mobile Experience.

2nd issue that I came across was both PageSpeed and GTMetrix while testing my site. It said some of my images are yet to compress. How does one go for a 2nd level of compression!

I’m curious if programs like RIOT or PNGGauntlet are better at optimizing images than the WP plug-ins like SmushIt?
I have a few websites with many JPEG images and I have to take care of reducing the volume of these photos …

Smush.it sucks major… go with EWWW or RIOT. The best program I use is called Caesium, but it’s not a plugin. What I do is finish all my images how I want, put them in a folder, then batch process them all at once and set the quality to about 90% or so. works wonders.

I’ve been using RIOT since a couple of years and is really what I found the best tool for optimizing images as you actually see the results before doing the job and decide which compression best applies for a given image.

Thanks for the list of plugins. I’ll pass this info along to my clients.

I agree that the best practice is to optimize your photos before you upload them.
There are several online or browser based free photo editing programs – for instance Pixlr – that are a terrific option for optimizing photos without the price tag of Photoshop.

I frequently use a very lightweight application called ‘fast image resizer’. It’s very handy for batch image resizing and optimisation. I always recommend it to folks who wouldn’t be very good at Photoshop etc. It can be downloaded free here http://adionsoft.net/fastimageresize/

Yep, it’s very handy! Having the images optimised prior to uploading is crucial especially in areas where internet connections aren’t great. This little app its just a drag and drop process, literally fool proof!

I use ACDC to reduce each image file-size to around 300k. I know I could go a lot smaller, but I use “fancy box” to allow images to pop out and mainly want to achieve good quality for viewers in Hong Kong who have lots of bandwidth.

e.g.

Do you think 300k is way to big for the image size? If so what size would meet the requirements I just mentioned? Any advice would be great! Thanks in advance!

Hello guys. Good article. Anyone know about any plugin to detect and delete unused thumbnails? It happens sometimes, that you move in a WP site with lots, thousands, of uploaded pictures, and if the new install has any slightly different thumbnail size from the WP Media Settings or from the theme itself, and if you regenerate the thumbnails, that action will generate thousands of orphan pictures using your disk space. As far as those files are thumbs, it won’t be listed as non-attached in the media list. That files should be deleted, but how.

Another scenario: if you happen to upload several pics to a post and finally pick one of those, and forgot to delete the unused ones, there is not a quick and easy way to know what to delete if you want to clean the unused pictures of old posts.

In those two scenarios, one plugin would come in handy.
I can recall the “WordPress Uploaded Files Cleaner” but the last time I used it, almost one year ago, it did a mess. No kidding. Fortunately I did a backup before “processing” the pics and was able to recover from the damage.

So, if anybody know about a plugin, I will be glad to give it a try
Cheers!

I’m using this onehttp://wordpress.org/plugins/image-cleanup/
but you have to be careful with what you really want to clean.
Works fine on standard WP installations but reports wrong unused images for WP multisites as it seems to not well handle sub-domains.

Interesting tips. Will pass on a recommendation to some clients who never seem to grasp the image size concepts.
Also highly recommend Pixelmator for MAC. Super good at image editing, easy to use and low cost.

Hi Kevin
Thanks very much for this article that helps a lot newbies like me.
I would like to ask you a question, and i dont know if it posible to answer in this forum or not?
I have followed the link to another of your articles ” simples tips to optimize tyour web” and in one of them, tou talked about gzip compresion, and about changing the number from 0 to 1.
I have changed this but when i press the button in order to save the changes in the options page, a message appears in my browser

“Request Entity Too Large

The requested resource
/wp-admin/options.php
does not allow request data with POST requests, or the amount of data provided in the request exceeds the capacity limit.”

What did i do wrong??

Thanks for your help if it is posible in this forum. If it wouldnt be posible, thanks anyway for both articles.:))

spot on advice. if for some reason you did not optimize your image prior to uploading your WordPress website, You can do some on site editing to the Image on the back end of the site. It is a bit kludgy but works in a pinch. The link to my site (using Divi!) Provides a tutorial.

Nice writeup, this article can help lots of people. I’ve seen many WP sites that don’t utilize the thumbnail feature of wordpress. They use the width/height attributes for img to resize, and in turn this slows the site’s loading time (and consumes more bandwidth!)

Great post. I’m just getting my photography website up and running with the help of Divi (which is great!). This post brought up a lot of things that I haven’t spent much time thinking about. Regarding the plugins that strip meta data, I wanted to note that this can have copyright implications for photographers.

Also, thanks for mentioning Lazy Load, I need to check that out.

Additionally, I can also second Alastair’s recommendation of Pixelmator. It doesn’t replace Photoshop for power users but is a great alternative for those on a budget.

I recently tested my key pages on GTmetrics (thank you for that valuable tip in one of your earlier articles!) and at the head of the list were three big Fs! Two had to do with images! The recommendations were a) to specify image dimensions and b) optimize images.

What do they mean, specify image dimensions? In the url? Is this something the theme does? I’m using Elegant Themes’ Trim (which I love, love, love). Is there a setting I need to change? Some css I should add?

Also, if I remember rightly, the ET website used to recommend that you upload your images to your server first, then add them to your media library as a link (rather than uploading them using the WordPress media upload). When I got those Fs for images, I looked for that guidance again and it didn’t seem to be there any more. Would it be worth it to go back and redo all my images that way?

Good article. I’ve been doing graphic design far longer than WordPress, so I would agree it’s always best to pre flight all your graphics, images, etc before uploading. Making sure you export each image to the proper file type, and best optimization possible. It takes a bit of time to get a feel for what is best for each instance.

Photoshop still does the best job in most cases for versatility, but I understand not everyone has the option to own or learn Adobe software. Photoshop elements is rather limited. If money is an issue, download GIMP. It’s free and works fantastic. It does many of the same functions as Photoshop and has great exporting options. GIMP works for Linux, Windows & Mac now. I’d actually recommend GIMP over Photoshop Elements or many of the cheaper commercial applications.

Great article! I was trying to optimise a photo I found on the internet with Gimp. It started being a 2048 x 1365 JPEG that is 208 KB. I made it smaller (1600 x 1066) and saved it to a .png, and ended up being 1,2 MB!!! How did that happen? What’s the way to optimise images using GIMP?

JPG images take up less room than PNG’s; however sometimes the difference in quality is visible if you optimize the image too much (looking back at some of my posts, I have clearly reduced the quality of some images too much!).

It is difficult to optimize an image that is 1,600 pixels in width, however you should hopefully get it smaller than 1.2mb. Play around with the settings. Perhaps you have not chosen the best settings (it can be trial and error with this kind of thing).

Great post Kevin,
I use photoshop all the time, so most images I upload to my sites or clients sites have been saved for web and optimized via photoshop.

I’ve used Smushit a few times and it works great but I just dislike the delay you get after uploading a new image.
Going to download Radical Image Optimization Tool because I think that will be a handy tool for quick optimization.

I want to use EWWW Image Optimizer for optimizing images i have already uploaded to my website (there are over 1000 images mostly in JPEG). Because of fixed dimensions (800*600 and 300*225) i want to know will dimensions of my images be reduced if i use this plugin to optimize them? Cause if dimensions are gonna be shrinked then i have no use of optimizing them…

Great article. Along with the comments, it is very informative.
I’ve always been the same as you. I ALWAYS optimize an image before I upload it.
Each image is different but I mostly use Fireworks to optimize my images and Photoshop for photo images. With .jpg images, you can also remove the meta data which can be quite a lot sometimes, as much as 15% However, don’t do this if your not the copyright holder.

hello
I have a question for my site http://www.zorbas.dk .
If i use smushit or premium seo pack light for my pictures and after erase the plugin, will my pictures get back to how they were before or will they still resized?

Hi
Am new with WP and am wondering how to insert images at a specific place in my page.
I tried to add a few animated gif (flags), but no way to put them within my text where I describe in which country I was.
The flags appear only on the left hand side of the page.
How can you manage that?
Thanks
Serge

i have some trouble in optimizing the images i have uploaded on my website. I can optimise the ones in media library with a plugin. But i do have more than two hundreds of pictures in a plugin called Easy Galley. none of the image optimizer plugins that i had tried, were able to optimise inside that plugin…. so any suggestions?

I am about to upload a bunch of images and came looking for information on the optimum size in px and res. Watching a Divi video I see that 1200x845px is shown but no PDI is mentioned. Firstly, that is very odd size and secondly in none of the thread above is there no mention of actual numbers.
Am I missing something and can someone help?