How to Use Different Graphic Formats Efficiently Across the Web
We have all experienced slow-loading web pages and how frustrating they can be. When a web page takes too long to load, many users become annoyed and leave for faster-loading sites.
A web app’s performance largely depends on graphic formats. Using graphic formats efficiently can significantly improve your web app’s performance, which leads to better conversion rates because more people stay and get to see what your webpage has to offer. If you want more people to stay on your webpage, consider using different types of graphic formats to maximize the efficiency and performance of your webpage.
What are SVG files?
Scalable Vector Graphic (SVG) is a specific image format made up of vector graphics including circles, squares, or so-called paths. SVG files can be scaled at any size without any distortion.
A simple SVG looks something like this:
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="5" fill="blue" />
</svg> The SVG tags indicate the graphic, while elements inside the tags are parts of creating the whole image. This example displays a circle with different properties such as the circle’s starting point (coordinates cx and cy), the radius, the stroke color, and other attributes. There are different kinds of SVG elements with a variety of properties that can be put together to create beautiful scalable graphics.
To learn more about SVGs, check out this page: MDN Web Docs about SVGs.
JPG: Efficiency Over Quality?
JPG is an image format created by the Joint Photographic Experts Group (JPEG) in 1992. Compared to SVGs or PNGs, the JPG format best compresses files into smaller sizes. This ability makes JPG arguably the most efficient file format around. There is, however, a trade-off to this efficiency, something we all have experienced: they get blurry if you zoom in too much.
PNG: The Go-To Format?
PNG stands for Portable Networks Graphic and is a raster image format that compresses image data with almost no loss of information. This format can also provide a transparent background, which can be useful for web development (e.g., using PNGs as logos or icons on various backgrounds). Unfortunately, no format is perfect. PNGs are relatively heavier in size and therefore, less responsive compared to the other types of formats.
Advantages and Disadvantages of SVG, PNG, and JPG
| SVG | PNG | JPG | |
|---|---|---|---|
| Vectorized vs. rasterized | Vectorized Image: Can only display vector graphics - not raster images or photographs | Rasterized Image: Image compression format with small loss of data | Rasterized Image: Display images with small file size (depending on the use case) |
| File Size | Relatively low file size (depending on the use case) | Relatively heavy in size, therefore less efficient than SVG or JPG (depending on the use case) | The smallest file size in comparison to SVGs and PNGs; therefore the most cost-efficient file format |
| Visuals | Scalable graphic that looks sharp no matter which size | Supports transparent background and has an alpha channel (capable of change in opacity) | Blurred graphic if the image is highly scaled (due to raster image) |
| Benefits | Especially good for responsive design - one data file for various sizes; can be used to create high-quality icons and logos | Good for images that require transparency; can be used for digital art and graphics | Good for photographs and images with many colors |
| Drawbacks | An SVG can be very complex the more elements it consists of. | Less responsive depending on the file size (some web apps have three different PNGs sizes of one illustration for responsiveness) | Blurred image if highly scaled (due to raster/pixel image) |
Now that we have some idea of what each format is, and what they are capable of, we can conduct some simple tests to understand the *depending on the use case* points.
Three types of graphics with different complexities are shown below:
An Image:
A Logo:
An Icon:
The graphics were exported by Adobe Illustrator using the same properties and settings to accurately compare the efficiency of these graphics in each format type.
Let's start with the pancake image:
Pancake File Size Comparison
The SVG file of that complex image has a total size of 6.4 MB. Compressing this image to a JPG reduces the file size by 68 times while using PNG can bring us a 12 times smaller image. In the case of an image, as the data shows, using JPG seems to be the most performance-efficient decision.
But what would those look like on a webpage?
For an average person, it would be quite difficult to notice the differences in quality, unless the images above are scaled bigger than 1000px in width. It would be safe to say that most web users do not care too much about the quality of highly zoomed-in images when they are simply scrolling through the webpage. They do, however, care about how long the webpage takes to load. As you can see in the following gif - the SVG takes several seconds to show up on a webpage.
From this, we can strongly suggest that JPG is the most efficient format for using photographic images in web applications since it can reduce the loading time by more than half. This leads to a better user experience and a higher conversion rate!
Next up let’s have a look at the logo:
Umbrella Logo File Size Comparison
Logos are typically used without a background, so they can be placed all over a webpage. For this experiment, the logo was exported with and without a background in all three different formats.
The result clearly shows that in terms of the size of files, SVG is the most efficient format, either with or without a background. The size of ‘PNG with Background’ is almost twice as large as ‘SVG with Background’. JPG is surprisingly the most inefficient format in this specific case.
The graphics below show the Logo scaled to a width of 300 in each format:
One can observe that the SVG format of the given logo is clear regardless of the size. On the other hand, the PNG format is rasterized and looks slightly blurry with a width of 300.
The difference in quality between SVG and PNG is less obvious when the logos are smaller. The JPG format shows the logo with a white background, making it difficult to apply elements with a different color. The quality of the JPG format is relatively close to PNG in this example.
When it comes to logos, it is best to use either SVGs or PNGs. Both formats allow logos with transparent backgrounds while keeping them an efficient size. PNG files can be chosen over SVGs if one prefers to work with pixels and rasterized images or logos.
A blurry logo on your webpage may cause users to have a bad impression of the products or services you are trying to sell or advertise. This can also have an adverse impact on the conversion rate of your website. A fast-loading logo is also beneficial for your web page since it is typically used more than once. Finding the balance between quality and loading time is the crucial key to an efficient, effective, and optimized page.
Finally, let’s check out the heart icon:
Heart Icon File Size Comparison
The SVG version of that little graphic has a mere one KB. Exported to a PNG, it increased in size 8 times and exported to a JPG, 27 times.
In the case of icons, it is obvious that SVGs are the smallest and most efficient among the three file formats. On a webpage, it would look something like the following:
For this experiment, the icon was scaled up to a width of 200px. Similar to the logo, the SVG is clear and crisp, while the PNG and JPG formats are blurred the bigger the icon is scaled. Icons within web pages are typically between 50px or 100px high and/or wide and a difference in quality wouldn’t be as visible to the average user as it is in this example.
SVGs for icons is the most efficient format - while PNGs hold second place in efficiency due to their file size. Small and crispy icons that are scalable for any screen can have a huge impact on the perceived quality of a web app and an improved user experience, which will result in a higher number of conversions.
Different Formats Within CMS
When it comes to large-scale applications, Content Management Systems (CMSs) are effective tools to organize assets (such as text and images) that are displayed within the webpage or mobile app. The size of the files determines the loading time and should be considered before choosing and uploading the assets. However, some CMSs have limitations regarding image formats.
While JPGs and PNGs are popular and widely used, SVGs are difficult to handle within those tools because they consist of code and not rasterized pixels. WordPress, for instance, does not natively support SVGs due to security concerns that come along with possible code injection into the content field of the CMS. Although WordPress sites support SVGs through plugins such as Sketchpress, the platform itself will not convert an SVG into an image automatically. CSS-based templates are also another useful resource to handle SVGs when using a CMS like WordPress, but not all templates offer support for SVGs. Some even go as far as to not support it at all.
Due to these CMS limitations, it is best to avoid using SVGs and instead use other formats that are more compatible with different CMS platforms. Keep in mind that not all browsers will render SVGs correctly so it is important to choose an appropriate file type depending on the type of device the user will be viewing on.
PNGs are often the global format for image files in a CMS, thanks to their transparent background and small file size which leads to fast loading times.
SVG vs PNG vs JPG
The answer to the question “What is the perfect image format?” is: It depends! SVG is the most efficient format when it comes to simple graphic illustrations. JPGs are the best format for photographs due to their small file size which results in faster loading times. PNGs, on the other hand, provide the best image quality (although they do have a larger file size than JPGs).
In this specific experiment, the SVG of the pancake took approximately 2-3 seconds longer to show up in comparison to the other formats. Using an SVG format instead of a PNG of the logo is, performance-wise, better. But this could vary depending on the complexity of the SVG.
The most efficient usage of file formats affects the overall performance of websites or apps. Long load times can lead to frustration among users and an increased bounce rate, meaning the number of visitors who will leave your website after viewing only one page. The average bounce rate is 9% for web pages loading in 2 seconds. However, as soon as the loading time exceeds 5 seconds the bounce rate rises up to 38% - and if it takes 7 seconds for a user can see the content, more than half of the potential customers (53%) leave. Choosing the wrong format can lead to an unnecessarily long loading time and result in losing potential customers.
Overall File Size Comparison
Using SVGs for anything small is extremely efficient, but PNGs are best for bigger graphics and JPGs are the way to go for photographs.
The Future of Image Formats
As technology continues to advance, image formats are evolving to offer better compression and quality. While PNG, SVG, and JPEG have been the mainly used formats for many years, newer image types are emerging that provide even greater benefits. Two rising popular image formats are WebP and AVIF.
WebP is a new image format developed by Google that offers a powerful file size reduction compared to PNG and JPEG while maintaining the same or better image quality. It uses a compression algorithm called VP8, which was originally developed for video compression. WebP also supports transparency and animation, making it a versatile format for web designers and developers.
AVIF (AV1 Image File Format) is another promising format that is increasing in popularity among web developers. It uses the AV1 video codec to compress images, which results in even smaller file sizes than WebP or JPEG. AVIF also supports advanced features such as HDR (High Dynamic Range) and wide color gamut, which can enhance the overall image quality and viewing experience.
While both WebP and AVIF are still somewhat new, their popularity is on the rise as more and more websites adopt them. With 97.5% support for WeP and approximately 84% support for AVIF across global browsers, both formats are currently viable when used alongside a fallback image format. The implementation of fallback images in cases where a user’s browser does not support a particular format can be streamlined through the utilization of a CDN (Image Content Delivery Network), which allows for image formats to be optimized for efficiency based on the user’s browser.
As internet speed continues to improve and users increasingly prioritize fast loading times and high-quality images, these emerging image formats are expected to gain even more prominence in the future.
