Image Optimization

Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn20

One of the aspects that influence the slow load time of the website is the use of non-optimized images. In this section we will give some tips and discuss some tools related to this topic. This section is aimed particularly at those sites that do not use a CMS that allows automatic optimization. We will also see other aspects to consider regarding the image optimization.

 

Guidelines

When optimizing images for your website, you must consider the following guidelines:

– Name the images according to the theme of your website. This does not mean that all the names should use the keywords related to your website, but you should naturally associate the name with the keywords. We will look one example. Let’s say the page where we will insert images is about pools, the names that could be used (this is simply a suggestion): pools with whirlpool, garden accessories, pool maintenance, etc. We act with caution in this practice, as the over-optimization may be penalized by search engines.

– Use the “alt” tag in the images, following the same advice in the previous paragraph. Here’s an example:
<img src = “care-pools-jpg” alt = “pool maintenance” />

– Reduce the size of the images using the tools that we will see later.

– You should optimize images without impairing proper display. Optimization tools can reduce the size of the images without affecting visual appearance of the images.

– You must ensure that users see the images that correspond to their actual size. Sometimes using HTML or CSS can resize the image size, although this causes these to “appear” resized the images are being loaded in the original size which affect loading time; this involves an unnecessary increase in load time of the website.

– You must make sure to include the images in the sitemap of your website. In the “Additional resources” field, we will see additional information about this topic.

 

Instructions

There are two ways to optimize the images that are used on your website: using desktop software and using online tools. Let’s see some major tools used for this purpose.

Desktop Software

Let’s start with the most popular desktop software – Photoshop. After opening the image with this program, we will go to the following menu:

photoshop-save-for-webWe will see the following screen:

photoshop-formatWe will specify the formats (gif, png …) we want to use, and the size of the image. It is important to see the size of the image (highlighted with yellow on the left). In general, you should rarely use a size greater than the 50k.

Some free alternatives to this program are:

  • Gimp: A free and open source editor.
  • Seashore: Another free and open source editor, but in this case, for Mac computers.
  • Paint.net: An editor developed with support from Microsoft.

If you prefer to use an online tool, there are many alternatives. We have, for example, webresizer. You just have to follow the simple steps, upload the image from your computer, and the program does the rest.

online-resizer

In the following example we will see how you can reduce the image size from 32k to 17k without any loss in visual quality.

optimizedWebsites similar to this one include:

  • Pixlr: A comprehensive and free editor .
  • Picfull: Characterized by its ease of use.
  • Sumopaint: Another interesting editor, which also has a free version.

 

Additional Resources

Image optimization is very important if you want to improve the performance of your website and successfully engage the visitors. Besides attracting attention of the visitors, image optimization can affect the site load time, as well as the percentage of sales, in case you have e-commerce website. Furthermore, since large images can have negative effect on load time of your website, this will have negative impact on ranking in the search engines. Apart from SEO aspects, in terms of ranking, websites that load slowly tend to lose visitors who are impatient to wait for more than a few second for a page to load.

Besides the recommendations mentioned above, here are some tips that will additionally help you with image optimization:

Naming similar images

If you have several images to illustrate the same event, or to show different features of the same product, make sure you do not use the same name for all the images. For example, if you have several images of an apartment you are renting, you should not name them all “apartment-with-the-terrace”, but instead you should include more text, in order to specifically describe each image. Therefore, use names like “apartment-with-the-terrace-kitchen”, “apartment-with-the-terrace-living-room-view”, etc. for different images of the same apartment. The same goes for Alt text. You should add the distinctive alt text to each image.

The whole process helps you reach the users who are looking for more specific items in the search engines. In addition, descriptive and distinctive names allow search engines to index your content with more success and therefore, show it in relevant searches.

Image file types

There are many different types of images files, but the following three are the most commonly used image files types on the websites.

