How To Optimize Images For Your WordPress Site

Adding images to the internet can be a tedious task, and if done incorrectly you can be causing more damage to your site, than you are adding value. In the following article we aim to cover the importance of image optimization for the web, different image formats, how to optimize your images with Lightroom, some recommended image sizes, image SEO, and how to find unoptimized images on your site. 

Image optimization is the process of delivering images in the right format, dimension, size, resolution, and quality, whilst keeping the image file as small as possible. Image optimization should be done before uploading any images to your website, using tools like Lightroom, Photoshop (or other professional photo editors), JPEG Mini, and Tinypng.com. It can also be done when uploading images directly to your website, however, to have them properly optimized using this method you will want to use a paid plugin or service that does it effectively.

This is a MUST READ article for anyone who takes their website seriously. If you can get your image uploads right from the first time, you’ll save yourself time, money, and headache in the future. You might also improve your website performance and user experience since your pages will load faster.

Importance of Optimizing Images for the Web

Using images on your website has been proven to help with user engagement, increase in conversions, and improved user experience.
Optimizing images for the web helps with a few things:

1. Most importantly it helps reduce loading time for your website. By reducing image sizes you reduce your page size which means less data to be downloaded when viewing your page. This means that your page can load faster, it will keep people on your site and improve the overall experience users have with it.
2. Boost your SEO ranking. That’s right! In 2010 Google announced that speed was a factor they used for ranking websites. The faster your site, the better you can potentially rank. This isn’t something that is going to change, especially with the importance Google now places on mobile experience, smaller pages will load much quicker on mobile devices.
3. Better UX and lower bounce rate. Adding images can help engage with your visitors and make your posts more valuable. Adding optimized images will mean faster loading and users spending more time on your site.
4. Increased Conversions. Faster loading times and better SEO can lead to more users on your site, indirectly increasing conversions. 

Having worked with thousands of photographers over the past 5 years, we have found that the number 1 reason for slow sites, especially photographers’ sites, are unoptimized images. These images create huge pages that don’t perform well. Thankfully this can easily be fixed by following the image optimization tips in this article.

Optimizing Images for the Web with Lightroom

As we mentioned earlier in this article, being proactive and actually optimizing images before you upload them to the web is the best solution for preventing slow loading and poor performing sites. In the following section, we are going to show you how to use Lightroom to optimize images for the web so that you can get the best quality and sized images for your site.

TIP! If you want to check your image sizes before you upload them to your site to make sure they are optimized, you can check the dimensions and file sizes by inspecting the images:

• PC – Right click on the image file and select Properties.
• Or with your keyboard: Alt + Enter
• Mac – Press Option while clicking on the image file (or right click), then select Get Info.
• Or with your keyboard: Command ⌘+ I

You’ll then be able to see the image dimensions, file type, and file size. 

Now let’s get started with optimizing images via Lightroom. If you don’t have Lightroom, you can use the same principles with other tools such as Photoshop or GIMP (free).

Once you have edited your images in Lightroom and are ready to export them for the web, follow these 8 steps to save them as web-optimized images. Check out the following video, or read on for the written steps.

Step 1 – Exporting Images

Choose the images you want to export, you can do this in 3 ways:

1. Highlight and Export – simply select any photo(s) from your Lightroom library, right click on the photo and then select “export”
2. The second option is to go to File > Export
3. The third option is using the keyboard shortcut Shift ⇧+Command ⌘+E

Step 2 – Lightroom Export Options

Once you have done this, you will be presented with the Lightroom Export Dialog Box:

Step 3 – Choose Export Location

The first option will be to choose your EXPORT LOCATION, if you haven’t already done so, create a folder for your exported images, and label it relevantly to the images you are exporting. This will help you later if you need to change or update images. 

Step 4 – Naming Image Files Correctly

The second option will be to choose some FILE NAMING options. Choosing the right name for your image files will help with SEO. Remember search bots can only read text (currently) and file names can be a way for them to understand the image and it will help you rank for specific keywords. If you don’t choose a proper naming convention for your images you’ll end up with strange image file names that make things difficult for crawling bots to understand, or have errors when uploading images. 

Check the “rename to” option, and then choose “Custom Name – Sequence” then insert the text description for this series of images, and start the number from 1, and finally keep the text as all lower case. 

