# HTML Picture element with PNG and WEBP images and lazy loading option
**URL:** \
**Category:** support\
**Created:** [November 22, 2020, 6:11am UTC](https://discourse.gohugo.io/t/html-picture-element-with-png-and-webp-images-and-lazy-loading-option/29566 "2020-11-22T06:11:00Z")\
**Posts on this page:** 6\
**Page:** 1
I would like an opinion about my shortcodes for the element with WEBP and PNG images.
Code on pages:
```
{{< img src="/images/image" alt="Example Image" width="100" height="100" >}}
{{< img-lazy src="/images/image" alt="Example Image" width="100" height="100" >}}
```
Shortcodes:
img.html:
```
```
img-lazy.html:
```
```
It works. But I want an opinion from someone else. Maybe someone can improve it.
---
I tryed to generate different image sizes for responsive layouts. Hugo hardcore š
[HugoSample/render-image.html at master Ā· gj52/HugoSample (github.com)](https://github.com/gj52/HugoSample/blob/master/themes/photon/layouts/_default/_markup/render-image.html)
I use the standard image markdown format ``
---
Ok. Iām using HTML. Not markdown.
My website has more than 180 pages, and a lot of images (screenshots), so I donāt want to change too much at once.
And also, my website contains screenshots for tutorials, so itās not always a good idea to resize them, otherwise people may not see the info clearly.
All images are responsive and Iām also using lazy loading. LazySizes script.
But now I also want to add WEBP images to further optimize speed. Especially for the images above the fold. So the images that donāt lazy load.
---
Why are you using a script to lazy load? All modern browsers support
```auto
```
This works in all modern browsers, screw IE11. For images in markdown utilizing webp and png,
I am using this shortcode:
```auto
{{ $image := .Get 0 }}
{{ $alt := .Get 1 }}
{{ $width := .Get 2 }}
{{ $height := .Get 3 }}
{{ $classes := .Get 4 }}
{{$alt}}
```
You will of course need to change the css classes to your own.
Donāt forget to utilize prefetch and preconnect as well, to further speed up your page.
I have written an article about this just today: [https://tuxstash.de/blog/optimizing-my-blog/page/3/](https://tuxstash.de/blog/optimizing-my-blog/page/3/)
---
> [@GothSeiDank](#):
>
> Why are you using a script to lazy load? All modern browsers support
Actually this is not the case as per [Can I Use](https://caniuse.com/loading-lazy-attr).
iOS Safari and Safari desktop require a user action in advanced settings, to enable lazy loading.
Until Apple decides to release browser versions with lazy loading enabled by default I think that it is useful to use a script for lazy loading.
---
yah, sadly āall modern browsersā is coupled with 95% distribution š
```
This works in all modern browsers, screw IE11. For images in markdown utilizing webp and png,
I am using this shortcode:
```auto
{{ $image := .Get 0 }}
{{ $alt := .Get 1 }}
{{ $width := .Get 2 }}
{{ $height := .Get 3 }}
{{ $classes := .Get 4 }}
