Optimizing Images for Websites

Do the following questions leave you wondering what the best practice is for optimizing images for your website?

• Why is it that when I do a Google image search, my blog or web images never show up?

• Do I need to add alt attributes to my images?

• What’s the difference between JPEG, GIF and PNG? When should I use one over another?

We’ve come up with the answers to those burning questions.

Here’s how to optimize images for the web:

1. Name your images descriptively and in plain language.

2. Optimize your alt attributes carefully.

3. Choose your image dimensions wisely.

4. Reduce the file size of your images.

5. Choose the right file type.

1. Name your images descriptively and in plain language

It’s easy to forget to change the name of your image when you upload it to your site. In WordPress, especially, the default file name is assigned automatically based on what it’s called on your computer or mobile device.

When it comes to image SEO, it’s important to use relevant keywords to help your webpage rank on search engines. Creating descriptive, keyword-rich file names is crucial for image optimization. Search engines not only crawl the text on your webpage, they also crawl your image file names.

Think about how your customers search for products on your website. What naming patterns do they use when they search?

Look at your website analytics to see what keyword patterns your customers follow. Determine the most common naming patterns they use and apply that formula to your image file naming process.

If you’re not going to get that data-driven, just be sure to use relevant, helpful keywords when naming your images (i.e. try to be descriptive).

2. Optimize your alt attributes carefully

Alt attributes are the text alternative to images when a browser can’t properly render them. They’re also used for web accessibility. Even when the image is rendered, if you hover over it, you will see the alt attribute text (depending on your browser settings).

The alt attribute also adds SEO value to your website. Adding appropriate alt attributes that include relevant keywords to the images on your website can help you rank better in the search engines. As a matter of fact, using alt attributes is probably the best way for your images to show up in Google image and web search.

Here’s an example of how to add or edit your alt attributes in WordPress:

Alt Text

WordPress allows you to add alt text to your images when you upload them using the built-in media uploader. You can also add alt text to an image by visiting Media » Library and then click on the Edit link below the image.

The key here is to add descriptions to your base alt attribute so that potential searchers land on your website. If you do the extra work, Google will reward you with searchers.

3. Choose your image dimensions wisely

A word of caution on providing larger images. You might want to provide larger views for your visitors, which can make for a great user experience, but be careful.

Whatever you do, don’t place the largest image on your webpage and simply shrink the dimensions via the source code. This will increase your page load time because of the larger file size associated with the image.

Instead, make it a smaller image and provide the option to view a larger image in a pop-up or on a separate webpage.

4. Reduce the file size of your images

Consider this:

• Nearly 50% of consumers won’t even wait 3 seconds for a website to load.

• Globally, the average page load time is actually increasing.

• Amazon found that if their pages were to slow down by just one second, they would lose $1.6 billion a year.

• Google uses page load time as a ranking factor in their algorithm.

So, if you have images that slowly “drool” down the screen and take over 15 seconds to load? Well, you can kiss that prospective customer goodbye!

How large should image files be?

For web images, a good rule of thumb is to try to keep your image file size below 70 kb.

5. Choose the right file type

There are three common file types that are used to post images to the web: JPEG, GIF, and PNG.

There are three universally supported image formats: GIF, PNG, and JPEG. In addition to these formats, some browsers also support newer formats such as WebP and JPEG XR, which offer better overall compression and more features. So, which format should you use?

Image Source: Google

Do you need animation? If so, GIF is the only universal choice.

GIF limits the color palette to at most 256 colors, which makes it a poor choice for most images. Further, PNG-8 delivers better compression for images with a small palette. As a result, GIF is the right answer only when animation is required.

Do you need to preserve fine detail with the highest resolution? Use PNG.

PNG does not apply any lossy compression algorithms beyond the choice of the size of the color palette. As a result, it will produce the highest quality image, but at a cost of significantly higher filesize than other formats. Use judiciously.

Are you optimizing a photo, screenshot, or a similar image asset? Use JPEG.

JPEG uses a combination of lossy and lossless optimization to reduce filesize of the image asset. Try several JPEG quality levels to find the best quality vs. filesize tradeoff for your asset.

Final Thoughts

If you want to improve the user experience and increase your site visitors, it is very important you optimize your images with these tips in mind. Not only will your site visitors be happier, but you will also dramatically improve SEO which is great for your brand’s visibility and accessibility.

At Apis Productions, we will ensure that your all your pages and media load quickly, keep your site secure and stable, ultimately improving the user experience.