Hi all,
In order to improve the permormance of my site I would like help and have your opinion on the integration of images.
I want to modify Hugo’s Layouts in order to
be able to use the picture tag instead of the img tag.
Here is an example of code:
<picture>
<source
srcset="images/image-01.webp"
type="image/webp">
<source
srcset="images/image-01.jp2"
type="image/jp2">
<source
srcset="images/image-01.jxr"
type="image/vnd.ms-photo">
<img
src="images/image-01.png"
width="278"
height="383"
alt="Rebel">
</picture>
I do not know where to start.
This will allow the browser to choose the appropriate image.
Here is an example of the front matter in archetypes/blog.md
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: no
# page title background image
bg_image: ["images/blog/image-01.jpg","images/blog/image-01.webp"]
# meta description
description : "This is meta description"
# post thumbnail
image: ["images/blog/image-01.jpg","images/blog/image-01.webp"]
# post author
author: "John Doe"
# taxonomy
categories: ["Category"]
tags: ["Tag1", "Tag2"]
# type
type: "post"
---
I do not know if this subject has already been treated but this is important for the optimization of the site.
thank you in advance