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 weber.edu web pages using the "Showcase - Megamenu" template. One rendered the text element as PNGthe 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.

 

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 weber.edu web pages using the "Showcase - Megamenu" template. One rendered the text element as PNGthe 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.