An image says more than a thousand words. This phrase is said because the image can be the first item on your site to talk and connect with your reader. There is no doubt that the use of images on a website is a great gimmick to attract readers to your message. However, even with the possibility of just inserting them, be aware that some care is needed when optimizing images for your site.
Images are constantly the items that take up the most disk space on a web page and for this reason, they play a key role in page load time, for example. For both, you and the person accessing your site, optimizing images is extremely necessary. By doing this, the smaller the use of your disk space in the hosting and the faster the site loads to your reader, because of which the smaller amount of data will be downloaded.
For you who are wondering how to optimize images correctly on your site, I bring you 4 golden rules that will help you in this endeavor.
Choose the right extension for your images
If you do not know, the length of your file has a big influence on its size. There are many types of extensions, but for your website, there are three fundamental (and most used by the internet in general). They are: JPEG (or JPG), GIF and PNG. And the biggest difference between them? The size vs. Image quality. Therefore, each one is ideal for a set of situations.
JPEG
JPEG (Joint Pictures Expert Group) supports millions of colors and is a widely used format for photographs. It has several levels of compression to make it smaller, but with each modification, worse is the quality of the file. Often used in images sent by email, JPEG is also widely used in websites, where the image size is more important than its quality. Even so, a JPEG of 40% to 60% quality compared to its original image (provided the original image is of good quality) can be used without very noticeable losses. It is important to remember that this type of extension allows a greater reduction in photographs and a smaller reduction (and greater loss of quality) in images as vectors and illustrations.
GIF
GIF (Graphics Interchange Format) is extremely well-known for creating a sequence of images as if it were a video. And although its compression is good, its colors are much more restricted (only 256 colors), so GIF is recommended for icons or marks, as well as grayscale or black and white images.
PNG
PNG (Portable Network Graphics) also supports millions of colors and can even be used for photographs, but its compression is much smaller, which ends up leaving the file larger than a JPEG. Complementing, while JPEG suffers a loss to each issue in the image, PNG continues with its quality intact. Therefore, in addition to being more suitable for vectors, photographs with typography and illustrations, PNG is also indicated in situations where it is necessary to edit the image without loss of quality. Besides the great quality of PNG, it has the differential of the possibility of using transparency.
Summary
In short, JPEG will perform best on unedited photos or where size matters more than quality, GIF on grayscale, black and white and less than 256 colors, and PNG on images containing transparencies, vectors, Typography, and illustrations. Knowing where each type of extension works best is important to optimize images for your site effectively.
Compress the images before posting them to your site
Even with a different size for each type of format, you can still reduce your images if they are JPEG or PNG, which is essential when it comes to optimizing images.
But first, let’s understand why to use image compression.
As stated earlier, when hiring a hosting, you get a disk space to be used. Therefore, the images on the site will occupy a good part of the space. Otherwise, each person who accesses your site needs to download all the data entered on the page accessed, and depending on the size of the user’s content and bandwidth, the time to download may be higher or lower. In addition to the user’s ability to be affected, if your readers leave your site quickly when they notice the slowness, you may have a lower ranking on Google, since speed is one of the SEO factors that it takes into account when determining the results of a search. A lightweight website is one of the reasons Google loves.
And how does this compression work? An image is made up of thousands of pixels, and of these thousands of pixels, many are repeated. Compression is nothing more than turning those many repeating pixels into one and thus decreasing the size of your file. There are several tools that allow you to compress an image (such as Photoshop), but since many are paid for and not just used for this purpose, some image compression sites, such as TinyPNG / JPEG, can be a good alternative.
Name your images correctly
Google – yet – has not created any tool that “reads” images. But when looking for, for example, the phrase “pink dress doll”, you find satisfactory results according to your search. And you know why? Because Google reads the title of the image. So when you publish it on your site, try not to use common names as vector.png and always hyphenate by indicating more than one word, for example, how-to-optimize-images-for-your-site. Also, do not forget to use accents and special characters.
Another way to optimize images for searches is to use “Alt Text”, which is nothing more than alternative text for your image. Unlike the name of the image that must say what it is, but without many words and with hyphens, the alternative text does not have this restriction. Ideally, it should be like a description, as it will also be used by the visually impaired and will appear when there is a loading problem. An example of alternative text would be: “Teacher holding pictures, ruler, scissors, and compass, ready to give tips on how to optimize images for your site”.
Google’s search tool takes the title and alternates text of your image directly into an account. There is still another indirect way of ranking it, which is the legend. Kissmetrics, a metrics tool to track user interaction on your site, did a survey and found that people read 300% more times the captions than the full text of the page they’re on. As such, they help keep the user on your page, reducing the abandonment of your site.
Be careful with the dimensions of the images
An aesthetically pleasing website attracts far more visitors than a precarious site visually. It may seem strange, but the size of the images counts a lot for the aesthetics of your site. And not only that: technically it is also very important. For example, in a space on your site that has a width of 600px, an image with a width of 800px is unnecessary. Although the image will be resized to fit 600px, there will be an unnecessary use of your disk space in the hosting. In addition, it may cause slowness in your site.
You may be thinking, “But my image is automatically resized when I upload it to my site.” You see, even if your site is responsive (which is ideal), the tool you are using only leaves the image the right size to be displayed to the user. In the storage space of your site, however, it remains at its original size.
There are other ways to properly use the image dimension, such as removing blank borders. And do not forget to always use a height and width defined according to your template.
Conclusion
It’s no wonder seven-head optimize images for your site. You can see that these tips will influence both the optimization side of your site and the usability of the user. Both sides win!
Do not forget that besides technically, aesthetically these rules are very valuable. Your images are one of the first attractions that users notice when entering your site, so be sure to pay special attention to them.
Enjoy and see other tips to optimize your site, keep up to date on SEO practices and remember: having great and professional images is just a part of the job. Align your content with your images and be sure that your user will find what they are looking for!
Any questions? Want to talk about how the images work on your site? Be sure to comment.
