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.
Table of Contents
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.
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
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.
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
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.
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
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
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.
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
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.
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.
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.
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.