Performance Testing

This is a set of pages where images have been replaced, so you can check the actual impact of the various image formats.

But wait! There’s a small consideration to make first: all images have been converted using the default settings (I didn’t set any quality settings at all).

The page named “Original” is a copy of the WordPress.org website and contains jpg images with a quality that has been optimized manually (e.g. the big image “collage-min” has a quality of about 55-60%). For this reason sometimes they weigh more than the optimized ones that are (probably) saved 80-85% quality.

While testing this website my advice is to set 
devtools > network conditions > network throttling 
to "Fast 3g" and "Disable cache"
In this way you will notice more evidently the difference of loading performance, the rendering "effect" of progressive jpeg etc

Encoders:

avif – libaom3 AV1 Image File Format (1.12.0)
MOZjpeg – Mozilla JPEG Encoder V4.0.3
jpeg – Joint Photographic Experts Group JFIF format (libjpeg-turbo 2.0.3)
webp – WebP Image Format (libwebp 0.6.1 [020E])
png – Portable Network Graphics (libpng 1.6.37)
jxl – JPEG XL (libjxl 0.6.1)

All the images are converted using ImageMagick v7.1.0-30 (except MOZjpeg). the encode time refers to a Dell OptiPlex 3050 Micro / Intel 7th Gen i5-7500T / 8 GB / 256 GB M2 SSD that runs Ubuntu 20.04

Actually the available Image format to test are:

:~$ tree wp-content/themes/perftest/formats -s

./formats
├── [ 376K] avif
│    ├── [ 180747] collage-min.avif
│    ├── [  92594] community-2.avif
│    ├── [    547] g.avif
│    ├── [  13277] mobile-themes.avif
│    ├── [   3376] playstation-2x.avif
│    ├── [   2490] rolling-stone-2x.avif
│    ├── [  58776] screen-themes.avif
│    ├── [   5638] swag_col-1.avif
│    └── [   2376] whitehouse-2x.avif
├── [ 1.2M] jpg
│    ├── [ 471997] collage-min.jpg
│    ├── [ 281637] community-2.jpg
│    ├── [    221] g.jpg
│    ├── [  71765] mobile-themes.jpg
│    ├── [   8311] playstation-2x.jpg
│    ├── [  12111] rolling-stone-2x.jpg
│    ├── [ 306711] screen-themes.jpg
│    ├── [  36111] swag_col-1.jpg
│    └── [   7765] whitehouse-2x.jpg
├── [ 748K] mozjpeg
│    ├── [ 343107] collage-min.jpg
│    ├── [ 178279] community-2.jpg
│    ├── [     50] g.gif
│    ├── [  33678] mobile-themes.jpg
│    ├── [   4009] playstation-2x.jpg
│    ├── [   4122] rolling-stone-2x.jpg
│    ├── [ 129243] screen-themes.jpg
│    ├── [  13097] swag_col-1.jpg
│    ├── [  31286] testimages_screenshot.jpg
│    └── [   3091] whitehouse-2x.jpg
├── [ 932K] original
│    ├── [ 323659] collage-min.jpg
│    ├── [ 278941] community-2.jpg
│    ├── [     50] g.gif
│    ├── [  48275] mobile-themes.png
│    ├── [   5502] playstation-2x.png
│    ├── [  12498] rolling-stone-2x.png
│    ├── [ 217831] screen-themes.png
│    ├── [  34091] swag_col-1.jpg
│    └── [   3165] whitehouse-2x.png
├── [ 3.8M] png
│    ├── [ 2759560] collage-min.png
│    ├── [  727793] community-2.png
│    ├── [     283] g.png
│    ├── [   50087] mobile-themes.png
│    ├── [    6575] playstation-2x.png
│    ├── [   18119] rolling-stone-2x.png
│    ├── [  224437] screen-themes.png
│    ├── [   93309] swag_col-1.png
│    └── [    3538] whitehouse-2x.png
└── [ 616K] webp
     ├── [  255752] collage-min.webp
     ├── [  212792] community-2.webp
     ├── [      90] g.webp
     ├── [   18880] mobile-themes.webp
     ├── [    3372] playstation-2x.webp
     ├── [    3788] rolling-stone-2x.webp
     ├── [   85658] screen-themes.webp
     ├── [   30696] swag_col-1.webp
     └── [    2998] whitehouse-2x.webp

Contribute:

We love your input! We want to make contributing to this project as easy and transparent as possible, whether it’s:

We use github to host code, to track issues and feature requests, as well as accept pull requests.
By contributing, you agree that your contributions will be licensed under its GPLv2 License.

https://github.com/erikyo/perftest

Credits:

I apologize in advance if someone is not named here, this website is for demonstration purposes and has no intention of violating any copyright.

== Copyright ==

- twentytwentytwo / WordPress Theme, 2021-2022 WordPress.org
twentytwentytwo is distributed under the terms of the GNU GPL.

- Source Serif Font
Copyright 2014-2021 Adobe (http://www.adobe.com/)

- IMG0004.tif - Kodak Lossless True Color Image Suite (http://r0k.us/graphics/kodak/)

the logos and trademarks shown here are the respective owners