Image Processing
The theme relies on the powerful integrated Hugo methods.
Many different-sized versions of every image are generated automatically, so every browser client can load a near-optimal size. We only need to supply an original image that is large enough.
Resolution
The highest device pixel ratio (DPR) that screens may provide in the future is 5, and the highest DPR in widespread use today is 3.
The following table contains the original image width we need to provide for those devices and all image sizes.
Rule of thumb: For crisp images on high-density screens, we should provide images with double the size of their layout width.
Because the perceived resolution does grow more logarithmically than linearly, the optimal image size is strongly reduced. The actual delivered DPR is shown in parentheses.
| Image type | 1×density (1) | 3×density (2.1) | 5×density (2.6) |
|---|---|---|---|
| extra-large block | 1440px | 3024px | 3744px |
| large block | 1070px | 2247px | 2782px |
| text (figure default) | 700px | 1470px | 1820px |
| small (embed default) | 330px | 693px | 858px |
| tiny | 165px | 347px | 429px |
| micro | 85px | 179px | 221px |
When we build a project with lots of images — more than a hundred like this project — we have to show a little patience on the first Hugo run. Image processing may take a few minutes. The generated images are cached by Hugo and we only have to wait for the processing of new images in subsequent runs.
Format & Quality
All raster images are transformed into source sets in the WEBP format because it’s better compressed than its predecessors JPEG & PNG. The initial quality is by default 85 and gets gradually reduced for higher resolutions.
Interpolation
In case we can’t provide a large enough version of an image, Perplex applies the excellent interpolation filter from Mitchell & Netravali to enlarge its size smoothly without visible ringing artifacts. Those interpolated images may look blurry nonetheless, there is no way to get the missing information back. A high resolution of the original is always preferable.