![]() ![]() If you have not turned on transfer encoding on your servers, then you should, because even for a complex SVG, the file size and bandwidth savings are substantial when using SVG compared to using PNG, in addition to a reduction in workflow complexity. With compressed SVG using GZip coming in at 13.6KB vs 56.3KB for PNG, for a 75.8% reduction in size, the advantage is incomparable. This single file renders sharply on devices of all resolutions, reducing bandwidth and rewarding users using high resolution displays with fast rendering. Coming in at 191KB straight off the editor, it is about 3.5 times bigger than PNG at 56.3KB.Īfter optimization, again Nano has the smallest file size at 78.2KB, while still bigger than PNG one could argue that a single SVG image renders beautifully on all resolution, while PNG would require 3 files, and to cover the same, resulting in a more complicated workflow and penalizing users with high resolution.Īmazingly, GZip compression reduces the SVG to 13.6KB, for an unbelievable file size savings of 92.9%. The complex image was chosen to ensure we have a SVG file that is bigger than its equivalent PNG image, as complex patterns can sometimes have a larger file size compared to its equivalent raster image format. ![]() ![]() Complex image without text Complex image with no text ![]() Just ensure your SVG images passes through an optimizer (we recommend Nano). Therefore, for simple images, there's a ton of bandwidth to be saved when using SVG compared to PNG. SVG (1) vs PNG (0)Ĭlearly, SVG with GZip at 621B versus 6.33KB for PNG, results in 90.2% bandwidth savings. Since PNG is already a compressed format, using GZip compression on PNG images does not yield much savings, if any (6.33KB unzipped, 6.38KB zipped). Even after optimization, PNG images are way bigger than SVG, so the winner is clear in this case. While we are not advocating content encoding, you could easily setup your servers for transfer encoding and still save 86.9% bandwidth!īefore optimization, PNG images are about 70% larger in size. What's even more amazing is the 621B file size when using GZip compression, resulting in a whopping 86.9% savings. Straight out of the editor, SVG already has one of the lowest file size at 4.75KB (we used vecta.io, your results may vary).Īfter passing through SVG optimizers, Nano offers the lowest file size at 2.72KB for savings of 42.7%. It is clear for simple images, SVG has a clear advantage. Simple image without text Simple penrose triangle with no textĪll PNG files are optimized using tinypng Especially for PNG, these optimizations can result in about 70% reduction. These images are chosen more by convenience rather then by selection (more about this later), so your results may vary.Īll images including SVG and PNG are optimized with industry leading optimizers to squeeze further reduction in file size. Therefore, all image formats must be able to be displayed correctly, on its own without external references, see The best way to embed SVG on HTML (2021).Ī total of 3 images will be used, a simple and a complex image without text, and also a general image with text and fonts. It would'nt be fair to use or other tags that allow our SVG to reference external CSS and fonts to save file size, where PNG images cannot do so. But, if you have control on the production of the image, and can convert it to SVG or PNG, then selecting the right format may save you a lot of bandwidth and your users will thank you for it! Image selectionįor the purpose of this comparison, we shall be looking at using tag to embed our SVG. If you are inserting a photo from a camera or using srcset for art direction, then this post is not for you, as using srcset is the only option. With the proliferation of high resolution devices like retina displays, developers need to ensure images are displayed clearly and as sharp as possible across all devices, and therefore the usage of srcset attribute on an tag, to ensure browsers load high resolution images only when necessary to save bandwidth. We all know that page speed affects SEO (Search Engine Optimization) ranking, and one of the easiest way to ensure our pages load faster, is to optimize our images. Is it true? Why are developers still using srcset and generating PNG 1x, 2x and 3x resolution? Can you save any bandwidth with using SVG instead of PNG?ĭepending on your use cases, SVG can offer anything from 60% to 80% bandwidth savings, higher image quality, faster loading and a simplified workflow. You may have heard that SVG have the lowest size while offering the best quality. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |