Contact Us:
07002007332
CheapDeveloper
CheapDeveloper » Webmaster » Articles » How to Optimize Images for the Web

How to Optimize Images for the Web

11 December 2021, Saturday By Victoria Frolova
105
0

Introduction

There are many different aspects to consider when building a website: security, SEO, conversion, site performance, and more. Image optimization is one of the key points, so we need to dwell on it in more detail. This article will focus on optimizing images to improve performance metrics, as well as for SEO and social media.

On this page

Introduction

1. Performance improvement

2. SEO-image optimization

3. Optimizing images for social networks

Conclusion

Optimize Images for the Web

1. Performance improvement

We'll start our conversation with those image optimization techniques that improve the performance of your web resource:

1.1. Image scaling

By adapting image sizes specifically for your site, you can significantly save resources and improve site performance. Pay attention to the size of your image and the size of the block where you want to insert this image: if your image is larger than the required size, then using CSS it will still be reduced to a suitable size, but the resources spent on loading it will remain the same. Therefore, it is imperative to upload images at a suitable scale: according to research, this can save more than half of your resources!

1.2. Compressing images

According to the HTTP Archive, images represent 62% of the total weight of each page on a website. Therefore, the best optimization method is lossless compression of images. With this method of compression, the image is reduced in weight, but at the same time does not lose quality. By using this optimization method, you can reduce your resource usage by 30%.

1.3. Responsive images

The use of responsive images in design is becoming more and more popular: it allows images to be displayed at different scales depending on the resolution of the display on which the site is displayed. That being said, learning how to use responsive images in your website design is not difficult, you only need to know the html markup.

This is what the unresponsive image tag looks like:

<img src="flowers.jpg" alt="flowers" width="640" height="480">

And this is how you can add additional attributes so that the site uses different image sizes for different displays (in this case, displays with a screen width of 160, 320, 640 and 1280 pixels, respectively):

<img src="flowers.jpg" alt="flowers" width="640" srcset="flowers-160.jpg 160w, flowers-320.jpg 320w, flowers-640.jpg 640w, flowers -1280.jpg 1280w">

Do not forget that each of these images must be uploaded to the site in the correct size.

1.4. Using CDN

You can optimize the loading of images by using a CDN (Content Delivery Network). Graphics files will load much faster, which means the overall page load time will also decrease. Tests have shown that enabling a CDN can reduce load times by an average of 75 percent.

1.5. Image formats - PNG, JPEG, WebP, SVG

Finally, you can optimize the images on your site by using certain image formats. As a rule, most people use PNG or JPEG images because they provide the most optimal data compression. But there are two other formats that you should also pay attention to - these are WebP and SVG. At the moment, images in these formats are the most lightweight.

Webp

This format was developed by Google Corporation in 2010. It allows the most effective image compression: tests have shown that using WebP instead of JPEG can approximately double the page load speed and reduce its weight by more than 70%.

SVG (Scalable Vector Graphics)

This format will allow you to display vector graphics on the page. For example, it usually includes company logos. SVG images are very lightweight and can be scaled without loss of quality and without increasing their file size. In addition, they can be animated or modified using jаvascript, and compressed using GZIP.SVG.

You can insert an SVG image into your site in the same way as other images:

<img src="flowers.svg" width="50" height="50">

Tip: in some CMS (for example, in WordPress) files with this extension may be banned for security reasons. In this case, you need to use one of the plugins, for example, SVG Support or Add Full SVG Support.

Related: How images can affect positions and traffic of the website

2. SEO-image optimization

Optimizing images for search engines will increase the position of your site in the search results, as well as provide additional traffic due to the appearance of your images in search engines. There are five main ways to do this.

2.1. Image file names

When choosing names for your images, remember that they will also be available to search bots, so it is better to name illustrations based on what is written about in the article (you can also focus on keywords).

Tip: if you want to use a phrase as the name of your image - for example, “Summer Flower Arrangements”, then be sure to separate it with hyphens: “summer-flower-arrangements.jpg”, since the Google crawler considers the hyphen in the file name as a separation , space. If you use an underscore, the robot will interpret the entire phrase as one whole word.

2.2. Alt attribute

This attribute describes the image and is displayed to the user if, for some reason, the browser was unable to load the image itself. Therefore, this attribute should contain a short but capacious phrase that most accurately describes the image. Often the file name and alt attribute can be the same:

<img src=" summer-flower-arrangements.jpg" alt="summer flower arrangements">

