This blog post may contain affiliate links. This means that if you click a link and make a purchase, I may make a small commission at no extra cost to you. But don't worry, I only share affiliate links to kickass products/services that I truly love. No BS. 🚫💩

We as humans love images.

How many times have you opened a blog post like “5 Best Places to Visit in Europe” and just scrolled through to see the images?

But seriously, do people ever even read posts like that??

If you’re anything like me, you probably scan the images quickly, and if something catches your eye THEN you’ll slow down to read more.

It’s obvious that having great images on our website is key to getting people’s attention…

But the problem is, without understanding a few “best practices” of including images on your website, you may be shooting yourself in the foot without even knowing it.

Everybody knows about SEO (search engine optimization).. ya know, that thing where Google rates how “good” your website is, and then decides whether you’re worthy of showing up in search results or not. Yeah, that.

Well, without optimizing your website’s images, Google’s likely giving your site the big ole “Nope!” and burying your website below the sites of other folks who DID optimize their images.

Perhaps you’re thinking “Corine, I don’t care about what Google thinks…”

To that I’d say “…but do you care about your visitors?”

Because poorly optimized images will bog down your website and make it slower than your parents’ dial-up connection. And you tell me, are you going to stick around on a website whose speed is giving you flashbacks to the early 90s?

Let me be the first to raise my hands and give a big ol’ NOOOPE!

So if you want to please Google AND your readers, it’s time to get those images optimized.

Capiche?

4 Steps to Optimizing your Website’s Images:

1. Use logical file names
2. Resize images (dimensions and file size)
3. Use keywords
4. Include Alt text

STEP 1: Use Logical File Names

Before you even think about uploading an image to your website, take a look at the file name.

Is it the default title from your camera – something like IMG_1248 ?

Yeah, we’ve gotta change that.

Instead of using the default file name, change it to something logical. Here’s a picture of my pup, Hunter. Below I’ll show you the original file name and how I renamed it for better optimization.

Original File Name: Photo Jun 24, 2:46:27 PM
Optimized File Name: Dog lying by tree on mountain

Clearly nobody coming to my website cares about the date and time at which I took this picture. What’s more useful is a description of what the pictures is, such as “Dog lying by tree on mountain”.

Keep in mind that the file name won’t be seen by your viewers, but it will be seen by Google. So using logical files names helps Google to better understand what you’re sharing, so it knows when your content is relevant to peoples’ searches.

STEP 2: Resize Images (dimensions and file size)

Are you scratching your head like “Corine, aren’t dimensions and size the same thing?”.
Nope! Let me explain.

Dimensions

Dimensions are the width and height of your image, usually denoted in pixels (px).

While you can technically resize your image to any size you want on your website, you still want to set the dimensions to the *approximate* correct values before uploading to your site. The reason for this is because large images will load a lot slower than properly dimensioned images, and slow loading is one of the criteria that can cause Google to negatively rank your website.

For best results, you want to have the longest edge of your image to be a maximum of 2500px or less.

Going back to the picture of Hunter above, here are the dimensions before and after optimization:

Original picture dimensions: 4032 x 3024px
Optimized picture dimensions: 1000 x 750px

For context, a 4032 x 3024px image is literally large enough to be displayed clearly on an 84” screen. And since I don’t know a single person on the planet with a tv that large, let alone a computer or phone (which they’re viewing this post on).. that’s just overkill. My personal preference is to change my longest dimension to 1000px, which works well across most devices.

To change the dimensions of your images you can simply go into any photo editing platform that has a “Resize” feature, then set the longest edge to be the desired number of pixels.

Pro tip: Be sure you tell the image to maintain the original aspect ratio to avoid image distortion.

I have a PC so I can simply right-click on any image, click Edit, and then resize from there. However if you don’t have this option, here are 2 great options for online image resizing.

Two websites to help resize your images:
www.iloveimg.com/resize-image
www.picresize.com – Upload your image, press Continue, then scroll to Step 2. You don’t want to “crop” in step 1, you want to go to Step 2 and select “Custom Size”. Then input your desired dimensions.

Another way to negatively affect your rank on Google is by having file sizes that are too large.

File Size

File Size is how “big” your files are, usually denoted in kilobytes (KB), or in really large images, megabytes (MB). MB are bigger than KB. You really don’t want files in the MB size!

