How to Optimize Photos on Your Website

A picture is worth a thousand words, right? Yes. But it won’t be worth anything if people aren’t able to see those picture. What’s the use of a picture if it’s never seen by anyone else? It is incredibly important for your audience to view the pictures that you have on your website. Especially if you are in an industry like landscape design, kitchen design, etc.

These are the niches where people make final purchase decisions based on the pictures they see.

But even if you are not in such a niche, you still use images on your website. Maybe you have an informational blog, and you use images to make your content much more interesting and engaging. Maybe you are using an infographic to explain a topic in detail.

The average size of a web page was 600-700K just a few years ago. And now that size has jumped over to 2MB.

That is a huge jump.

The main reason for that jump is because people are now using multiple images on their web pages. And in most cases, these images are not fully optimized. This results in their pages being heavy that takes a lot of time to load.

But I don’t blame you if this hasn’t crossed your mind. Most of us focus on the fun aspects of a website, like writing that amazing new blog post, or networking with other people in our niche.

This thought has never crossed your mind especially if you live anywhere in the Western world with a high-speed internet connection.

But you have to remember, not all your visitors have a reliable, high-speed internet connection. And if your web page is heavy and takes a lot of time to load, chances are that you won’t rank very high on Google as well.

Why Should You Optimize Images?

Let’s be honest, I know that you put your heart and soul into creating amazing pieces of content on your website. And on top of the hours, you spend in the content creation, you spend another couple of hours promoting that blog post with other bloggers and on social media.

You want people to enjoy your content and the last thing you would want is for them to abandon your website because it was just taking too long to load.

There are a ton of studies that show that if your website takes more than 3 seconds to load, you’ll lose more than 40% of your visitors.

I know 3 seconds doesn’t seem like a long time. But when you are browsing on your smartphone on a mobile internet connection, even a second can seem like a long time. I’m sure you have had the same feeling as well.

And since half of your visitors will be browsing your website on a slower internet connection, it makes sense to optimize your website for them and make sure that their user experience is top notch.

That optimization starts with optimizing your images because they take up the most space on your hosting account.

So how can you tell if your website is slow?

Well, we have a handy tool available right at our fingertips called the Google PageSpeed Insights.

How to Optimize Photos for the Web

These are some of the best practices that you should follow to optimize all of your images for the internet.

1. Naming and describing your images

I know it doesn’t make sense to name and describe an image.

But if you want your images to show up on Google, you want to start renaming your images and improve your rankings.

And the first step toward doing that is having a file name that includes your target keywords and also describes the image. It is true that search engines cannot see the image, but they can read the file name of your image.

Let’s take this image for instance.

We could use the generic name that your camera might’ve assigned to the image. Something like DCI001089.jpg. But, it would be much better if the file name was something along the lines of Ford-Mustang-Red.jpg.

Here you are thinking about the keywords your customers are using to search for products on Google.

You can use Google’s Keyword Planner for this. Or you can also use your own website’s analytics data to see through which keywords your customers are visiting your website. Find out the most common keywords they use and start using them in your image file names.

If you do not have enough data to decide which keyword to use, a good rule of thumb is to just be relevant. Although I would highly recommend doing a little bit of keyword research because that’s always good.

2. Optimizing the ALT attributes

Alt attributes is the text alternative to images when a browser cannot load/render an image. This alt attribute adds additional SEO value to your website.

When you are using relevant keywords in these attributes, they can help your website rank better in search engines. This is because they give the search engines a complete picture of what that particular web page is about.

And if you have an e-commerce website, this is probably the best way to make sure that your products show up in the Google image search.

Now that you are looking to add alt attributes on all the images on your website, here are a couple rules that you should follow:

• Make sure that you are describing your image in plain language. Just like we did in the image file names.
• If you sell products that have serial number or model numbers, make sure that you are using them in your alt attributes.
• NEVER stuff the alt attributes with keywords.

Lastly, always double check the changes that you are making to ensure that the changes are actually happening. This will also let you know what you missed. So once you are done adding the alt attributes, view the source code of your web page to see if all the alt attributes are filled out exactly as you wanted them to.

3. Choose appropriate image dimensions

It is common for people to upload multiple images with different angles of a product. And going back to our Mustang example, you wouldn’t just upload one photo of the car and try to sell it.

In order to have higher chances of getting a great deal, you would upload multiple images that showcase the interior, the rear, the rims, the engine, etc.

And again, you should take advantage of the alt attributes here as well. You can create unique attributes based on the angle of the image.

Some examples of the alt attributes for different angles would look like:

• <img src=”Ford-Mustang-Red-Leather-Interior.jpg” alt=” Ford-Mustang-Red-Leather-Interior.jpg”>
• <img src=”Ford-Mustang-Red-Rims.jpg” alt=” Ford-Mustang-Red-Rims.jpg”>

But always be careful when providing larger images.

Don’t get me wrong, it is always a good thing to provide a larger image if you think the customer would want it, but you do not want the entire page to slow down just because of that. That would be counterintuitive.

A better way of providing a larger image would be to make it a smaller image and then give an option to view a large image that would open up in a pop-up on a separate webpage.

4. Reducing the file size of your images

As I mentioned above, more than 40% of the people abandon a website if it takes more than 3 seconds to load. And the most important thing is that Google also uses the page load time as a ranking factor in their algorithm.

So even if you absolutely have to have multiple images on your webpage, you want to make sure that it is as snappy as possible.

To increase the page load speed, you want to reduce the file size of your images.

If you’re using Adobe Photoshop for your images, you can use the “Save for Web” option. This is a nifty option that will adjust the size of the image to the lowest size possible while maintaining the image quality.

You can also decide the lowest image quality that you would are willing to have.

Optimizing Images Without Photoshop

If you do not have Adobe Photoshop, no worries. There are a ton of tools online that you can use to edit your images. And if you only trust Adobe, there’s good news for you. They have a free image editing application for smartphones and tablets called Photoshop Express.

I’ll admit that this doesn’t do everything that the desktop version of Photoshop does, but if you are only looking to reduce the size of your images then Photoshop Express should be good enough.

But Adobe isn’t the only player on the block. There are other image editing tools that you can use as well.

Tools like PicMonkey, PIXLR, and Canva are some of the most loved image editing tools of the internet.

And finally, if you’re looking for an all out image editing software like Photoshop but you don’t want to spend any money, you can always use GIMP.

GIMP is an open-source, free image editing software that can be run on all major operating systems like Windows, Mac, and Linux. It has all the functionalities that Adobe Photoshop has but it is a bit clunky.

But when you’re getting an amazing software for free, you can’t really complain.

So what should be the size of your image files?

You should follow the 70kb rule. Try to keep all of your images at or below 70kb. If you have larger images, it is okay to go above 70kb but they should still be under 180kb.

5. Choosing the right image file type

There are 3 common file types that are used all over the internet for almost all the images: JPEG, GIF, and PNG.

JPEG or JPG images is a file type that is so old that it has become of the standard image formats on the internet. The main reason for that is because JPEG images can be compressed while being able to retain reasonable image quality.

GIF or.gif images usually are of the lower quality than JPEG images. GIF images are usually used for simple images such as icons and decorative images. And since they also support animation, they make a great way for people to share amazing memes.

When it comes to image optimization, GIFs are perfect for images that do not use a lot of colors.

PNG images are gaining popularity amongst heavy internet users. PNG is also a great alternative to GIFs because they can support a lot more colors and they also don’t degrade over time with re-saves, which is the case with JPEGs.

Although PNGs are starting to be used on a large scale, their file sizes are much larger than JPEG images. In some cases, its file size can be 3x larger than JPEGs.

So if you are confused which file type to use on your website, here are a couple rules that you can follow to make it easier:

• If you have an ecommerce store, JPEGs are still your best bet. They will have the best quality at a lower file size.
• Have large product images? NEVER use GIFs.
• PNGs are great if you want to get onboard the internet evolution train. But only do that if you can get the photos in PNG format. If you don’t, make sure that you are using PNG-8.

That short list of rules should help you remember which images formats to use. And any image editing software can save images to any of the file formats I just mentioned above.

6. Start using image sitemaps

If your website uses Javascript galleries, image pop-ups or anything else to improve the overall user experience, using image sitemaps with help those images get noticed by Google.

As I mentioned above in the alt attributes point, search engines cannot see images. They can read the text. And if you aren’t specifically mentioning your images in the source code of your webpage, then the search engine crawlers wouldn’t be able to crawl those images.

It is best to include the location of all of your images in the image sitemap.

If you truly want to take advantage of the image ranking section, make sure that you skim through Google’s image publishing guidelines.

I should mention that using image sitemaps alone won’t guarantee that all of your images will now start appearing on the top for their target keywords. But it certainly increases your chances towards that.

And before you start creating the image sitemap and submitting it in the Google Search Console, make sure that all the necessary information is already added on all the images. This includes all the tags, appropriate file names, etc.

7. Use CDNs (Content Delivery Networks) with caution

I know it seems very convenient to host all of your images on content delivery networks and have an incredible page load speed, but that comes with a drawback.

And this might be the biggest drawback.

Backlinks.

As you might already know that backlinks are one of the major ranking factors. And so, the more high quality backlinks you have, the higher your website will rank in the search engines.

But since you will be hosting all of your images on a CDN, you will effectively be removing them from your website. This means that now all of the images are hosted on the CDNs domains. This means that whenever someone links to those images, they are essentially linking to the CDNs domain and not yours.

The best way to decide if a CDN would be the best option for you right now is this:

• If your website is currently doing thousands of dollars in revenue every month, then having a CDN is probably a great idea. Because that will help you get through the bandwidth issues you might be facing.
• If your website is only getting a couple thousand visitors every day, then it is best that you host all of your images on your server.

Also, never follow anything just because it is trendy. Run through the scenarios and see if it will be the best move for your business. And then make the decision.

Conclusion

Remember, at least half of your visitors will be browsing your website from mobile connections. And having a slow page load speed can drastically affect your rankings in search engines.

Developing a habit of always optimizing your images before uploading them will save you a ton of headache in the future of optimizing all the images at once.

Lastly, pay attention to the dimensions of your images and also whether or not it is absolutely necessary to include a large image. If you think your customer/audience can make do without a large image, then don’t upload it.