Every image on your site should have alt text. Its presence is important both for users (for example, those who use browsers for the blind and visually impaired) and for search engines (Google determines how to rank your image and how it matches the content of the entire page based on alt-descriptions).

2.3. Title attribute

Unlike the alt attribute, title is optional, however many people advise using it for SEO image promotion. The title description is shown to the user the moment he hovers over the image, so filling in this attribute can be useful for your site visitors. The priority of the alt attribute is higher than that of the title attribute, so you shouldn't expect any high results after filling in the title, but its presence will still be useful.

2.4. Sitemap for images

The sitemap for images is designed to help search robots find all the images they need and index them; you will know for sure that your images are presented in the search results. Basically, using a sitemap is optional, but it can help you diagnose emerging problems and analyze the data in more detail.

2.5. Image indexing

To ensure that your images are indexed properly, you can use one of two appropriate methods. The first way - using a sitemap for images - was described above. And the second way is to make sure that the parameters of your server or CDN are set correctly. Search robots will look for a robots.txt file on your site: if they find it, they will follow the instructions given there, and if not, they will start crawling absolutely everything.

Below you can see an example of a standard robots.txt file - it is enough for you to know for sure that all your images can be crawled:

User-agent: *
Allow:
Disallow:

The first line (User-agent) defines which search bot this rule belongs to. If you put an asterisk (*), then the rule will apply to all robots; or you can write the name of a specific search engine - Google, Bing, etc. The second and third lines, respectively, are responsible for those sections of the site to which the robot has (allow) or does not have (disallow) access.

If you are using a CDN, you need to add the rel="canonical" (See: The "rel =" attribute: what it is and what it is for for more information)line to the HTTP header in order for the search bots to understand that the CDN content is just a copy, not duplicate material:

canonical

Related: How to optimize your site for voice search

3. Optimizing images for social networks

Optimizing social media images has a positive effect on CTR and a number of other things. In this article, we'll talk about optimizing images for Facebook and Twitter. First of all, it is extremely important to set the correct dimensions for the images.

3.1. Facebook Open Graph markup

Open Graph tags determine how content will look when it appears on Facebook. When you are about to share an article, it is the meta tags that set all the post parameters: URL, title, description, and most importantly, image. You can use many different meta tags, but the main ones are:

<meta property="og:url" content="http://www.exmpl.com/arts.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="7 Psychology Books Every Designer Should Read " />
<meta property="og:description" content="Continuous learning. That’s one thing that applies to a lot of fields, especially to the field of design." />
<meta property="og:image" content="http://www.exmpl.com /images/fb-v2.jpg" />

These meta tags can be manually added to any static site; if you are using a CMS (for example, Wordpress), then this can be done using a plugin (for example, Yoast SEO).

Recommended image size for Facebook: 1200 pixels by 630 pixels.

3.2. Twitter Cards markup

The functionality of this markup is similar to the Facebook Open Graph in that it is used to display an article announcement on Twitter. There are 4 main types of Twitter Cards:

  • Summary Card: The record consists of a title, description, thumbnail, and authorship;
  • Summary Card with Large Image: the same entry as the Summary Card, but with a large image size;
  • App Card: record with the ability to download a mobile application;
  • Player Card: recording with any media content (video, audio).

Below is the code for the Summary Card with Large Image:

<meta name="twitter:card"    content="summary_large_image" />
<meta name="twitter:description" content=" Continuous learning. That’s one thing that applies to a lot of fields, especially to the field of design." />
<meta name="twitter:title"   content="Example article" />
<meta name="twitter:site"    content="@example" />
<meta name="twitter:image"   content="https://example.com/blog/wp-content/seo-indexing-images.png" />
<meta name="twitter:creator"  content="@example" />

As in the case of Facebook Open Graph, these meta tags can be added on your own to any static site or using a plugin on the CMS.

Recommended image size for Twitter: 1024 by 512 pixels.

3.3. Google snippets

Google uses Schema.org microdata as the main source of information for its snippets, but also uses Open Graph markup (like Facebook). Therefore, if you have already configured these tags above, then you do not need to do anything else.

Conclusion

As you can see, there are many different ways to optimize images for use in virtual space. All of them are aimed at increasing the usability of your site, and therefore increasing conversion.

If you know of any other ways to optimize images, please share them in the comments.

Related: Internal link: Guide to internal linking of your site

Discuss
Add a comment
Comments (0)
Comment
Partners