We know that many web pages contain one or more images . Because images help a web page to be more visually pleasing to the eye, attract u...
We know that many web pages contain one or more images. Because images help a web page to be more visually pleasing to the eye, attract users' attention and make them spend more time on the relevant web page, and help convey information much more easily. For this reason, images are one of the most important concepts in the web world for both user experience and search engine optimization.
Visual Optimization
When used correctly, images can make a web page both richer and more eye-catching. At the same time, properly optimized images help increase the traffic of the relevant web page by ranking at the top of search engine queries. But unoptimized images can also pose just as much of a problem for web pages. Especially images that are not optimized and have a high size will increase the loading time of the relevant web page and cause many users to leave the page without viewing it. Let's examine the points to consider regarding visual optimization below.
First, let's examine the general recommendations that apply to every image.
Step 1: Using Correct and Relevant Images
Images are very important elements for the web page they are on. However, making a careless choice just to use images may be harmful for the relevant web page. For this reason, images that are relevant to the page content, that will attract the attention of the users and convey something to the users should be used as much as possible. Images selected by paying attention to these details can help users spend more time on the relevant web page and have a good experience.
Step 2: Original and High Quality Images
It is very important to present original and high-quality images to users who visit the website. Quality and original content will positively affect both the performance of the relevant image on search engine results pages and the user experience. Because the visual on a web page can even affect the user's opinion of the relevant brand or institution. Quality and original visuals will contribute to attracting users' attention, creating a good impression on the user side for the relevant website, and perhaps helping the relevant website take a place in the user's memory. For this reason, the images to be displayed on web pages should be carefully selected and presented to visitors in high quality. If you cannot find original images related to the subject, you can make the images you find more unique with filters and small edits.
Step 3: Copyright of Images
As in many other issues, copyright issues are also very important in images. Images taken for display from a competitor or any other website without paying attention to copyright may cause legal problems for the relevant webmasters. For this reason, webmasters who do not want to encounter copyright problems should design their own images, use images that they are sure are not copyrighted, or use images obtained through platforms called stock images on their web pages.
Step 4: Choosing File Format
There are many file formats available depending on the type of images and their intended use. The most well-known image file formats are JPEG and PNG. Generally, JPEG format is used for large images, PNG format for images with transparent background, GIF format for creating animated images, and SVG format for logos and icons. Apart from all these known formats, there is the WebP format, which is also supported by Google. WebP format has superior compression capabilities than JPEG and PNG formats without sacrificing quality. However, this image format is not supported by some browsers. If you want to get information about browsers that support the Webp format, you can find it here . If you would like to get detailed information on the subject, you can access the blog post of dear Gökhan from our team here . In short, the most appropriate file format should be selected according to the type of image and its intended use.
Step 5: Naming Image Files Correctly
Images may have different meaningless names depending on the source they were obtained from or the programs used. For example, an image taken with a camera may automatically consist of complex letters and numbers. However, it is recommended that the image files be named correctly in order to provide more accurate information about the image on the web page to the search engine bots that come to crawl the relevant web page. Therefore, as you can see below, you must optimize the images you acquire and name them correctly. You can also see the size difference below when the image is optimized. :)
Step 6: Balance Quality and Size in Images
Webmasters often want to provide quality images to their users. However, high-quality, therefore high-size images are one of the factors that most affect the opening speed of web pages. For this reason, all images to be uploaded to web pages must be optimized and reduced as much as possible without sacrificing quality. There are many paid or free tools that can be used for image optimization, such as squoosh.app and kraken.io . Let's examine it together through an example visual and tool.
Using Squoosh.app
First, we upload the relevant image to the tool by clicking on the “select an image” section. Then the application automatically offers you the recommended compression. For example, we see that the image below has a size of 1.3 MB, but after compression, it is reduced by 83% to 223 KB.You can also easily edit the size or file format of the relevant image by clicking on the "Resize" section. So you can easily optimize your images in just a few steps.
Step 7: Correctly Size Images
Quality images recommended for use in image selection usually have high resolution. However, it is also very important in what area these high resolution images are displayed on the relevant web page. For example, in the example below, we see that the relevant image has a resolution of 1500 x 2250, but is displayed in an area of 218 x 326. This image has a very high resolution and its size is also quite high. Such images also greatly affect the opening speed of the relevant web page. For this reason, the area where the images on the web page are displayed should be checked and the necessary optimization should be carried out. Otherwise, when there is more than one image on a web page, as in the example, the loading speed of the relevant web page will be negatively affected.
Step 8: Using Alt Text Tag
The alt text tag used in images helps search engine bots make sense of the relevant image. Therefore, it is a very important label that should be used. However, when using the alt text tag, information about the image must be provided. For example, if the image below is wanted to be used on a web page, it would be more accurate to use an alt text tag such as "white baby carriage". In addition, this tag notifies users if the image is not loaded and allows visually impaired visitors to obtain information about the image via a screen reader.
Sitemaps where URLs containing only visual content are presented to search engine bots are referred to as image sitemaps. Visual site maps help search engine bots to specifically scan the images on web pages and provide information about the images. It is also known that the images included in these site maps perform better in visual searches performed on search engines. For this reason, it is recommended that images be specifically presented to search engine bots in a separate site map. To get detailed information on the subject, you can review the Google resource here .
Step 10: Delayed Uploaded Images
Images are one of the factors that most affect page loading speed. It will not be surprising that web pages, especially those containing a lot of images, open slowly. Even though the images on these pages are optimized, when users first enter the page, the page loading speed may be slow because all images and elements are trying to load at the same time. In such cases, it is recommended to use lazy loading, that is, the delayed loading of images. With this method, images outside the first area called above the fold, that is, the first area that the user sees when he/she logs in to the relevant page, without scrolling (scrolling down) are loaded in a delayed manner. Thus, the images at the bottom of the page will be loaded as the user scrolls down the page. Since this will reduce the number of items to be loaded at first, the loading time of the relevant page may be shortened.
No comments