Digital Photography Tips, Tutorials and Resources
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…
Method 2: Use Photo Editing Software
Use a photo editing tool to optimize your images prior to uploading them. The tools we recommend are…
For a full list check out our Best Photo Editing Software list.
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.
Next, simply click on the Install Now button to install the plugin.
Now you can click on the Activate Plugin link and the plugin will be activated.
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.)
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 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.
Optimole has over 70,000 users and is a freemium service that offers resizing, compression, CDN, lazy loading, and more.
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 or Lightroom and GIMP have plenty of features to optimize your images.
First thing you need to do is open your image in Photoshop or Lightroom.
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.
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.
Next, go to File » 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.
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.
You can now upload this file to your WordPress Media Library for use on your website.
Photoshop and Lightroom can be little expensive, but the features are 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 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.
Using WordPress and want to get Envira Gallery free?
Envira Gallery helps photographers create beautiful photo and video galleries in just a few clicks so that they can showcase and sell their work.