Table of contents

    Optimizing graphics is a very important element in the SEO process of a website. Graphics are a part of a website that definitely attracts the attention of users and encourages them to make interactions. 

    However, it is not only from the users’ perspective that graphics optimization matters. Images are also taken into account and analyzed by search engine robots. 

    They are also a part of the search engine’s website.

    How should they be taken care of when positioning a website?

    seo graphics

    A-few-steps-necessary-to-optimize-graphics-on-page

    Image name

    Unfortunately, we can still find images on many sites whose name consists of random characters, e.g. “0abkcspodpwfne345.jpg”. Such a graphic name does not tell us anything and is suboptimal in terms of SEO. Indexing robots are not able to immediately determine what is in the graphic and whether it is consistent with the theme of the page. 

    That’s why the best solution is to use short, specific names, consisting of keywords and telling us what is in a given photo or graphic, e.g. “chlopiec-grający-w-pilke.jpg”. 

    Also remember not to use Polish characters, spaces and the underscore character in file names. A pause character should be used as a separator. 

    Following these rules will make it easier for indexing robots to scan your site, and will clean up graphics for your own needs on the server.

    File format

    Till now, the most popular graphic formats were JPG, PNG and SVG.

    The JPG format is the oldest and by far the most widely used format. Its compatibility with virtually every browser makes it the most versatile.

    The format’s compatibility with virtually every browser makes it the most versatile.

    The hallmark of PNG images is the ability to save an image without a background, but they take up much more space than other formats. It is worth taking this into account when choosing graphics so as not to overload the page and increase its loading time. 

    Files SVG are typically used for icons and logos on pages.

    In order to speed up the loading time of the site and ensure the best quality of the presented images, it is worth using new generation formats 

    Format WebP is an extension created and introduced by Google in 2010. It combines the features of JPG and PNG, providing high quality and a small file size that does not burden the performance of the website. 

    JPEG2000 is a complement to the JPEG format and allows for lossless compression, which means high quality images. Unfortunately, at the moment not all browsers are compatible with this format, so it’s worth checking this before creating graphics for the site.

    Graphic size

    This is the primary factor that determines the loading speed of a website. Graphics that are too large in size place a significant burden on the site and cause it to load slowly. This affects the quality of the site and the experience of users visiting the site. 

    Consumers quickly abandon purchases or obtain information from a site where the loading of graphics or other relevant elements is delayed. This increases the rejection rate and affects the purchasing decision of potential customers. This is especially important for e-commerce sites with a large number of products and graphics.

    To best optimize your site for this, you should adjust the size of your graphics to appropriate standards without sacrificing high quality. 

    This can be achieved through lossless compression in applications or tools dedicated to this.

    Attributes alt and title

    Alternate text for graphics that we include in the HTML code of a page is extremely important, especially from the point of view of search engine robots. It is also applicable to sites that load graphics with a delay or blind people using screen readers, and allows the image to match Google Graphics search results. 

    The “alt” attribute is one of the most important ranking factors, so optimizing it is especially important. It should contain a brief information about what is in the image, taking into account key phrases related to the topic of the page. 

    Similar is the case with title attribute. It provides a supporting text that displays when you point the mouse cursor at a particular graphic. It is a good place to place an additional keyword phrase describing the content of the subpage.

    Image file map

    Placing a list of images in an existing sitemap or creating a dedicated graphics-only one is something to keep in mind. This makes it easier for robots to read and index the images on the page. 

    Responsive images

    Today, a significant portion of the population uses mobile devices. Adapting graphics to multiple resolutions is something necessary for them to display properly on different types of devices. 

    The easiest way to achieve this is to use the responsive graphics mechanism. Simply add several variations of a given graphic in the code, using the attribute ‘srcset’. This way, after identifying the resolution the user is using, the browser will display the assigned graphic. 

    This will definitely affect the speed of loading the page and the positive user experience.

    What benefits does graphics optimization bring?

    Today, more and more graphics, diagrams and logos are being used due to the improvement of page quality and the emphasis on a positive user experience. Their proper optimization is therefore essential for the proper functioning of the site. 

    What are the specific benefits of this?”

    Playout appearance in Google

    The proper selection of ALT and TITLE attribute content influences better linking of graphics with the content presented on the page. This allows Google’s search engine to tailor graphics for specific user queries. 

    This allows our site to appear in graphical search results and increase the chance of a user going to the site. 

    Increased traffic and user interaction

    Adapting graphics to users’ needs definitely affects their interaction with the site. We are much more likely to go to a site whose graphics are attractive to us, load quickly and their titles point to the subject matter we are interested in. 

    Placing additional logos or diagrams that do not add additional weight to the page can also encourage users to stay longer on the site, move to subsequent pages of the site and positively influence their purchasing decision. 

    All this translates into more traffic to the site and higher revenue. 

    shorter page load time 

    The most common errors that the website loading speed analysis tool indicates are those related to improperly optimized graphics.

    Using next-generation formats, adjusting file sizes, and reducing them with lossless compression tools leads to faster loading of the site, better optimization for mobile devices, and increased user interaction with the site.

    Summary

    Optimizing graphics is crucial in the process of positioning a website In addition to affecting position, it also translates into an increase in site traffic, conversion rate and positive user experience. 

    All of these factors result in customers spending more time on the site, returning to the site after time, and making purchases more often. 

    Let's talk!

    Karolina Jastrzebska
    Karolina Jastrzebska

    The author of the post is Karolina Jastrzebska. She started her adventure with SEO in 2021. She currently works as an SEO Specialist at Up More.