Some standard file naming conversions are to use only letters, numbers, underscores, and hyphens in file names, as other characters may cause unexpected behavior on the web.

Step 5 – File Settings

Now let’s choose some FILE SETTINGS. Here you’ll have 4 options.

1. Image format – Most fo the time you’ll use JPEG / PNG for images with transparent backgrounds like logos and GIFs. GIFS can be great for displaying short actions or fun animations, just be wary they are usually large files, so use them sparingly. All other formats aren’t useful for web.
2. Color Space – Always choose sRGB when saving for the web.
3. Quality – choose a quality level between 60-80% the average eye will never tell the difference, but you will see a great reduction in file size, great when uploading to the web
4. Alternatively you could select the option for Limit File Size To.This will let you choose a max file size, and Lightroom will export the images with this as a maximum file size. Just be wary, this means it chooses the quality level when exporting, and some images may not be as crisp as expected.

Step 6 – Choosing Image Size Settings

Next we will want to choose the IMAGE SIZING options. 

1. Check the box “Resize to Fit”
2. Select the option “Width & Height”
3. In the box W (width) specify the pixel value
4. In the box H (height) leave it blank so it is automatic
5. For galleries do the opposite, leave W (width) blank so it’s automatic, and choose a H (height) value.

Quick Image Sizing Recommendations

• Blog Posts – Width – 1500px / Height – Auto
• Gallery Posts – Width – Auto / Height – 1500px
• Slideshows and Full Width Blocks – Width – 2880px / Height – 1500px

TIP! – Export Slideshow images individually and choose the crop of the image to fit the exact sizing 2880 x 1500, it’s almost 1.92:1 or 2:1 to be exact. Also choose images that focus the content in the center, don’t use images with peoples heads right at the top, and feet right at the bottom, unless you’re comfortable with cropping them off when uploaded to the web.

A Note on Image Cropping

Not all screens have the same format. Actually, very rarely do any screens have the same format as your images (most commonly 4:3 and 3:2 for photographers). This means for “full screen” slideshows and blocks your images will be cropped. Do yourself a favor and choose the crop yourself to get the most out of your image when uploading to the web.

If you don’t want your images to be cropped, use a slideshow that is fixed in height like a visible nearby slider. 

Learn more about full screen images for the web here.

Step 7 – Image Sharpening

Now we will want to choose options for Output Sharpening. Select the box for “Sharpen For” and set the value to “High” 

Step 8 – Export Images

Now you can export the images. Check them to make sure they are at a suitable quality level. Next check our some further optimization tips before you upload your images to the web, you might be able to reduce your file size even further!

Further Image Optimization Tips

If you want to optimize your images further, there are a few tools that can be used to reduce the image sizing further. Just make sure to check the images after optimizing them at this point to prevent loss of quality. 
Here we can use 2 tools that can help optimize your images further, choose one and run your images through them:

1. JPEG Mini – with the JPEG Mini app you can optimize and losslessly compress your images further to reduce the file size even further. Normally this should mean no loss in quality to the images. If you have the Pro version, there is an extension for Lightroom that will do this automatically on export, a highly recommended tool for any photographer.
2. TINYPNG or TINYJPG – you can run your images through tinyjpg.com or tinypng.com and compress your images further. There are 2 limitations, you can only do 20 images at once, and the file size per images should be under 5mb (not a problem if following the instructions above)

Once you’ve done the final optimization, you’re good to upload your optimized images to the web!

In the next section, we are going to look at how you can optimize existing website images to improve your websites loading times.

How to Optimize Existing Images

In the following section we look at some options to optimize all your current sites images. This can be particularly useful if you have not been optimizing your images in the past and you’re noticing issues with loading performance on your site. We will look at plugins, services and doing it yourself via your hosting control panel. 

If you want to learn how to find large images that may be slowing down your site, go to the next section in this guide where we show you how to use built in browser developer tools to identify those images.

NOTE! We highly recommend doing a full site backup including content before optimizing any old images to prevent issues when compressing.

Optimizing Images with WordPress Plugins

Resmush.it

reSmush.it – a great FREE plugin that allows you to automatically optimize images on upload. If you have already uploaded lots of images and they haven’t been optimized you can also use the bulk optimization option available for older images.

When using the reSmush API, the plugin optimizes images for free, and it let’s you choose the optimization level for your images. It will optimize JPEG / PNG and GIF files, however it will only allow images of up to 5 MB to be optimized, not a problem as you’ll want to have optimized images before upload.

If you have images larger than this uploaded to your site, now is the time to replace them. reSmush.it is completely free and a great starter option for users who want to optimize images that have already been upload to their site.

Get reSmush.it here.

ShortPixel Image Optimizer

ShortPixel Image Optimizer – simple to install, and easy to use, ShortPixel does a great job of image optimization. You can optimize images on upload and also bulk optimize existing images. They also have a solid support team that can help with any issues. 

Once you install and activate the plugin, you will want to request an API key. The plugin will automatically start optimizing images. The plugin also saves and stores the original images in a separate folder for comparison, and it allows you to roll back to the original version if you don’t like the compression options.

In its general settings area, ShortPixel offers 3 levels of compression:

1. Lossy – the biggest reduction in file size, however you may lose some quality
2. Glossy – less reduction but better quality, a great option for photographers
3. Lossless – pixel by pixel identical images but with smaller file sizes, the least compression but best quality. 

For photographers, we suggest trying and testing Glossy or Lossless to see which works best for you. 

You can also enable image backup, and remove EXIF (camera settings) from the file. 

You can also enable the option for resize of large images, and set a max width and height. Set the maximum width to 2880px and height to 1500px. This should be more than enough for most photographers, but make sure to test this thoroughly.

To get to the bulk optimize, go to Settings > Short Pixel > Advanced, scroll to the bottom and for the section “exclude thumbnail sizes” select small, medium and medium_large:

You can also go there directly by going to Media > Bulk ShortPixel:

It will run the optimization process and your images will now be optimized. You can see how much you save per image as it is optimized. 

If you want to optimize individual images, or restore backups to original images you can do so in the media library in “list view”:

When you sign up to their API, you can compress 100 images per month for free. If you are uploading more than that (very likely as a photographer) you’ll want to sign up for one of their plans. 

There are 2 options for plans, the one time plan, and a monthly plan. 

With the one time plan you can pay for a number of image optimization credits, which you can use as you’re on the go. Great for users with large number of uploads already on their website.
With the starter monthly plan for $4.99, you can upload up to 5000 images per month and the balance of images restarts each month. If you are uploading images on a consistent basis, then it pays to take a monthly plan.

If you want to optimize existing images and only intend on uploading less than 100 new images each month, get a one time plan and then use the free monthly images. Otherwise, ShortPixel is a great plugin for image optimization that can really save on file size and improve your site performance

Sign up for ShortPixel here.

Imagify

Imagify – very similar to ShortPixel offers a plugin and API that let’s you optimize images on upload and bulk optimize existing images. Just search for the plugin in the WordPress directory, or via the plugin section when logged into your site.

Once installed you can sign up for your free account, get your API key and add it, then finally configure the plugin and choose from the 3 compression level options:

1. Normal – Lossless compression so the same pixel per pixel quality, but less compression.
2. Aggressive – Lossy compression you may notice a reduction in image quality.
3. Ultra – Lossy compression you may notice a reduction in image quality.

For photographers, it would be best to use Normal compression first. You may want to test images with Aggressive compression to really save. Test is in the settings to see if there is a noticeable difference. 

For blog posts it would be better to use Aggressive, and for galleries and slideshows where quality is important, you’ll want to use Normal.

Imagify also offers the option to optimize images on upload, the option to back up original images, and the option to keep all EXIF data (shutter speed, exposure, ISO etc).

In the optimization settings you can choose the image sizes that are optimized. We recommend using large. Also enable the option for larger images and set the max width to 2880px. 

To bulk optimize existing uploads, you’ll want to go to Media > Bulk Optimization (it would be best to use a paid plan for this as larger images won’t get compressed enough). Choose the folder you want to optimize, then optimize all of your images:

Pricing starts at $4.99 per month for 1 GB of data, approximately 10,000 images. There are also options for 1 time plans, staring at $5.99 for 500 MB of data, approximately 5,000 images.
So that’s it folks, the 3 best options for image optimization for existing images on your site.

