The Importance of Optimizing Your Image Sizes for SEO

“SEO” stands for Search Engine Optimization and is used to describe both content & technical changes on a website done to boost rankings on Google. We all know the old joke of “The best place to hide a dead body is on page two of Google.” But, there is some truth to this. A survey conducted by Moz last April found that only 7% of searchers actually click to page two, three, or, dare I say, four of search results. As such, you want your website to not only be listed on page one but also be one of the first results people see!

Just a quick note: If you are eager to learn more about SEO (for free!), I recommend Moz’s Beginner’s Guide to SEO. This online course was how I first learned all about SEO and the ins and outs that flood the marketing industry.

Okay, getting back to the post, it is commonly known in the digital marketing industry that Google has around 200 ranking factors. Of course, they do not tell us all 200. Luckily, over the years we have been able to figure out things that help boost rankings, all of which are common parts of any SEO strategy. These include:

1. Publishing relevant content on your website
2. Creating new content on a consistent basis
3. Having title tags and meta descriptions for each page
4. Ensuring the mobile version of your website works flawlessly
5. Improving the speed of your website (i.e., page load time)
6. Adding links on your pages to other parts of your site (i.e., internal links)
7. Receiving links to your site from other websites (i.e., external/inbound links)

These are typically the first areas companies tackle to optimize their websites to rank better on Google. There are many others, however! In this blog, we are going to take a look at one factor of page speed: images. While adding images and other multimedia is important to engage your users, it is easy to slip up and cause more harm than good.

Stock Photos Are Great…Until They Are Not

We are all familiar with copyright law and we have learned by now that it is not okay to take a photo randomly from Google Images and place it on your site. Many companies have subscriptions to platforms like iStock. However, these stock photo subscriptions can be quite expensive! Luckily, there are plenty of free options online. My favorite is Unsplash, but Pexels is another common choice.

When we find a stock photo that we love, we can be tempted to click the download button and instantly plop it onto our webpage. Did you ever notice, however, that the image that downloads is often thousands of pixels (px) in size and can be upwards of 10+ megabytes (MB)? So, if you have a spot on your website that is 1000x800px, why do you need an image that is 4000x3200px? Short answer: you do not!

If thinking in pixels is a tad difficult, think about this with a normal photo frame in your home. Imagine in your living room you have a frame that can hold a typical 5×7 photo. You would not go and print off a 12×18 photo! It would be too large. With any photo that goes on your site, it is best to know what space the photo will actually fill, to start.

There are a few different ways you can do this. Those who are more tech-savvy can use the Inspect Element feature in their web browser to see what size an image will be in a given spot. I have found through the years, though, that a simple rule of thumb can apply in most cases:

• 2000px wide, at most, for a hero or header image
• 1000px wide, at most, for any other image on your page

Large Images Can Slow Down Your Site

We have all had that moment when we click a Google search result or type a URL into the address bar where the page loads…keeps loading…still loads…and continues to load. It feels like we are watching the sloth DMV worker stamp a paper in Zootopia!

We get frustrated and click the back button to find another website that works. We do not think much of this when we are the user, but do you want this to happen when people go to your website? An article by Section details how nearly 10% of users will leave a website that takes more than two seconds to load. One out of ten users will bounce from a slow site, removing any chance of a conversion and hurting your rankings.

So, what can you do? It is important to remember that when a user accesses your website, their web browser has to load all of the content (viewable and unviewable) before showing the page. Web browsers have gotten much better over the years in rendering (loading) pages faster, but large image files mess with this. With any image you place on your site, it should never go above 350 kilobytes (KB) in size.

Luckily, it is simple to properly optimize your images prior to placing them on your website. Designers and marketers often use Photoshop to resize and optimize images, but for business owners in Cleveland, this is an expensive option. We will look at how to do this with both Photoshop and Canva, a free online graphic design program.

To start, decide what your final file type needs to be. When you place an image on your webpage, there are two common file types: JPG (or JPEG) and PNG. A good rule of thumb is to always export your image as a JPG unless you need it to have a transparent background (e.g., with logos). PNGs support transparent backgrounds, JPGs do not. The reason that we ought to use JPGs all other times is due to PNGs being larger files in general.

“Save for Web (Legacy)” Will Be Your New Best Friend in Photoshop

For this example, I downloaded a picture of Progressive Field from Unsplash. To begin, we can see what the current size of this image is. Clicking Image > Image Size from the menu bar shows us that this beautiful image of our Tribe is over 8000x5000px! While we are in this window, also check to make sure the resolution is set to 72 pixels per inch (PPI).

Most stock photo sites export at this resolution, which is meant for screens, but sometimes a 300ppi image will sneak in. If it is not set to 72ppi, go ahead and switch it. Also, looking at my downloads folder shows that the current file size is over 6 MB! This is huge, especially because I only need it to be 1000px wide.

To properly export this image, we can click File > Export > Save for Web (Legacy). This is a nifty tool in Photoshop that gives you the ability to resize and compress your image prior to exporting.

To start, choose the file type in the dropdown towards the top. Do not worry about using presets, just use the dropdown underneath. Then, in the bottom right portion of the window, you can type in the size you need. I replaced the 8192px with 1000px. If you leave that little lock symbol active, then when you type 1000px it automatically changes the other size to keep the original proportion!

You also can use the quality slider to adjust how the image looks. The default is 60%. The lower this number is, the higher the chance your photo will be grainy. I have found keeping it at the default is good, especially because we will compress further after this step. Once you do this, go ahead and click save. The next section applies to Canva, so you can skip it to get to the final step!

Canva Is a Great Free Tool

I have said before that I taught myself graphic design using Canva, before having the money to afford Adobe’s suite of programs. As such, I have figured out tricks here and there to optimize your image properly. The biggest difference between Canva and Photoshop is that you must know what size you need prior to adding your image. The free version of Canva does not allow you to resize your document after creation.

I created a canvas that is 1000x667px as that is roughly the final size I need. If you do not know the exact proportion of your image, have a 3:2 ratio. So, for 1000px I would make the other dimension 667px. For 1500px, I would make the other dimension 1000px, and so on. Once the document opens, I can add a grid from the elements menu. Then, upon uploading an image into the uploads pane, I can drag it into the grid, having it automatically fill it. Once that is done, click the download button and export as a JPG; the free version of Canva does not allow you to export a PNG with a transparent background, so there is no need to use PNG as the file type.

The Final Step Is to Say “Hi” to the Panda

There are so many free tools online — some amazing, some not. One of my favorites is TinyPNG, which is an image compression site that greatly reduces image file sizes without ruining image quality. When I add an image, it is common for over 50% of the image file size to be wiped away!

Side note: the panda on TinyPNG’s website is absolutely adorable.

When you go to TinyPNG, upload your exported image from either Photoshop or Canva. Then, once it is done compressing, download the new file and add that to your site. That is it!

Having large images on your site wreaks havoc on your user experience and search engine rankings. Take the time to properly optimize your images prior to uploading. Your page speed and conversion rate will thank you!