See how to optimize your website images and increase your performance on the Internet

SEO: The name of the files that are inserted into the images is also important

When you upload an image to your website, you can add a title and some words to describe what the image represents. This text is the information search engines use to read and recognize your images.

This makes it easier for Google to understand the content of your site, increasing your chances of appearing in search results for the content presented. The name given to a certain image must be informative and as detailed as possible, that is, it must make it clear to the searcher what subject the image refers to.

Give preference to naming an image with the keyword used on the page in question, such as how-to-increase-sales-on-the-internet.jpg, when the page that contains the image refers to sales techniques in the digital market, for example.

See how it makes all the difference and can be much more enlightening, instead of simply using IMG12345.jpg. The ideal image text should maintain a balance between keywords and a true description of the image content. The name of image files can significantly influence your site’s SEO.

Alt Tag Usage

For Google, the Alt Tag is used to describe the contents of an image file, providing fundamental information about what is contained in the image. Therefore, never forget to use the Alt Tag attribute descriptively as the file name.

Pay attention to image quality before saving it

Generally, most image editors that are available on the market, allow you to save images on your desktop at different quality levels. Contrary to what some people think, saving an image with the highest quality is not always the best option and we’ll explain why.

Large images don’t necessarily need high definition and can be saved at just above average quality to reduce file size and improve your site’s loading speed.

It is important to use images that are the size really necessary for the good understanding of your customers so that the page is not heavy and loading is slow.

It is necessary for your site to display scaled images, that is, edit the images so that they are the correct size that you want to embed on the website, and not using the resize attributes by the code. Google also indicates that specifying the width and height dimensions of all images on the site allows for faster page rendering.

When we save an excessive amount of images in high definition the loading of the website can be compromised leading to a slowdown or even crash.  The best option is to assess the real need for this feature before saving the intended image.

Tips : There are free online image editing tools like Pixlr . And for image optimization, Google Page Speed can offer good tips on how to optimize the page in terms of images.

Test your page in text version

Testing your site’s pages in the text version is essential for you to assess if everything is right with the contents, as Google itself recommends that you test your content using a text-only browser.

It is important not to abuse keywords as this can cause the site to be considered a source of spam. For this reason, by testing your site in this way, it is possible to have a “prediction” on this item.

The image must be consistent with the content of the page

In addition to the name given to the image file, providing a good context for your image within the page it is embedded in allows searchers to easily identify more information about the image and the landing page.

Among best practices, including captions or titles whenever possible allows for greater understanding by the user and makes images that are close to the text relevant to them.

CSS Sprites Utility

It is possible to combine images with CSS Sprites, which will also be evaluated by the Google tool. This technique is suitable for websites with lots of images on their pages.

CSS Sprite is a technique that uses a sprite ( a set of data that defines a certain object) to perform an “image swap”, this swap is the displacement of the image map’s position.

What this technique allows is that several images are used in one, thus saving on the number of requests on the server and the number of images used. Using CSS Sprites is relatively simple, but not all of them use it, and for it to be used properly, just unify all the images on the page into a single new image.

We can take the following situation as an example: let’s say that if you want to merge all the buttons of a menu into a single image if each image of this menu were loaded separately, we would have six requests in total if the unification were performed in a single image, the size consequently it would fall.

Just imagine the same situation for 10 more images used on a single page, how many requests on the server would be needed. And don’t think that it takes work to be able to use CSS Sprites, because the HTML code you’ll need to use for the example is really very simple, it uses a list menu where the unified image will be placed.

The images on your website must be authentic

Just like the content, the images on the website should not be replicated from another website or webpage as Google places a lot of importance on the relevance of the image and the users too.

If your website is created or supplied using “copy and paste”, your internet positioning will likely suffer. So, be authentic, instead of copying images from other sites, just get inspired by it and create your own.

Another option is to buy images from Shutterstock, an image bank that has a huge amount of both image and video files, free of charge. Here, you can buy images on demand or subscribing to a plan with the number of monthly downloads you’ll need.

Leave a Comment