We highly recommend using ShortPixel or Imagify for professional photographers, as the difference in speed can really help improve sites performance which is important for your business. 

Now that you know the best WordPress plugins for image optimization, we’re going to look at how you can use chrome developer tools to find what images are unoptimized making your page and posts large, so you can manually replace them.

Using Chrome Developer Tools to Find Unoptimized Images

Page size is important for site speed, and unoptimized images are one of the main reasons for large page sizes. Thus, we wanted to show you how you can inspect any page on your site to find unoptimized and large images that are affecting your site’s performance, so you can manually update then to smaller files and remove the large images. 

To do this, we will show you how to use Chrome developer tools (the process is pretty much identical for Firefox and Safari browsers) to find and optimize images in 4 easy steps.

This way you can find any images that are too large, and replace them with an optimized version to improve loading times and your site speed scores.

Check out the following video, or read on for screen shots and more.

Step 1 – Opening Chrome Developer Tools

Using Chrome Developer tools we can easily see the size of a page and the contents that your page is loading. To open the developer’s tool do the following:

1. Open Google Chrome
2. Open your website
3. Open Chrome Developer Tools

Use the keyboard shortcuts:

• Mac – Command ⌘ + Option + J 
• Windows – Ctrl + Shift + J

Or open it by using your menu bar:Mac

1. Click View.
2. Select Developer. 
3. Select Developer Tools or JavaScript Console.

Windows

1. Click the menu icon.
2. Select Tools.
3. Select Developer Tools or JavaScript Console.

Safari

Use the keyboard shortcuts: 

• Mac – Command ⌘ + Option + C

Or open it by using your menu bar:

1. Click Safari.
2. Select Preferences.
3. In the Advanced tab, check Show Develop menu in menu bar.
4. Click Develop.
5. Select Show Error Console.

Firefox

Use the keyboard shortcut:

• Mac – Command ⌘ + Shift + J
• Windows – Ctrl + Shift + J

Or open it by using your menu bar:

Mac

1. Click Tools.
2. Select Web Developer.
3. Select Browser Console.

Windows

1. Click Firefox.
2. Select Web Developer.
3. Select Browser Console.

Step 2 – Network Tab

Now that you have the developer tools area open at the bottom of your page, you’ll want to navigate to the network tab. Enable the option to “Disable Cache” this is important for checking how long your page takes to load for the first time for a user. Subsequent loads for a user tend to be faster as the site is cached via their browser, however first impressions count, so it’s best we check the site when it’s not cached.

Step 3 – Checking Page and Contents Sizing

Now you can check the total page size at the bottom, the “X.XMB transferred” section. This will give you an indication as to how large your page is. Keeping the page size under 4-5 MB is key to a fast loading site. If you are in an area with poor internet connection, the page size should be even smaller – under 2 MB. 

To see what elements are largest, click on the size filter and then review the images that are largest. You can see the images are normally JPEG / PNG and GIF file type. If you have video, it will also show here. If you notice any large images, you can double click on the name section to load it in a new tab. 

Now you’ve located the images, you can download it from your site, optimize it, and re-upload it with a different file name. If you want to re-upload the file with the same name, you must delete the old file first, and even then it can cause caching issues. When doing optimizations we prefer to choose a new file name that is SEO friendly, as most images that have been uploaded first time were not done with SEO in mind. 

Update the images, clear your cache, check the page size again, and aim for that page size of under 5 MB. If you can achieve this you are half way there to having a well optimized site. If you want to learn more about optimizing your WordPress site for speed, check out this guide.

Conclusion

So there you have it folks, image optimization is one of the most important things you as a photographer can do for your site. Preparation is key to image optimization, make sure to prepare images before you upload them to the web and this will provide you with longer term SEO and speed benefits for your site. 

Don’t worry if you haven’t optimized your images in the past, use one of the image optimization plugins to help optimize images in bulk. We recommend using Imagify or ShortPixel for this process. Also make sure to inspect your site pages with the developer tools available to you, and make sure that your page size isn’t too large due to images. If it is, reduce images as needed and try to get to the golden 5 MB page size to have optimal performance for your site. Hopefully we’ve provided you with the tools you need to start optimizing the images for your site today!

Interested in learning more about speeding up your site? Check out our speed optimization course where we teach you the fundamentals of speeding up your WordPress site.