Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

Speed Up Your WordPress – How to Save Images Optimized for Web

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
Speed Up Your WordPress – How to Save Images Optimized for Web

Are you saving images wrong? Most beginners don’t know how to save images properly which can have a huge impact on website speed. In this article, we will show you how to properly save images optimized for web.

Every blogging expert will tell you that images help increase engagement. However what they don’t tell you is that not optimizing images for web can slow down your site. According to Strangeloop, a one-second delay can cost you 7% of sales, 11% fewer pageviews, and 16% decrease in customer satisfaction.

Strangeloop Speed Case Study

Video Tutorial

If you don’t like the video or need more instructions, then continue reading.

How to Save Images Properly?

When saving images, you need to consider two things: image file format, and compression. By choosing the right combination, you can decrease your image size by 5x.

For most of us, the only two image formats that matter are JPEG and PNG. To keep things simple, use JPEGs for photos or images with lots of color, and use PNGs for simpler images or when you need transparent images.

For those who don’t know the difference, PNG image format is uncompressed which means it is a higher quality image. The downside is that file size is much larger. On the other hand, JPEG is a compressed file format which slightly reduces image quality in order to provide a significantly smaller file size.

On WPBeginner, majority of our images are JPEGs.

The next thing is compression which means using a tool to save images optimized for web. Compression can make a huge difference.

See the table below which highlights the few combinations we could have used to save the Strangeloop image used in this article.

Image Format Image Size
Photoshop Optimized JPEG High 33 KB
TinyPNG Optimized 57 KB
JPEG Mini Optimized 70 KB
Photoshop Optimized JPEG Max 93 KB
Non-Optimized JPEG Max 119 KB
Photoshop Optimized PNG 135 KB
Non-Optimized PNG 145 KB

Image Compression Tools for Bloggers

Now that you have seen the difference each compression type makes, below is how you can properly save images optimized for web and speed up your site.

Adobe Photoshop

Adobe Photoshop is a premium software that comes with a feature to save images optimized for web. Simply open your image and click on the File > Save for Web & Devices button.

This will open a save screen. On the right, you can set different image formats. For JPEG format, you will see different quality options. When you select your options, it will also show you the file size on the bottom right.

Adobe Photoshop Save for Web Box

Note: We understand that Photoshop is fairly expensive. GIMP is a free alternative that users can use. Other Adobe products such as Fireworks can do the job as wel.

TinyPNG

TinyPNG is a free web app that uses smart lossy compression technique to reduce the size of your PNG files. All you have to do is go to their website, and upload your images. They will compress the image, and give you the download link.

For developers, they also have an API to convert images automatically.

JPEG Mini

JPEGmini uses a recompression technology which significantly reduces the size of images without affecting their perceptual quality. You can use their web version for free, or purchase the program for your computer. They also have a paid API to automate the process for your server.

ImageOptim

ImageOptim is a Mac utility that allows you to compress images without losing any quality by finding the best compression parameters and removing unnecessary color profiles.

Windows alternative to this is Trimage.

As you can see that there are several tools you can use to optimize images for web. When using Photoshop compression, we saw the best results in size however the quality was affected. TinyPNG was a clear winner for saving any type of PNG on the web.

Some suggest that you can use a combination of TinyPNG or JPEG Mini and Image Optim for even better results. However running two separate tools to upload images can increase your workload a bit.

Final Thoughts on Image Optimization

If you’re not saving images optimized for web, then start doing so now. It can make a huge difference on your site speed, and your users will thank you for it. Sure the image quality might decrease slightly, but most users won’t notice it.

If you’re looking for quality images, then see our guide on how to find royalty free images for your blog posts.

Last but certainly not the least, using a CDN to serve images for your WordPress site can significantly speed up your site. Check out this infographic to see what is a CDN, and use our guide on how to setup CDN for your site. We’re using MaxCDN for our site.

We hope you found this article helpful.

Do you have blogger friends who’re saving images wrong? Share this article with them, so they can speed up their site. They’ll thank you for it.

