skip to content
  • Calendar
  • Maps

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.

Test Method

Two prototypes of the banner element from the new Admissions website were built out as 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.

PNG Image


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. 

Audit Results


Audit 1
File Type First Paint Performance Score
PNG 3.9s 72
SVG 2.4s 81
Audit 2
File Type First Paint Performance Score
PNG 3.0s 72
SVG 2.4s 81
Audit 3
File Type First Paint Performance Score
PNG 3.4s 67
SVG 2.5s 76

PNG Desktop Audit 1 PNG Desktop Audit 2 PNG Desktop Audit 3


Audit 1
File Type First Paint Performance Score
PNG 10.1s 49
SVG 8.6s 42
Audit 2
File Type First Paint Performance Score
PNG 9.0s 44
SVG 8.2s 44
Audit 3
File Type First Paint Performance Score
PNG 11.4s 44
SVG 9.8s 44
PNG Mobile Audit 1 PNG Mobile Audit 2 PNG Mobile Audit 3