Images

In HTML, images are defined with the <img> tag which contains 2 attributes: “src” – source and “alt” – alternative text.


An example of the image tag

The “src” (source) attribute defines the URL or, in other words, a web address of the image.

The “alt” (alternative text) attribute specifies an alternate text for the image, if it cannot be displayed. In other words, the “alt” attribute describes the image in words.

“Note, images are not technically inserted into an HTML page; images are linked to HTML pages. The <img> tag creates a holding space for the referenced image.”1

Below, you can see how an image can look on the webpage and in its source code.

An example of how an image can look on the page and in its source code


Images make any webpage more vivid and help to understand the page’s content as illustrate the author’s thoughts. But, if you add an image to your page, you should organize your image for SEO.

Some recommendations for optimizing your images:

Store images in the specialized directory.

It is easier for search engines to find the paths to images if they are stored in one directory.

An example of the image directory


Manage your images using commonly supported file formats.

There are two major image types: vector2 and raster3.


An example of the image formats


“Vector graphics use lines, points, and polygons to represent an image. Raster graphics represent an image by encoding the individual values of each pixel within a rectangular grid.”4

“Vector formats are zoom and resolution-independent”4; they are ideal for logos, icons and other images that consist of simple geometric forms and graphics that frequently require resizing and need to be displayed at varying sizes. However, vector formats are not good for the complicated images such as photos. In this case, the raster image formats should be used. So, “raster images should be used for complex scenes with lots of irregular shapes and details”4

The common used and supported by most browsers raster image formats are: JPEG, GIF, and PNG.

“Differences in image formats are due to the difference in how and which lossy and lossless algorithms are used to optimize the image.”4

The best use for JPEG is the photographs on your website. The best use for GIF is simple web graphics such as buttons, icons, and charts. The best use for PNG is logos, icons and other images for which a transparent background is preferred.

Select the right image format.

Different image formats support different features.

An example of the image formats supported features


There is no single best format for all images; “each format has its own set of pros and cons”4. To be sure which file format is the best for your image, save your image in more than one format, compare the size and quality and choose an optimal variant that will allow you to deliver the best experience to your users.

Choose the suitable image physical size.

The image physical size gives information about how much "space" the image will occupy on the web page. The width and height of the image measured in pixels is named the pixel dimensions. The bigger the physical size is, the larger its file size. Moreover, in the case user’s screen has the display size smaller than your image’s "natural" size, after downloading the image will be downscaled to the display size. Certainly, you can’t ensure that every image will be delivered at the exact display size; however, you should reduce the number of unnecessary pixels to the minimum, especially, for large images.

Reduce unnecessary pixels.

The number of pixels in an image is determined by its resolution5. Resolution is measured in pixels per inch (ppi). The more pixels are per inch, the greater the resolution. In its turn, the image resolution dictates the image's quality; the higher the resolution, the larger the file size. Be sure that you don’t use more pixels than it is needed to display the image at its intended size in the browser. Choose the right image resolution for optimizing the total number of pixels.

Lower the image file size.

The image file size is proportional to the pixel dimensions of the image as is the number of bytes used to encode all pixels.

The fewer bytes a browser has to download, the faster it can download and render content on the screen. Image’s file size dictates the time the image takes to load. The larger the image’s file size, the longer it takes to load. Usually, users don't have the patience to wait for a long time through the web page loads. You need to reduce each your image’s file size for faster loading. Therefore, you have to make a compromise between your image’s quality and its file size.

Add images that reflect the topic of the page.

Images should have illustrative purposes within your page and emphasize your page's topic; therefore, you should place on your webpage images that have the same subject as your webpage or article.

Place your image at the related textual content.

Your images should not be stuffed somewhere on your page. Make sure that each your image is relevant to content at/in/near which the image placed.

Choose the right file name.

A right image file name is very important for SEO. From the image’s file name, Google will know what the current image is about. For example, if you are writing about the image formats and are going to add a relevant image, use for your image a name “image-formats.jpg” and don’t use names, such as “if6278.jpg”, that will not tell search engines what the current image is about.

It is recommended to have the extension of your filename matches with the file type.

Avoid: 

  • using generic filenames such as "image1.jpg" or "picture1.gif" as they don’t give search engines any information about your images.
  • writing lengthy file names

Include keywords to your file name and alt text.

The file name is a location to place your keyword. Place the main subject of the image at the beginning of the file name. Remember that an image related to the text, ranks better for the keyword it is optimized for.

Avoid stuffing keywords into alt text

Use brief, but descriptive alt text.

The alternative text describes what is depicted on the current image. Optimizing your alt text makes it easier to understand your images for both users and search engines. Always add an alternative text to your image tag.

Avoid: 

  • writing extremely lengthy alt text 
  • copying and pasting entire sentences

Eliminate unnecessary images.

Certainly, a right selected and well-placed image can give more information than a thousand words. But, be sure that each your particular image is required to achieve a wishful effect. Images often require a large number of bytes; therefore, you should remove unnecessary images from your website.

Supply information about images to your sitemap.

This will provide Googlebot with more information about the images on your site. You can use a separate XML sitemap file to list your images, or you can add information about your images to your existing XML sitemap. An image sitemap structure is similar to the XML sitemap file for your webpages.

All the time when you are adding an image to your website, remember that optimization of your images can give byte savings and performance improvements for your website.

References:

1. “HTML <img> Tag” w3schools.com. 1999-2015. 30 October 2015. < http://www.w3schools.com/tags/tag_img.asp >

2. “Vector graphics” Wikipedia: The Free Encyclopedia. 27 October 2015. 29 October 2015. < https://en.wikipedia.org/wiki/Vector_graphics >

3. “Raster graphics” Wikipedia: The Free Encyclopedia. 10 October 2015. 29 October 2015. < https://en.wikipedia.org/wiki/Raster_graphics >

4. “Image Optimization” Google Developers. 29 October 2015. <  https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization?hl=en >

5. “Image resolution” Wikipedia: The Free Encyclopedia. 7 October 2015. 30 October 2015. < https://en.wikipedia.org/wiki/Image_resolution >

Back to Search Engine Optimization Strategy