For comparison, here’s a quick formula to show you how each of these units compares to each other:

1 MB = 1000KB
(translation: Megabytes are 1000x larger than kilobytes. So you want KB, not MB!)

The bigger your file size is, the slower it makes your website.

Now, if you only have one large image here or there, it’s not a huge deal. But if you’re consistently using large images throughout your entire website, your site speed will dramatically tank – and remember, slow speeds suck for both Google AND your visitors.

In order to keep your website running as fast as possible, you want to compress allll your images before uploading them.

Now is about the time where I’m picturing a few of you bugging your eyes out at your screen like “BUT… but… compress?? Won’t they become grainy??”

My answer: Not if you do it the right way.

The key is paying attention to “lossy” versus “lossless” compression. They’re exactly what they sound like: Lossy means you LOSE quality, while lossless compression means no image quality is lost.

For lossless compression of your images, here are some of the websites I use:

For JPEG’s
www.compressjpeg.com
www.tinyjpg.com
www.websiteplanet.com/webtools/imagecompressor

For PNG’s
www.compresspng.com
www.tinypng.com
www.websiteplanet.com/webtools/imagecompressor

All of these options use lossless compression, which means you can basically compress them as many times as you want to get them as small as it’ll allow, and they’re good to go without jeopardizing image quality. Seriously, compress the ever-living crap out of them and I promise you won’t even be able to tell.

In case you don’t believe me, or you’re ultra protective of your images, now’s a great time for me to mention that I’ve designed websites for professional photographers (where image quality is of the utmost of importance) and you couldn’t tell AT ALL, because the quality is retained perfectly! I wouldn’t use it if it wasn’t 😉.

For best results, you want to aim to have images 450KB or smaller.
In some cases, that number may not be attainable depending on the original file size, but just compress them as much as is possible.

If the file size is still ridiculously large after compression, be sure to go back and double check your image dimensions (width and height) and consider resizing your dimensions to something a bit smaller, if possible.

Let’s say you have a certain keyword you’re trying to rank for on a particular blog post or webpage, you want to make sure you’re adding that keyword into the file name, if it makes sense to do so.

For example:

If this blog post was about hiking I may have instead chosen a file name of “dog hiking mountain”

Or if the post was about the breed of dog he is, I may have chosen a file name like “australian cattle dog lying down on mountain”

In this case, the image is totally irrelevant to the content of this post 😜 (I just think he’s cute #sorrynotsorry), so I simply chose to make the file name a description of the image’s visuals.

But labeling your file names with keywords is just another way to help Google understand what you’re writing about so it can help others find you!

STEP 4: Use alt text

Let’s start with the obvious question: What is alt text?

Alt text is the “alternative text” that your website will display in place of your image, if it is unable to show the image for any reason.

This can happen for a variety of reasons, but one example could be if a visitor has a slow connection.

Your website will load the text first, and when it fails to load the images it will put the alt text so the reader can at least tell what was supposed to be there, even though they can’t see it.

Assigning alt text to your images is slightly different depending on which website platform you’re using.

With WordPress, when you upload an image there is a space to fill in your alt text. In Squarespace, your File Name will serve as your alt text. Below are images showing where you’ll assign alt text in each.

In Squarespace, your alt text will be whatever you input into the Filename field

Using alt text is really simple way to improve your ranking on Google, and to help out your visitors who may be riding the internet-speed struggle bus.

BONUS STEP: Use high-quality images

I don’t want to include this in your “optimization” steps, because you can’t really optimize an image to be high quality after the fact.

But what you CAN do is make the conscious effort to use high-quality images throughout your website, so people know you take your business seriously.

Your website and website visuals are a reflection on the quality of your business, and using dark, grainy, blurry, or just bad images does your business a MAJOR disservice.

If you don’t have any high-quality photos, don’t have an eye for photography, and hiring a pro is out of the question, consider stock photos.

Stock photos are images (paid and free options available) that you can license for use on your website, when your images might not cut it.

Below are a few websites where you can find stock photos:

https://unsplash.com/ (free)
www.pexels.com (free)
www.creativemarket.com/photos (paid)

Optimizing your images is SO, so important to keeping your website in tip-top shape. These 4 simple steps are ones that many people often overlook, and now that YOU know exactly what to do, you can start leading the crowd like the kickass biz owner that you are! 💃