Save space, SVG, Base64 or normal images?

Question

Save space, SVG, Base64 or normal images?

Navigation

#1 by (5 votes)

6

I created this question in order to clarify doubts that I have developed over the months in relation to images and space.

While accessing sites, either on my cell phone or my normal computer, I have observed that SVG or encoded images using base64 are loaded faster than normal 1 images, I realize this mainly when my internet is slow.

Since then, I carry this doubt in my head, which is the most advantageous to use in terms of storage space (for the benefit of the server) and at the same time has faster loading (for the benefit of the end user).

In my projects that use a lot of images, such as a social network, which loads avatars images etc, I use these steps as an alternative to try to help the server without disturbing the final result:

When the image is "up", it reduces the size (measures x,y ) that I determine and decreases the quality to not take up space on my server.

To display it to the end user, within <img I make the image go through a thumb that cuts the image according to my need, without losing the original quality, with automatic resizing.

I think the answers to this question will go a long way towards not only me, but the general public and future web sites, thus helping everyone.

1 Normal images: .png , .gif , .jpeg etc ..

php html html5 svg mobile

asked by anonymous 13.12.2014 / 16:21

1 answer

'NT AUTHORITY \ ANONYMOUS LOGON' failed in SQL Server 2012 on remote server Bash, know what directory is running

score 5 · Answer 1

SVG images are vector images while png, jpg and etc. images. are dot matrix images.

An SVG image is nothing more than a text file with an XML describing arcs, positions, gradients, fills, and so on. Try opening in a text editor such as Vim / Gedit (Linux) or Notepad / Notepad ++ (Windows).

So they are much smaller than other types of files that describe the image bit by bit as it is the case of matrix images, even with the compression that the various types of image have.

The difference is that SVG are drawings , not photos. And even if some of the more complex ones actually look real, they will never be photos.

The advantage of SVG is that, as a vector, it never loses resolution, in the largest and smallest sizes.

Already a matrix image, with some zooms, already appears that typical "grid" that indicates the limit of resolution of her. If the application you want to give is icons, SVG will take up less space, but you will not be able to use it for photos.