Envira Gallery Blog

Digital Photography Tips, Tutorials and Resources

How to Optimize Your Images for the Web (Step by Step)

How to Optimize Your Images for the Web (Step by Step)

by Waseem Abbas on Aug 15, 2016

Do you want to properly optimize your images so your website loads faster? You may be concerned about losing the quality of your images in the process. However, following a few simple techniques can help you to maintain the quality of your photos, while reducing their file size for the web. In this article, we will share how to optimize your images for the web.

There are two methods we recommend for optimizing your images for the web:

Method 1: Use a WordPress Plugin
Use a WordPress plugin to automatically optimize every image you upload. The plugins we recommend are…

  • WP Smush
  • EWWW Image Optimizer
  • Imsanity

Method 2: Use Photo Editing Software
Use a photo editing tool to optimize your images prior to uploading them. The tools we recommend are…

  • Adobe Photoshop
  • GIMP

Ready to get started? Let’s begin with the first method: using a WordPress plugin.

Method 1: Use a WordPress Plugin

For the purpose of this tutorial, we will be using the WP Smush plugin to optimize the images we upload to WordPress. However, the other tools we recommend work well also, and you can learn more about them below this tutorial.

First thing you need to do is go to Plugins » Add New from your WordPress backend.

In the search bar, you should write ‘WP Smush’ and press the enter key.

Search Plugin

Next, simply click on the Install Now button to install the plugin.

Install Plugin

Now you can click on the Activate Plugin link and the plugin will be activated.

Activate Plugin

WP Smush automatically optimizes all newly added images after the activation of the plugin. However, you can go to Media » WP Smush to optimize previously uploaded images (you can optimize up to 50 photos at a time.)

Bulk Smush

If you don’t like the WP Smush plugin, you have other options. Here are two other plugins we recommend for the job…

1. EWWW Image Optimizer

EWWW Image Optimizer

EWWW Image Optimizer allows you to optimize the images automatically when you upload them in WordPress. You can change the file format using this plugin, so it gives you the size you need for your site.

2. Imsanity

Imsanity

Imsanity is a WordPress plugin that helps you resize your bulk images to optimize them for a fast load time. You can choose a default size for your photos. You can also compress JPEG images, and convert photos from BMP to JPEG, or PNG to JPEG.

The Problem With This Method

Unfortunately, WP Smush and other plugins can only reduce the size of the image by about 10%. Really big images will stay heavy after optimization, and this will effect the load time of your website.

Also, plugins like WP Smush don’t give you absolute, complete control over how your images are optimized, unlike method number 2 (explained below).

Method 2: Use a Photo Editing Tool

We recommend optimizing your images outside of WordPress for the best results. WordPress have limited features, however, photo editing software like Adobe Photoshop and GIMP have plenty of features to optimize your images.

First thing you need to do is open your image in Photoshop.

You should press Alt + Ctrl + I to open Image Size window. Simply check mark the Constrain Proportions, so it keeps the width and height in proportion.

Image Size

Reduce the size of the image by width to fit your website’s standard blog featured thumbnail size. You will see that the height will adjust automatically.

Set Width

Next, go to File » Save for Web.

Save for web

It will open a window where you will see the settings to save your photo. You can optimize file format, manage quality, and more.

You can check the quality of the optimized image in the preview.

Save Settings

Once you are satisfied with your settings, click on the Save button and it will ask you where to save the image on your computer.

Save in Computer

You can now upload this file to your WordPress Media Library for use on your website.

Photoshop is a little expensive, but the features worth it and you will have full control over optimizing your images. However, if you don’t want to go for a premium method to optimize your images, then we recommend that you use GIMP.

GIMP

GIMP Photo Editing Software

GIMP is free to use and optimize images similar to the steps above for Adobe Photoshop. You can save images for web and use them to speed up your page load times.

That’s it! We hope this article has helped you to learn how to optimize your images for the web. You may also want to check out our other post on 9 best free image optimization tools for image compression, and this ultimate guide to WordPress speed and performance.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Comments

  1. Hello Envira,

    why do you recommend resizing to the size of a thumbnail, isn’t that very small?

    Thanks,
    Stefan

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 privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.