JPEG is a standard image type, which is great for using on the internet as it has great quality inside a relatively small format. Compression mechanisms can be used to additionally reduce the size of the image. However, the image you get after compression is not exactly the same as the original, and the outcome can be of lower quality. The major drawback of JPEG images files is that they do not support transparency.

PNG format is used increasingly more on the websites, but you have to be aware that PNG images tend to be larger files than the images in JPEG format. When it comes to compression, PNG are not affected by this process, which means that the compressed image is not of lower quality in comparison to the original image. Unlike JPEG images, PNG images support transparency option.

GIF images are of lower quality, and those are usually used for icons and decorative images. GIF image type also supports animations, which allows simple creation of image files of acceptable size. The limitation of color is typical for this image type, as 256-color palette is used in order to reduce the image size. This results in lower image quality.

Here is a video with explanations of these image types, as well as on additional image types, such as TIFF, ESP, etc. The video also features suggestions on which image type to choose for different situations.

How to Choose an Image File Format

The following Google’s guide on image optimization shows the benefits and drawback of each of these image types. This guide also provides lot of useful recommendations on image formats, size and tools, which is why we recommend it as a great additional resource in the process of image optimization. In the end of this guide, you will find an image optimization checklist, which is very useful in order to make sure that you are doing everything you can to optimize the images on your website.

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization?hl=en#selecting-the-right-image-format

Save images for the web

Saving images for the web is the option available in Photoshop, which allows you to access a set of different options that will help you optimize the images, in terms of quality, size, transparency, etc. Therefore, instead of simply saving the image, make sure you use a set of options to optimize the images while maintaining the quality of the image.

The following video shows how to use Photoshop for image optimization:

Photoshop Tutorial: Optimize Images For the Web -HD-

Image sitemap

Since images can be browsed in the image search, which functions the same way Google web search does, it is important to allow search engines to index you images in order for them to appear in the image search results.

This is done by submitting an image sitemap. You should use Google Webmaster Tools to submit the sitemap, which will allow you to add a map to list images, and to provide additional information about the images. After the map is submitted, Google will be able to index the images on your website, which will enable them to appear in the image searches, which are related to the image title.

Thumbnails

Many websites, especially e-commerce websites have a lot thumbnails, which also need to be optimized in order to avoid those having negative effect on site speed. You have to pay attention to the size of the images used in the thumbnails, as those should be small, as much as possible. This ensures that the loading of thumbnails does not interfere with the site load time.

When it comes to naming, we have to mention once again the importance of using distinctive image names. Even though several thumbnails are used for the same item, you need to provide different names, and alt text, in order to avoid duplicate text.

The following presentation shows some of the common mistakes when optimization images, as well as tips on how to fix those mistakes:

Google offers another great guide for webmasters, with some important guidelines when optimizing images. Use this link to access this Google’s guide:

https://support.google.com/webmasters/answer/114016
There is an interesting video featured in this guide, which provides details about how the image search works on Google, which is good to know in order to understand the importance of image optimization.

We will highlight the most important image tag definitions form this guide:

Tag Required Description
<image:image> Yes Encloses all information about a single image. Each URL (<loc> tag) can include up to 1,000 <image:image> tags.
<image:loc> Yes The URL of the image.In some cases, the image URL may not be on the same domain as your main site. This is fine, as long as both domains are verified in Webmaster Tools. If, for example, you use a content delivery network (CDN) to host your images, make sure that the hosting site is verified in Webmaster Tools OR that you submit your Sitemap using robots.txt. In addition, make sure that your robots.txt file doesn’t disallow the crawling of any content you want indexed.
<image:caption> Optional The caption of the image.
<image:geo_location> Optional The geographic location of the image. For example, <image:geo_location>Limerick, Ireland</image:geo_location>.
<image:title> Optional The title of the image.
<image:license> Optional A URL to the license of the image.
Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn20

1 Comment

  • swapnil

    Reply Reply February 3, 2016

    There is no article about image optimization details visible in this section

Leave A Response

* Denotes Required Field