Optimizing Images for your Website

optimizing images

Why should you optimize images? The top 3 reasons are improved speed, improved website experience, and improved relevance.

  1. SPEED: Large images will slow down a website, people have short attention spans and will not wait for a slow website.
  2. USER EXPERIENCE & GOOGLE RANKING: Google wants to provide great search results to its searchers and a website that is slow to load is not a great experience, hence slow websites are ranked lower.
  3. RELEVANCE: A fast website with imagery that is relevant to the website is ideal – relevance has more to do with the naming of the file because the search engines are reading the file name and not looking at the pictures, however, image technology is advancing rapidly

What does “optimizing images” mean in SEO?

The optimal images on a website should be relevant and sized appropriately. Sounds obvious but most websites get this wrong in one or more ways.

TIP: Finding Images – NEVER do a Google search and download an image. There are probably copyright protections. It is very easy for people to find out who is using their copyright protected images – just go to google.com and click on the CAMERA image in the upper right, then

Here are some steps to optimizing images for your website:

1 – Change the image file name.

Try to include a keyword in the name that is relevant to the page. A good rule of thumb is: if you are looking for images for your ABOUT page, the images on that page should be named to describe the company, staff, certifications, … anything referenced on that page.

For example: if you download a free, royalty-free image called xjp-14328q-pixabay.jpg you might want to rename the photo Newark-location-xjp14328qpixabay.jpg. I usually make the first words in the image relevant to the topic and the reminder an identifier of where I got the image (i.e. if it was from a stock image site).

2 – Cropping Images

Cropping isn’t really an SEO thing, but it could be the first step in resizing your image. Also, if you tend to use a free, royalty-free website such as pixabay.com, pexel.com unsplash.com you might see a lot of websites with the same exact image, a little cropping can go a long way in making your site more interesting and unique.

Most computers and laptops have a built-in image cropper. On a MAC, I click on an image (jpg, png, tiff) to open it in PREVIEW mode. Then I use the cursor to select a portion of the image and click the TOOLS tab, and then CROP.

3 – Resize Your Images

Many images from your phone, camera or a stock website such as shutterstock.com have “large” images that will look good on a website, a flyer, on social media, a book cover, or even a billboard. Website digital images do NOT have to be that large to look good.

File Size

The size of your image files is usually displayed in kilobytes (KB) or megabytes (MB). Without getting into data storage sizing it suffices to say that you the optimal image sizes for a website are usually in the lower kilobytes (KB) whereas most cameras product image files for print that are 2+ megabyes (MB).

  • Kilobyte (KB) = a thousand bytes
  • Megabyte (MB) = a million bytes
  • Gigabyte (GB) = a billion bytes
  • Terabyte (TB) = a trillion bytes

How can you tell what size your files are? There are many different ways that you can see the image file size. Look in the directory where the file is. Look at the file size information. On a MAC, you can click on the image, click on TOOLS tab, and then ADJUST SIZE to see the kilobytes of megabyes.

File Width x Length

Photo/image sizes are usually displayed in pixels (px) or inches. An image that spans the width of your website rarely needs to be larger 1200px. A small portrait photo is usually about 350 px wide.

Websites such as canva.com became hugely popular with businesses and non-techie people that don’t know how to resize images. They’ve created a grand way to drag and drop, resize, as well as to add special effects.

A- Reduce the Width and Height

Again computers and laptops have built-in options to resize images. On a MAC, you click on the image to open it, click on the TOOLS tab, and then the ADJUST SIZE tab. To the right you can see that the image has a width of 2316 pixels and a height of 3088 pixels. To resize this you simply edit the width: to 1200px or smaller. Then click okay.

B – Converting PNG and TIFF Images

JPG image files are smaller and more efficient than PNG or TIFF. On a MAC, all you have to do is open the image by clicking on it, then click the FILE tab, and then the EXPORT tab. Select the JPG option.

C – Converting HEIC Image

HEIC files are a new type of image file format introduced by APPLE, but it is not widely compatible with other devices. Converting a HEIC image to JPG will NOT make it smaller, but will make it manageable.

3 – Reduce the Image Resolution

Many smartphones these days take photos with resolutions better than many low-end cameras. These photos are much too big for optimization and unnecessary for the web. You can compress them by changing the “resolution” from 300dpi to 72dpi.

4 – Compress the Image File

The last step of resizing is compression. There are many ways to compress an image file. An easy way for a business person to do this for their website is to use an image compression website such as tinypng.com. All you have to do is drag your image to the box area on tinypng, and it will start to compress. When it is done, click DOWNLOAD and TaDa your image is compressed!

This might sound like a lot, but once you have a process down it’s not as cumbersome. And it is much better to spend a little time upfront than to have a website loaded with gigantic images that slow your website down.

Or contact us for a monthly SEO.

Posted in SEO