MilesWeb
Leading Web Hosting Provider in India Since 2012.
Award-winning Web Hosting Company
Everything that you need to build, host and manage a website is available at just 109/mo

4 Golden Rules to Optimize Images for Your Website

Share on Facebook17Share on Google+0Tweet about this on TwitterShare on LinkedIn0

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 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.

A Journalist Specializing in Blogging, Social Networking and Community Management. As a constant learner, Pravin is always aiming towards new ideas and greater knowledge. When he is not doing research, reading, or writing for blogs, you can find him hanging around social media sites.

Pravin Ganore

A Journalist Specializing in Blogging, Social Networking and Community Management. As a constant learner, Pravin is always aiming towards new ideas and greater knowledge. When he is not doing research, reading, or writing for blogs, you can find him hanging around social media sites.

4 thoughts on “4 Golden Rules to Optimize Images for Your Website

  • June 21, 2017 at 10:20 am
    Permalink

    Indeed, nice blog!all the mentioned rules are beneficial to optimize images for the website.Before posting any image on social media or anywhere first you should optimize it with the right extension such as JPEG, GIF or PNG.

    Reply
  • June 22, 2017 at 10:36 am
    Permalink

    First of all, honestly speaking I was not aware of the full form of JPEG, GIF and PNG. After knowing full-forms, I found the article interesting and it encourages me to read further. Great explanation in the article. Good One!! Thankyou!!

    Reply
  • June 22, 2017 at 12:17 pm
    Permalink

    Image presentation makes more impression than written content. You must check for more descriptive image name, optimize Alt tags and to reduce image size.

    Reply
  • June 29, 2017 at 1:22 pm
    Permalink

    Images are the important part that takes most disk space on a web page. So you need to optimize your website images. Check for image file type extension, save them properly, reduce image size, compress your images for web.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *