If you want to learn how to optimize images for your website without losing quality then you are in the right place. In this guide I am going to go over how to improve your web performance and overall SEO rankings by optimizing your images correctly. You will learn how to properly resize your images, name them, compress them, and optimize them. This way they will load better on your website and also rank on search engines such as Google.

How to Optimize Images for Your Website

This is going to be a lengthy yet very detailed article that goes over all of the key components about web images, website settings, SEO tips, sizing, and so much more. My overall goal is to help you get the most out of this article so you can optimize your images to their full potential without losing image quality of website speeds and furthering your SEO reach.

What Does It Mean to Optimize Images

The overall goal of optimizing your images is to reduce the size of the file for better web performance without affecting the quality of the image. By doing so, you are also helping optimize your images for SEO so they can perform better on web searches on image search engines such as Google.

Why Do We Optimize Images

The reason why it is important to optimize your images is to provide excellent user experience on your website by meeting the user expectations. People that come visit your website don’t want to wait a long time for large images to load. They want to be able to open the page fairly quickly without the long wait time. That’s where image optimization comes in. By providing them a fast web performance with proper image optimization, you are providing this excellent user experience to your audience.

The Benefits of Properly Formatting and Optimizing Images

• Improves page load speeds.
• Improves overall website performance.
• Helps with SEO ranking for your website.
• Improves website user experience and expectations.
• Saves memory on your server space.
• Greatly reduces the load on your server.
• Produces high quality images in the correct size and format.

How to Optimize Images for Your Website

It is very important to optimize images for your website. This all depends on the placement of that specific image. For instance, your blog pictures will be a different size than the pictures on your homepage, header, feature image, etc. Each placement has their own size and dimensions. The image size also varies according to your website design too.

There are several ways of resizing your images but first let’s talk about what resizing your image really means.

When resizing your image you’re not only resizing the dimensions of the image but you are also resizing the file size of this image. You’re overall goal is to maintain a high quality and clear image while using a good size for loading speeds and the best overall dimensions for the placement of that image on your website.

There are three ways of resizing your images but the one I highly recommend is using Adobe Lightroom to properly scale the file size and dimensions of your image while also maintaining that high quality.

Resize Your Images in Adobe Lightroom to Scale

Resizing your images in Adobe Lightroom is fairly easy. It’s just a few quick setting changes when exporting your images so they can fit to size. Here’s what I do.

How to Change the File Size of an Image in Adobe Lightroom in File Settings

The first setting I change during export is my File Settings during export. This will help keep the size of your file optimal for website loading speeds. Here’s what to do:

1. Click the image you want to export and click “Export.”
2. Update your “Export Location” and “File Naming.” Make sure to always name your files. This helps tremendously with SEO. Choose a name that is on topic and that describes the images. I’ll go more into details about this later on in the post.
3. Go to “File Settings.”
   • Image Format: JPEG
   • Color Space: sRGB
   • Quality: Between 94-100
   • Limit File Size: (optional) If you are needing your file size to be a specific size I will click this and set the size limit. View note below about ‘Limit File Size.’
4. Now let’s adjust the dimensions settings below.

Note about ‘Limiting File Size:’ Some platforms such as Etsy will limit the file size of your images. This will also help with page speeds so if you want to keep your size under a specific number or no greater than a specific size, just input that size here. I like to keep my blog images around 500kb but is advised to use smaller at 150kb. Just play around with the quality of the image after export to see what works best for you and the overall quality of your image.

How to Resize an Image in Adobe Lightroom by Width and Height

The second setting I change during export is my width and height. Like I mentioned before, this varies according to the placement. For this example I will use my blog image size which is 1200px x 800px. I will also adjust the pixel resolution per inch. Here’s what to do:

1. Go to “Image Sizing” and check the box next to “Resize to Fit.”
2. Click on “Width and Height” and add your settings. 1200px for width and 800px for height for a landscape image or visa versa for a portrait image. To make this export process smoother you can just put “Long Edge” instead of “Width and Height” and set the long edge to 1200px. This way you can download all of your landscape and portrait images during the same export.
3. Next we are going to set the resolution to 300px per inch.
4. Now let’s adjust the “Output Sharpening” settings and change this to “Screen at High.”
5. Now you can Export your image.

** Please note that these settings are for web images only. Do NOT follow these steps for exporting images to print. Make sure you use the correct print sizes for those and the correct output sharpening.**

Using Canva to Resize Your Web Images

Now Canva is a good tool for some things but it’s not the best tool out there for images. However, you can upload your images to Canva, create a “Custom Dimensions” design, and upload your image to that design. When you download your design, make sure to save it as png or jpg for your image during the download process and to keep your images at the highest quality setting. It’s a good quick tool to use for those that don’t have a subscription for Adobe Lightroom or are not super comfortable with making edits to their pictures before exporting. However, this will not get you the best result in the end but will help out if you are just starting off.

Resize Your Images Before You Upload to Your Website

Now make sure that the images that you upload are the resized ones that you just saved. Making sure you have the right images uploaded to your website can make a huge difference. From SEO to loading speeds. It all works together to make your website run smoother.

How to Optimize Images for SEO

Ok! So we went ahead and resized your images, not it’s time you to optimize images for better SEO. Don’t worry. This overall process may seem long but once you have a routine, it’ll be quick and easy to do and will be worth it in the end.

What is SEO?

First of all, what in the world is SEO? SEO is a acronym that stands for Search Engine Optimization. This is what helps you rank in the online world. You can use your images to input keywords that Google reads in the code of your page (ex: blog post, landing pages, homepage, etc.) to better understand what that page is about. This helps Google also learn more about that image.

The Benefits of Optimized Images for SEO

There are many benefits of having optimized images for SEO.

• An optimized image will help your website load faster showing search engines that whoever reads this landing page will not sit there waiting for images to load. Fast loading images equals happy readers and visitors.
• Having an optimized image will also help Google learn more about the image, the content on that landing page and or section.
• Optimized images will also help search engines learn more about what the image is about. Is the image about a destination, a certain item or product, an animal, etc.

Optimize Image File Names

The first thing you do for SEO purposes on your images is change the image file names and image titles. You can do this directly on Adobe Lightroom during Import or Export as well as on the right hand side of your Lightroom settings page.

When changing the file name and image titles you are making it easier for search engines to know what your image is about. For instance, if you leave your image with the automated name such as IMG_1001, this doesn’t tell me anything about this image. Now if I change the image name to something relevant like for example: Wedding Flower Girl, then I know I will be looking at a picture of a little flower girl at a wedding.

Optimize Image Alt Text

Once you upload the image to your website or blog you want to add some alt text to the image. Make sure that when you are writing out an alt text that it describes the image. You can put something like, “Flower Girl posing during wedding photos.”

Make Sure Text Complements the Optimized Images

This is very important. Every page of your website and your blog is divided into sections. An outline to be more specific. Let’s use the Homepage of a website for an example:

When you visit the main url link for a website you will be directed to their homepage. In this homepage you will usually see different sections that tell you about the business and what they are about, services that they may provide, their staff, location, etc.

In each section there is a heading. Search engines view each heading as a key to know what that section is about it. It is important to use the right headings in your web page and the correct copywrite and images underneath each heading or section.

For example: Lets say that for your homepage you have an outline such as the one below. Underneath each heading you will write something related to that heading and a relevant image pertaining to that heading. Note: You don’t have to have an image for each heading/section but if you do add an image just make sure that it is relevant to the section or overall topic.

• Welcome message – no image
• About my business – image related to my business or of me working
• The owner – a portrait image of the owner
• Services provided – image of the different services that I provide (optional)
• How to purchase or book an appointment – no image, just a call to action button or contact form.
• The blog – An image relevant to my blog.
• Blog categories – an image relevant to each of the blog categories (optional)
• Reviews/Testimonials – an image of the person who wrote the testimonial with prior consent. You can also have an image of a flat lay of someone writing on a laptop or notebook paper (optional).

