Photography is such an important part of web design, it can certainly help your brand stand out from the crowd. But if we’re not careful, the thing we think is helping our website, may actually be hurting it! Large image files can seriously slow down page speed. This blog post will show you how to optimize your photography and compress images for WordPress.
This blog post is specifically dedicated to compressing images before you upload them to the Media Library. Plus, learn how to bulk optimize a bunch of images at once and save time!
Best of all, you don’t need to use Photoshop to optimize photography. The tools shown in this blog post are completely free, including tools already installed on your computer.
After you download images from stock photography websites, it’s so important to take a couple of extra steps before uploading them to your website. The same is true with professional photography! The image files are not ready to be uploaded directly into WordPress.
As a side note, if you’ve already uploaded your images to WordPress, and you’re worried they may be slowing your website down, please check out my blog post on How to Automatically Optimize Images in the Media Library using the EWWW Optimizer plugin.
Table Of Contents:
- Why Compress Images for WordPress?
- What are Optimized Images?
- Manual vs. Automatic Optimization
- Step One: Reduce Image Size
- Convert Images to the WebP Format
Why Compress Images for WordPress?
You may not realize it, but when a web page loads, there is actually a lot happening behind the scenes that we cannot see! There are quite a few files being loaded in the background.
These files are essential to creating the overall design and functionality of the web page, and filling it with content. Depending on your website, you may have 100 files or more being loaded for each single page.
From a size standpoint, images files tend to be some of the biggest elements on the page. If you have several images on your page, this results in a lot of large files that need to load.
What are Optimized Images?
When website performance tools like PageSpeed Insights and GTmetrix are measuring how to make WordPress faster, they are checking two things for your images:
1 – Are the image files compressed down to the smallest size?
2 – Are the image files being served in the next-gen format of WebP?
Before we continue, what is WebP? It is an image file format that was created by Google in 2010. The idea was to keep the same quality of other image file formats (like JPEG and PNG), but reduce the file size as much as possible.
The WebP format is considered best for fastest loading times on a website. Your website will be flagged by these performance tools if you’re not using the next-gen format for images.
Manual vs. Automatic Optimization
There are two different methods to compress images for WordPress: Manual and Automatic.
With automatic image optimization, a plugin will automatically compress and convert your images to the WebP format as soon as they’re uploaded into your Media Library. Other than uploading photos, there are no other steps required by you. Sounds great, right?
There are a few drawbacks to this approach:
- Many image optimization plugins only allow you to compress a certain number of images for free. They require subscription plans if you have a large number of images.
- The image optimization plugins multiply the number of image files stored on your server. If you have a lot of images, they can take up so much space in your web hosting account without even realizing it.
- When you are relying on a third-party plugin, you’re also relying on the plugin to continue working without error and stay free forever. This may not happen!
While it does take extra time to manually compress images for WordPress, I recommend preparing your photos before using them on your website rather than relying on a plugin.
Step One: Reduce the Image Size
Just because I recommend manually working to compress images for WordPress, does not mean we need to go one-by-one with each photo! Let me show you how to compress a bunch of images at once and save time.
I will be working with stock photography from one of my favorite photography websites, Haute Stock. I downloaded the dreamy Haven collection.
On average, the photos are 1600px wide and the image files are 1.5MB – 2.5MB. For a stock photography website, that really isn’t terrible! But to optimize page speed, we can do better!
What Image Size is Best?
There are generally two types of photos on a website:
- Regular photos that appear within the page design
- Background photos that take up the full-width of the screen
Sharing an example from the Emilia WordPress theme, the top photo is a full-screen image that acts as the background image behind the text “Capturing authentic love stories in the wild.” Background images should be sized to a width of 2000px.
For all other photos that appear below the top section, these are regular images that do not take up as much space in the overall page design. They can be sized to a width of 1000px.
Resize Images in Bulk with Mac Preview
When working on a Mac, we can use Preview to change the image size of a large set of images at once. In the Finder, select all of the images that you plan to use on your website. Right click and hover over “Open With” and then select “Preview” from the drop-down menu.
Be careful, this will automatically resize and compress all of your original photos! If you want to keep the original high-resolution images, make sure you create a duplicate and optimize the duplicate images for your website only.
I recommend completing this process in two steps as there are two different image widths depending on where each image will be used in the page design.
First, select all photos that will be standard images within the layouts of the page. Next, select all photos that will be background images that take up the full-width of the screen.
Once the image files are opened in Preview, on the left of the screen select all of the photos. Next, click on the Markup icon in the top, right of the Preview screen.
Once the Markup options appear, click on the icon shown in the screenshot. If you hover over the icon, it’s called “Adjust Size.”
In the window that appears, set the width to the preferred width and then click OK. In this example, I am using 1000px. This will automatically resize all selected photos down to a width of 1000px, while keeping the original aspect ratio the same.
Resizing photos will already reduce the image file size significantly! When looking at the file size of my stock photography collection, the size has been reduced by 50% or more for all images. That’s a great start. The next step is to convert the photos to the WebP format.
If you are a Windows user, here is a blog post on resizing multiple images using PowerToys. You can also use the Photos app, but you will need to go one-by-one to resize images.
Convert Images to the WebP Format
One of my favorite tools to use to convert images to the WebP format is the Tiny Img WebP tool. I love that it’s free and that the tool is within a web browser – you don’t need to download any extra apps or extensions to use it.
As shown in the screenshot below, you can bulk select the images from your computer, and drag them into the “Upload Files” box on the Tiny Img website.
After the files have been converted, click the “Download All” button to download the converted images to your computer.
Now your images are fully optimized and ready to use on your website! I recommend repeating these steps before adding any future images to your Media Library. Now you know how to compress images for WordPress and optimize photography for the web.
