How to Optimize Graphics for a Website? | Tips 2020

How to Optimize Graphics for a Website

Quite an important issue during the process of creating a website is the size and number of graphics. Unfortunately, due to the fact that we think about it only at the stage of website implementation and project finalization, this topic is often neglected or neglected. It is therefore worth applying some methods and techniques beforehand so that the graphics on our website weigh less and look and look just as good.

Why should I Care?

It is worth asking the question: “Why is it worth taking care of the size of our graphics?” The answer is quite simple. This will result primarily in faster page loading and less consumption of transfer on our server. It should also be mentioned that the page load speed is one of the most important factors taken into account by Google when generating search results.

1)  Resolution!

A common mistake made by beginners is to insert graphics in the original resolution. This makes no sense because the graphics are then automatically scaled by the browser and no higher image quality results. What should the graphic size be then? The most optimal is to be guided by the dimensions in which the graphics are displayed in the browser. In other words, try to prevent the browser from having to scale the graphics and render it in native size.

In the case of responsive pages, it can be difficult to figure out what size to use. This is due to the fact that graphics can have different sizes on each device. Then you should evaluate in what maximum resolution the image will be displayed and scale to such a size in your favorite graphics program, e.g. in Photoshop or free GIMP. 

SEO is a part of digital marketing that can boost your site ranking and increase organic traffic to your site. You can get help from SEO services for your SEO needs.

According to website statistics from different sites, the highest resolution that is significant on the market is Full HD resolution, i.e. 1920×1080 pixels. So you can set a general rule that you should not place graphics with larger dimensions on the page, because it is simply unprofitable.

Related:

2)  The Format!

The second most important issue when optimizing images is their format. Of course, the most popular is the .jpg extension, which has raster graphics files. It is a format with lossy compression, which is a plus in the case of websites because we can control the size of the file ourselves at the expense of quality loss. Equally widely used is the png format, which has lossless compression and, importantly, supports transparency.

For vector graphics, the SVG format is popular. Equally common is the direct insertion of vectors in the tag <svg>introduced with HTML5. More about him here. A fairly young, but well-known and recommended method is also converting vectors into fonts, which are later easier to manipulate in CSS. Such an opportunity is given to us by the icomoon tool, which I wholeheartedly recommend.

The problem arises when we want our graphics to be in such a format that they take up as little space as possible. If we insert raster graphics, we should stick to JPG as long as possible. In fact, the PNG format is best used only if we care about transparency. It is worth adding that in many cases we can achieve the effect of transparency using CSS through the opacity property or using the RGBA color space.

Another good practice is to maximize the number of vector graphics if our images are very simple, i.e. they consist of simple geometric figures. Vector graphics weigh very little, and it does not optimize itself. At most, if you use ready-made icon fonts such as Font Awesome or Entypo, you can only export icons using icomoon that you use so that the browser does not have to load all the others that you don’t need.

3)  Compression!

When saving an image in graphics programs, we can set the compression level to reduce the image size. Unfortunately, in this case, it often happens at the expense of clearly inferior quality. Fortunately, we still have online compressors at our disposal, which thanks to appropriate algorithms are able to diametrically reduce the size, and at the same time keep the quality at a satisfactory level. TinyPNG is the best tool of this type I have dealt with. Don’t let the name mislead you! TinyPNG does just as well with JPG files.

Optimize Graphics for a Website

Photo links:

  • Before compression
  • After compression

As we can see, we are often able to reduce the file size by more than half, which I personally think is a phenomenal result. It is worth experimenting with this tool with different graphics variants because here we are able to “collect” the largest savings.

Graphics are uneven

Much also depends on the purpose of the graphics. We will treat photos in the gallery in a different way than the background of the page. Let’s take a closer look at this.

Picture in the Gallery

The basic thing we must remember is the matter of miniatures. The subpage with the gallery should load only thumbnails, not original photos. Otherwise, the site would load unbelievably long and it would be quite annoying for recipients with a weaker Internet connection, or for smartphone users.

For this reason, the developer should prepare two versions of the image: a thumbnail and a proper photo displayed as a preview in the lightbox. It is worth emphasizing here that in this case, it is necessary to adhere to the principle formulated earlier in this article, i.e. not to preview the graphics in the original size, because the loading time may be too long, and the graphics will be scaled down anyway. 

If we want to insert a photo in the original size (because, for example, we want the user to be able to see the details of the photo) the best solution is to create an external hyperlink, which, if necessary, can be clicked.

Background

Choosing graphics to be used as the background is problematic, usually, it must have the width of the entire window. This forces us to adapt the image to Full HD resolution. In this situation, we can do it in a variety of ways:

  • If the background is to be uniform, it is enough to create a regular pattern that will repeat.
  • If the background is to be more diverse, then we can create several transparent graphics that will adhere to the container with the content and serve as an “overlay” on the pattern background.
  • If we need to have the background for the full width of the window, we can use a slightly smaller size, e.g. 1500-1600px instead of 1920px. The background is a secondary element on which the recipient does not focus more attention, hence the resulting smaller sharpness on Full HD monitors should not make much difference, and we will gain valuable kilobytes.

Logo

Scalability is a priority for the logo. The logo must be sharp and look good at any resolution. Because of this, the best solution is to use vector graphics.

Icons

Although icons usually have relatively little weight, it’s worth making sure that we also have them saved as vectors, because in this way we’ll get an even smaller overall size. In addition, the icons in this way will be sharp and not scalable.

How can I check if my Website is optimized in terms of Graphics?

Once we optimize graphics and follow the suggestions from the article, we can check the total size of all image files on the page. Pingdom tools are suitable for this. The tool itself checks many factors on the page, but at the moment we focus on graphics.

check if my Website is optimized

Of course, the less, the better 😉 However, to consider the size of our graphics as optimal, just do not exceed the 1MB limit. There is SEO Agency in Pakistan that is providing quality services in SEO, SEM, SMM, and Web Development on attractive packages not only in Pakistan but also all over the world. These are professional marketers and developers who work according to international standards.

Add a Comment

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