How to Optimize Images for Your Website

by Jan 7, 2021

If you have a blog or even an ecommerce store images will probably be a big component of your website. You want to impress visitors with high-quality pictures of your products or even food recipes, but you also want to avoid slowing down your website with image files that are way too big.

Following best practices when uploading image files to your website can help prevent slow page loading times and negative search rankings. In this blog post I’ll go over how to process images so that they’re optimized for your website.

Resize images before uploading them to your website

For the most part when we talk about optimizing image files we’re talking about reducing their file size while retaining as much quality as possible.

Large image files can significantly slow down your website which results not only in a poor user experience, but also in poor search rankings.

Before uploading images to your blog you’ll want to compress them using programs like Photoshop, Pixelmator, Image Compressor from Website Planet, or ImageOptim.

images optimized with imageoptim

Making sure the “total weight” of the pages the browser is rendering are staying under 1.5MB to 2MB is a good way to gauge how best to resize the images a particular URL will load.

You can use tools like GTMetrix to see the total page size of your URL’s and identify any images that could be reduced.

gtmetrix total page size

Compress images using plugins

In addition to optimizing images before they’re uploaded to your website, you can add another layer of optimization using plugins.

Plugins can automate the process of optimizing images at the point of uploading them, including images that are already part of your media library.

However these plugins shouldn’t replace the work of resizing images before uploading them to your website.

You can use any of the following plugins with your WordPress website to automate image optimization at the point of upload.

Don’t ignore alt tags

Alt tags, also known as “Alternative text”, are HTML attributes applied to image tags as a text alternative for search engines so they can provide accurate image search results.

Applying alt tags to images such as product photos can positively impact a food blog’s search engine rankings. It also makes your website more accessible, which is a huge plus to users who depend on screen readers to surf the web.

image with alternative text

Best practices are to use the keyword and its derivatives for the keyword that the URL is trying to target. Avoid keyword stuffing and try to keep the text short, but descriptive.

Don’t use the same alt tag for multiple images. Each image on the page should have an explicit purpose and thus a different alt tag.

In conclusion

Following some best practices for the images you upload to your website is often seen as a quick SEO win. It doesn’t take a lot of time to do, and yields immediate results by keeping your page size small, and thus its loading times, within an acceptable range.

If you’re interested in getting started on creating a blog you can go here to learn how to install WordPress with Bluehost. You can also click here to follow my guide on how to start a food blog.

About Me

Hi! My name is Orlando. I help stressed out small business owners launch their websites with confidence by building a website that can help them grow their business online because your company’s website isn’t overhead, it’s an asset.

Must Read

how to start a food blog

Web Hosting

Build With Divi

Divi WordPress Theme

Speed Up Wordpress

WP Rocket - WordPress Caching Plugin

Is your website underperforming?

Use my website optimizations checklist to assess if your website has the essential elements it needs to optimize the user experience so it can generate new leads and sell more.

Success! Check your email to download the guide.