If you have any questions, then please leave a comment below. Also don’t forget to follow us on Twitter and Google+


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Carrie says:

    Sorry for being the dunce in the corner, but could someone please clarify one thing? I installed the WP Smush it plugin and have been slowly working through all the photos I’ve uploaded to my site for the last 2 years. I’m doing 50 at a time, the free limit. However, now that I have the plugin, for future photo uploads, does having it mean I don’t have to use any other program to resize my photos before uploading them to my WP site? If I have an 8 MB photo and upload it to my site, the plugin does everything for me? I just want to confirm that the original photo is not still uploaded and saved to my host server, SiteGround. My site is wicked slow, I’ve run tons of diagnostics, and I still can’t figure out why except that everything points to my photos. Thanks!

  2. Jeff says:

    hi

    Best Image Optimization Plugins for WordPress Site Which is?

  3. Gagan says:

    I was thinking what if i upload my Images to Google Blogger and use them on my wordpress Site by “Insert From URL” option?
    Any suggestion if this is a Good Idea or no?
    Thanks in advance

  4. Zimbrul says:

    I came back here as I’m looking for plugins that upload a large image as a optimised image straight to WordPress. I’m sure I’ve seen this somewhere here at WP Beginner but I cannot find it.

  5. Jack says:

    Photoshop is definitely the best one, for online services, kraken.io and resizeimage.net are good alternatives to tinypng.

  6. tanveer says:

    is xnview a good option for compressing images?

  7. Larry Aldrich says:

    Someone mentioned RIOT in an earlier comment. It is my go-to app for minimizing images BEFORE you upload them. The compression rate is close to phenomenal. Sorry MAC users, but it’s only available for Windows.

  8. Martin says:

    Hello WPBeginner,

    I would be very interested in the Windows version of Trimage you have apparently seen.

    On the Trimage homepage you just see a link asking for help with the windows port…

  9. Greg says:

    I have got used to using Fireworks even though I have CS3

  10. Marianne P. says:

    I just checked out the Trimage site and did not see the Windows version – just various *nix versions. Please point me in the right direction. Thanks so much – really great article!

  11. Corinna says:

    I was wondering if there was any way of reducing the size of the images already uploaded to a site? I have changed the way I upload them so in future all my images will be smaller. But I thought maybe it would be useful to change the size of those already uploaded.

  12. Samiullah Khan says:

    Search the web too much to find good solution to optimize images; but most of them most of them doesn’t let’s see tools mentioned in this post work or not

  13. Graham says:

    The article defines PNG as an uncompressed file format, but as far as I know, standard PNGs use lossless compression.
    And I think it would be helpful to mention why you might choose one format over another for continuous tone images (eg. a photo) vs. limited palette images (eg. a logo).

  14. Rob Dewing says:

    Why no mention of Photoshop Elements, the cut down home use version of Photoshop? It does 90+% of the things full phat Photoshop will do, including ‘save for web’ image compression, all for less than $100.

  15. site says:

    So what can I do, having my images on amazon s3 ? I don’t know how to auto optimize….I have plenty there ATM and don’t know what tool to run through now and in the future…

  16. Ines says:

    Would you recommend to use Flickr to upload your images and then copy the HTML code to your wordpress site? What would you suggest for travel blogs that contain lots of pictures? Thanks.

    • WPBeginner Support says:

      You can add flickr photos in WordPress by simply pasting the photo URL in a post. Normally we would not recommend it, because people will be viewing and finding your photos on Flickr and may never even get a chance to visit your website. However, if you feel that building a community around your photos on flickr is more useful for you, then sure go ahead.

  17. Benjamin says:

    You could add kraken.io to your list. It does the same thing as Jpegmini but also works with PNG images.

  18. Aurel says:

    I am using RIOT, which is free, very fast and exelent program.

  19. Debra Torres says:

    I’ve been using the Yahoo Smush it tool at: http://www.smushit.com/ysmush.it/
    Would you recommend this one? Or are the others you mentioned better?

    • WPBeginner Support says:

      Smushit is a great tool too. But try other tools we mentioned and compare the results.

      • James DiGioia says:

        There is WordPress plugin for Smush.it:

        http://wordpress.org/plugins/wp-smushit/

        This makes it easier to compress images using Smush.it without having to prep them beforehand.

        • Youri van Dijk says:

          I was about to mention that plugin as well. I generally do save my images optimized myself, but for clients that are not very familiar with these tools installing the plugin is a huge benefit.

  20. John Mauldin says:

    Your article is VERY timely. Just encountered the need to reduce hundreds of photos for a kitchen and bath showroom. Bought JPEGmini since I could only do 20 photos a day in the free version but $19.99 is nothing for the ability to drag and drop entire folders into the program and have it zip them in seconds/minutes. Thanks so much for the help!

  21. Haseeb says:

    Isn’t there any automated way of doing this on wordpress? How about ‘WP Smush.it’ ?

  22. Marlene says:

    Great article, however I was under the impression that any images with text on them should be saved as PNG files for best sharpness….?

    • Editorial Staff says:

      PNG will definitely have a higher quality, but most folks won’t be able to tell the difference unless you put them side-by-side. If you can speed up your site with a non-noticeable difference, then why not :)

  23. Adam W. Warner says:

    Great article, and an important subject many WordPress admins miss.

    [Link Removed]

  24. Lynn says:

    Lightroom has a number of presets for exporting to Facebook and Web – do those compress the photo files sufficiently or should I still turn to Photoshop?

    • Editorial Staff says:

      Not sure about lightroom and how it exports image. You can run a side-by-side test.

    • Graham says:

      Lightroom will do pretty much the same job as Photoshop when exporting photos to JPEGs.

    • Bill Wells says:

      Lightroom is the go-to for photographers; it allows you to optimise your photos in batches and then will export the batch to your preferred pixel size and compression in a number of formats, including jpeg. It also automatically adds your copyright message to the batch if you want.

      I don’t know about batch-processing in Photoshop but I use it for major image manipulation only.

      I guess if you’re doing graphics or heavy manipulation, use Photoshop but if you’re using lots of photos and just want them to look their best, use Lightroom.

  25. Scott Wyden Kivowitz says:

    I’m a big advocate for many of the products you mentioned. Now I get to add this link to my resources for whenever customers ask me this exact question. Thanks Syed.

  26. Dave Kulas says:

    If you are taking the pictures yourself for your website …. set your camera to take a picture at 800 x 600 and at less resolution. Some camera have a Good – Better – Best resolution setting … use the “GOOD” setting. . You should get an image that will load quickly.

    If you already have some images … take a look at for FREE … http://www.getpaint.net ….. I have been using it for years. I take the HUGE photos given to me by clients … then RE-SIZE them to 800 x 600. Then I use the built in compression tool to compress the image.

    • Steven Alig says:

      I would not recommend taking low resolution photos.
      You will want to take your original photos at higher resolutions just in case you want to use them for something else. Plus if you take photos at a higher resolution, you will have the ability to crop in on an area if desired.
      If the photos are a lower resolution, you will not have that option and will be stuck with what you have taken as the original.

      • Mark Pridham says:

        I have to agree with Steven on this. I highly recommend taking high resolution images in your camera. You then have a large file that you can work with, It very easy to reduce file size from a hi-res image, but impossible to go the other way. By taking hi-res images, you also have the option of using them for print work if the need arises, Generally, I end up with the large, raw image, a cropped and retouched print image, and a smaller image for web-based work.

      • Michael Maye says:

        I would agree too about taking full high resolution photos. Then resize down and compress for uploading to your website. You will always have the original high res photo for other uses.

  27. Zimbrul says:

    I usually use Fireworks and then Tiny PNG if required.

  28. Geoffrey Gordon says:

    Great article Syed.

    However I really think that fireworks is the king when it comes to optimising images for the web and its a whole lot cheaper than Photoshop.

    • Editorial Staff says:

      Thanks Geoffrey. Yup I know Photoshop is expensive which is why I mentioned other free tools as well. GIMP and Fireworks both has this functionality.

  29. paul says:

    So I’ll just follow the options as seen on the image in this article’s Photoshop section and it’s all good?

    • Editorial Staff says:

      Yup, if you do that, then you will have probably one of the best performance results. However depending on an image, some might not look as good, so in those cases we try the Very High. Do it on case by case basis, but most images would be fine.

  30. Andrew Brown says:

    You discuss using Photoshop, which is way beyond most bloggers needs or price – why do you not refer to Lightroom, which also has an excellent image export option, including an option to restrict the max file size, as well as save by dimension or using a set dpi.

    Once some one knows the comp screens work at 72dpi, the rest becomes much easier, and it becomes amazing as to how easy it is to have a web template amongst the export options without needing any real in depth knowledge of what needs to be done.

    • Editorial Staff says:

      Andrew,

      Yes we understand that Photoshop is expensive which is why we mentioned several other free options. Just updated the article now to add a link to GIMP right below photoshop.

      As for Lightroom, didn’t mention it because we don’t use it. Same reason why Fireworks was left out.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.