Image Text Optimization Test: PNG vs SVG

PNG Image

Summary

The PNG file format is a raster-based image compression technology that stores an image as pixel data. When a user client makes a request for a PNG resource, the server sends the PNG file to the client. The browser then maps the pixel array in the PNG image to the pixels on the screen.

In a series of tests, text stored as PNGs performed slightly slower than SVG and suffered from fuzzy edges and overall blurriness when displayed at larger pixel dimensions.

PNG has universal support across all browsers.

Implementation Technique

Browsers need access to different, optimized, versions of the same PNG file depending on the pixel-size of the container. The physical size of a web page container (total physical pixels) is (w x R) x (h x R). Where w = logical width of the container, h = logical height of the container and R = the device pixel ratio of the browser to the screen. For more information on device pixel ratios, here is one of many articles on the web that attempts to provide an explanation.

This test uses the <picture> HTML tag to detect the client's screen dimensions and dynamically render an optimized version of the requested image file.

Time to Build

The need to create multiple versions (sizes) of the same image file to accommodate dynamic rendering adds to the build time for text images in PNG format. Additionally, the HTML structure for the entire <picture> element includes multiple sub elements and file references. The verbosity adds time to page coding.

Visual Assessment

Even at larger file sizes and pixel dimensions PNG image text files can appear pixelated or fuzzy, especially at the edges. If the pixel width of the container expands past the pixel width of the image the browser will stretch the image over the required number of pixels, further degradating the image. Some of these affects can be seen in the banner layout above.

Render Performance

Multiple performance audits revealed that PNG files render slightly slower than their SVG counterparts. Additionally, there was more variation between load times from test to test. This may be due to the fact that the browser must send a separate request to the server for PNG resources, which brings server performance directly into play. 

SVG Vector Graphic

Summary

SVG files are drawn on the screen as vector graphics. As such, they can scale up and down with the size of the container without any degradation of quality.

The SVG based image in this test rendered slightly faster than the PNG with cleaner details and sharper edges.

SVG also has solid support across all major browsers.