Image Text Optimization Test: PNG vs SVG
How the two file types, commonly used as methods for rendering text as images on web pages, affect performance, usability and time to build.
Two prototypes of the banner element from the new Admissions website were built out as weber.edu web pages using the "Showcase - Megamenu" template. One rendered the text element as PNG, the other as SVG. Google Lighthouse, a Chrome extension web auditing tool, was used to measure the time required to load and render the visual elements of each prototype. Visual clarity and sharpness of the graphic, as well as the average time needed to build each type of asset were also taken into consideration.
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.
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.
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.
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.