The theme relies solely on Hugo’s image-processing capabilities.

Many different-sized versions of every image are generated automatically, so every client browser finds a near-optimal size to display. We only need to supply an original image which is large enough for the intended layout.

Resolution

For crisp images on high-density screens, we should at least provide images for double-density.

Image type2×density3×density
block (default)1400px2100px
large block2100px3150px
extra-large block2800px4200px
embedded (default) & small block660px990px
small embedded330px495px

When we build a project with more than a hundred images — 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 don’t have to wait again in subsequent runs.

In case we can’t provide a large enough version of an image, Perplex uses an excellent interpolation filter provided by Hugo to enlarge its size smoothly. Those interpolated images may look blurry nonetheless, there is no way to get missing information back. A high resolution of the original is always preferable.

Manipulation

TODO

  • Improve templates
  • Document resource parameters