HTML Picture element with PNG and WEBP images and lazy loading option

support
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:

<picture>
<source srcset="{{ .Get "src" }}.webp" type="image/webp">
<source srcset="{{ .Get "src" }}.png" type="image/png">
<img src="{{ .Get "src" }}.png" alt="{{ .Get "alt"}}" width="{{ .Get "width"}}" height="{{ .Get "height"}}">
</picture>

img-lazy.html:

<picture>
<source srcset="{{ .Get "src" }}.webp" type="image/webp">
<source srcset="{{ .Get "src" }}.png" type="image/png">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-src="{{ .Get "src" }}.png" alt="{{ .Get "alt"}}" width="{{ .Get "width"}}" height="{{ .Get "height"}}">
</picture>

It works. But I want an opinion from someone else. Maybe someone can improve it.

2

I tryed to generate different image sizes for responsive layouts. Hugo hardcore :wink:

HugoSample/render-image.html at master · gj52/HugoSample (github.com)

I use the standard image markdown format ![](images/image.gif "sample image")

1 Like
3

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.

4

Why are you using a script to lazy load? All modern browsers support

<img src="foo.png" loading="lazy">

This works in all modern browsers, screw IE11. For images in markdown utilizing webp and png,
I am using this shortcode:

<!-- Usage {< inline_image "image" "alt text" "width" "height" "additional classes" >} -->
{{ $image := .Get 0 }} <!-- Name of the image -->
{{ $alt := .Get 1 }}<!-- alt-text -->
{{ $width := .Get 2 }}
{{ $height := .Get 3 }}
{{ $classes := .Get 4 }}<!-- classes for figure -->


<div class="columns">
    <div class="column is-half is-offset-one-quarter">
        <div class="media">
            <figure class="brdr-yayellow image {{$classes}}">
                <picture>
                    <source type="image/webp" srcset="{{$image}}.webp">
                    <source type="image/png" srcset="{{$image}}.png">
                    <img
                         src="{{$image}}.png"
                         alt="{{$alt}}"
                         height="{{$height}}"
                         width="{{$width}}"
                         loading="lazy"
                         class="vert-middle"
                    >
                </picture>
                <figcaption>{{$alt}}</figcaption>
            </figure>
        </div>
    </div>
</div>

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/

1 Like
5

Actually this is not the case as per Can I Use.

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.

6

yah, sadly “all modern browsers” is coupled with 95% distribution :wink:

Selection_073