Resource image
Tutorial demonstrates how to resize an image on Hugo site before inserting it in html.
This technique is applied when original images are large but have to be embedded as small one to reduce page load time (e.g. in the context of image gallery).
Materials used:
- Page resources.
- Image processing.
- Hugo resource image example.
- Hugo image resize on Stack Overflow #1.
- Hugo image resize on Stack Overflow #2.
image-resize shortcode
Image resize with screwed aspect ratio
Resize to a width of 300px with preserved aspect ratio
Resize to a height of 300px with preserved aspect ratio
imgproc shortcode
Resize to a width of 500px with preserved aspect ratio
Image quality reduced (works on jpeg, quality 1-100)
Fill mode: left
Resize and crop the image to match the given dimensions. Both height and width are required.
Fill mode: right
Resize and crop the image to match the given dimensions. Both height and width are required.
Fill mode with smart cropping
Fit mode
Scale down the image to fit the given dimensions while maintaining aspect ratio. Both height and width are required.