Save space, SVG, Base64 or regular images?

Question

Save space, SVG, Base64 or regular images?

Asked 10 years ago

Viewed 982 times

7

I created this question to clarify doubts that I ended up developing over the months in relation to images and space.

While accessing websites, either on my mobile phone or my normal computer, I have observed that images in SVG or encoded using Base64 are uploaded faster compared to normal images¹, I notice this especially when my internet is slow.

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

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

When the image is "upada", it reduces to the size (measured x,y) that I determine and decrease the quality not to take up space on my server.
To display it to the end user within the <img I make the picture go by a Thumb which cuts the image according to my need, without losing the original quality, with automatic resizing.

I believe that the answers to this question will help not only me, but also the general public and future web sites, thus helping everyone.

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

1

An interesting and related question on Soen http://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice

– Sergio

2014/12/13 at 15:25
Base64 does not save image storage space; it saves space when an image needs to be represented as text (in a Json, CSS...). See, 8 bits of an image represented as text: 01001101, occupies 8 acaracters, ie at least 64 bits. Now, these same bits represented in Base64: T, i.e., 1 character, occupying only the same 8 bits as the original binary representation of the image.

– Caffé

2014/12/15 at 12:43
@Caffe then it is only useful for "when an image needs to be represented as text (in a Json, CSS...)".. From what you said about bytes it just puts more load in little space.

– Vinícius Lara

2014/12/15 at 13:28
1

@user3163662 I didn’t understand "put more charge in space". Base64 is for representation of binary data (an image, for example) as text; it is more user friendly and uses fewer bytes than represent with the characters "0" and "1". So it might make sense for your images to be encoded for Base64 to traffic in an xml, or a json, or to be saved in a css, but it doesn’t make sense for you to store images on the server in Base64 - that would even increase the space occupied by them (maybe to save processing when sending to the client, but never heard of this use).

– Caffé

2014/12/15 at 14:46

1 answer

Browser other questions tagged php html html5 mobile svg

You are not signed in. Login or sign up in order to post.

by Nelson Teixeira • **1,408** points · Answer 1 · 2014-12-15T14:53:14+00:00

SVG images are images vector while png, jpg and etc. images are images matricial.

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

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

The difference is that SVG are drawings, not photos. And even if some more complex ones become very real, they will never be photos.

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

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