Looking at what Google sees

Now let’s take a look at the code side of things. I’m using the image above of my niece for reference for this example. As you can see, within the code you can find highlighted where the image is. In that highlighted section you can find the image file name, image title, and alt text. Underneath it you can find the heading and the paragraph that pertains to it as well. This is the part that search engines such as Google reads and uses to help rank your content.

How to Optimize Images for Better Web Performance

Now let’s make sure that your website settings are setup for optimized images. This is very important so that you can have the best overall web performance. Making sure to optimize images is very important but the web performance part plays an equal important role to your website as well.

Note: Please, I beg you! Before you go on to messing around with your settings, make sure to talk with your web designer or web developer first to make sure they have all of these parts of your website settings done for you already. Every website has been set up differently and some developers/designers use different plugins. Some people may even have to talk with their SEO team if they have one in place since this can sometimes fall under this team as well.

Why is Web Performance Important?

The overall performance of your website is very important. Websites with slow speeds will not just hurt your user experience but your overall SEO performance. People want to click on your website and start to read the valuable content that you have to share. They don’t want to have to wait for your images to load or other parts of your website.

To keep things running smoothly, it is best to run a good site speed checker on your site and adjust things accordingly. Images is a big one that I usually see followed by some plugins, ads, or custom html codes or java scripts. Here are a few things you can do to help your web performance when it comes to image optimization.

Turn On Lazy Load on Your Website Images for Better Website Load Speed

In your settings make sure to that your “Lazy Load” is turned on. Lazy Load means that each image will load as the person is scrolling through the page. In other words, instead of all the images loading all at once when the visitor has arrived to that landing page, it will slowly load as the visitor is scrolling meaning that it will be more user-friendly and your visitor can start using your website or reading that content faster.

Compress Images to Reduce File Size During Upload

Another great way to optimize images on your website during upload is utilizing an image compressor plugin. This is when your image is compressed to a smaller size without losing quality. A good way to look at this is when you take numerous large files on your hard drive and put them in a zip file. You are compressing all these files into a small zip file without losing their value.

Best Image Compressing Plugins for WordPress

There are many image compressing plugins out there for WordPress but I highly recommend these:

• SiteGround Optimizer – If you are using SiteGround as your host, they have a plugin that’s called SiteGround Optimizer that has the image compression setting and lazy load options.
• reSmush.it Image Optimizer – This is a free to use plugin on WordPress that is fairly small and easy to use.
• WP-Optimize – Cache, Clean, Compress – This plugin helps clear your cache, clean unnecessary files, and compress your media images.
• Smush – Lazy Load Images, Optimize & Compress Images – Another highly popular plugin on WordPress that helps you lazy load, optimize, and compress your images on your website.

Best Settings for Image Compression Without Losing Quality

It is important when you optimize images to keep in mind that the more you compress the image the more quality is lost. This is why it’s important to do the previous steps of resizing your images and saving them in an already small file size so that when compression happens during upload, its minimal and you are able to obtain as much of that image quality as possible.

The best compression setting is low at about 25% compression or obtaining about 80%-90% of the image. I feel like anything further than that and the image starts to look grainy.

Free Website Image Optimization Guide

Quick Step by Step Guide On How to Optimize Website Images

• Edit on Adobe Lightroom.
• Download at the correct image size and file size without losing quality. I went over the steps on how to do this above.
• Rename your images during export.
• Upload to your website.
• Compress your images during upload.
• Add alt text to each image.
• Make sure everything is loading correctly.

We live in a world where images bring more people to our websites. Images speak a thousand words and are truly important. Just as they are important in using them in your website, the way you optimize images is very important too. I hope that this guide has helped you get a new idea and perspective on how to properly optimize your images for your website. And don’t forget to grab my free Image Optimization Guide above!