Show carousel should use small images ⚡

[ozcoder]

On the home page the Show carousel is seen very early on page load and so should be optimised. The first step would be to have images that are the correct size and also tell the browser their height and width. Modern browsers support other file formats and they can created pretty easily too. I have created a smaller show image and a WebP version of that too. In the future it would be great if their was a SVG version too, but that is hard with all the text in fancy fonts. BTW the Rocket is crying out to be a SVG that is defined once and referenced through out the page.

slide.zip

index 324911a..3e4464a 100644
--- a/themes/jb/layouts/index.html
+++ b/themes/jb/layouts/index.html
@@ -19,18 +19,38 @@
 
     <div class="swiper show-slider">
       <div class="swiper-wrapper">
+       {{ $reImg := "^(.+)[.]([^.]+)$" }}
+       {{ $reSlide := "$1-slide.$2" }}
+       {{ $reWebP := "$1-slide.webp" }}
 
        {{ range where .Site.Sections ".Title" "Shows" }}
           {{ range .Pages }}
+            {{ $webpImg := print .Params.header_image | replaceRE $reImg $reWebP }}
+            {{ $webpFile := printf "%s" $webpImg | printf "%s%s" "static" }}
+            {{ $pngImg := print .Params.header_image | replaceRE $reImg $reSlide }}
+            {{ $pngFile := printf "%s" $pngImg | printf "%s%s" "static" }}
             <div class="swiper-slide">
               <div class="card-image">
                 <figure class="image">
                   <a href="{{ print .Permalink }}">
-                    <img
-                      src="{{ print .Params.header_image | absURL }}"
-                      alt="{{ print .Title }}"
-                      class="show-img"
-                    />
+                    <picture>
+                      {{ if os.FileExists $webpFile }}
+                        <source
+                          srcset="{{ $webpImg | absURL }}"
+                          type="image/png">
+                      {{ end }}
+                      {{ if os.FileExists $pngFile }}
+                        <source
+                          srcset="{{ $pngImg | absURL }}"
+                          type="image/png">
+                      {{ end }}
+                      <img
+                        src="{{ print .Params.header_image | absURL }}"
+                        alt="{{ print .Title }}"
+                        class="show-img"
+                        height="168" width="300"
+                      />
+                    </picture>
                   </a>
                 </figure>
               </div>```

[elreydetoda]

 first step would be to have images that are the correct size and also tell the browser their height and width

So, how does this work when the images should resize depending on the screen size?

Modern browsers support other file formats and they can created pretty easily too.

Ya, we just need to make sure we keep providing the older format as well in case the client's don't (like your example shows with the picture tag + sources).

I don't know how I feel about the regex... 🤔 I feel like there should be an easier way to handle that...like maybe putting the names in a slice and iterating over that? The regex just kind of "obfuscates" that your just figuring out the naming for each file (if I'm understanding it correctly).

---

Also, hugo has a bunch of image processing stuff that might help make this a lot easier. If you could (since it sounds like you're interested in this, but don't feel pressured to if you dont) would you mind doing a bit of research on best practices and guides one how to implement hugo image processing? Then if you post/keep commenting on this issue we can have a record of what we should do and can eventually implement it after we've figured out the best process for everything. 😁

Thanks for bringing this topic up though 🥳 it's definitely something I haven't payed too much attention to in the past because I haven't had to (3rd party service handled the resizing).

Which speaking of that, could you also find 3rd party services that are supposed to be reputable for handling image assets. I have no idea if JB will want to use them, but I've heard that things like cloudinary is supposed to have some awesome features for image assets/serving.

Also, just want to reiterate, don't feel pressured to say yes to this if you don't want to do it. I was mainly getting thoughts out based on the contents of your issues 😅 and someone in the future can always do this if you don't want to.

Thanks again for opening this PR 😁🥳🎉🚀

[ozcoder]

CSS really controls the size of the images displayed, the width and height are only hints to the browser about the possible size and ratio of it's dimensions. Media queries affecting CSS will change their size, but the numbers I used are the normal desktop dimensions.

My picture element would show WebP images (98% smaller) to most modern browsers (Safari real soon now), OR if they don't support that then show the smaller optimized PNG (90% smaller) to browsers that understand source (non IE) OTHERWISE fallback to the original PNG in the img tag. It's a great way of dealing with image format support.

Ideally there would be a SVG version of the logo, but that's a little bit hard due to all the fonts/text in each show logo. I tried AVIF for a nice small file, but I wasn't 100% satisfied with the quality. In the future maybe even JpegXL art, like SVG, could be tried.

I'm used to using regex's so I used it. Took a little while to get correct due to the regex engine being a little bit weird. I thought the variable names were ok enough so that people knew one was the URI and one was the Filename so I can check for existence. I didn't want to change the show data, just calculate from that. The printf stuff is because you can't easily concatenate strings in Hugo variables for some reason.

I didn't know about Hugo's image processing, I'll have to read that. In general, I think it's better to hand optimize images to get the smaller size and quality that you care about. You are not dealing with thousands of images here.

Many companies sell image handling, but for Jupiter Broadcasting it's probably best to do them once, by hand, using various tools and sites like https://squoosh.app in order to make the site quicker for all people and even give a tiny boost to SEO. The source image is not changed.

[ozcoder]

Rest of the images
slides.zip

The WebP images could be smaller, but some colours get blurry, so these I think are best.

[gerbrent]

Good news: we can supply SVG of most of our assets, Rocket included! Will take a little work, but is certainly possible. see #219