Webp jpg fallback woocommerce

How To
1

Hey
Can someone explain to me how to properly set up bricks and woocommerce to use webp images for faster loading and jpgs as fallback? On prduct images as well as on normal pages

Thank ypu

2

There is no automatic configuration.

Plugins

3

Often this is handled by caching plugins or image optimization plugins like mentioned here. If using a combo of those, make sure to set it up correctly. For example i use Litespeed + Shortpixel which require extra step.
You can of course also set it up with some lines in Htaccess or through other methods, but you probably already have some caching.

4

I use this plugin from the WP makers and I think it is still one of the best and free

5

Thank you.
I´ll test some plugins :slight_smile:

6

If you’re using the Bricks template and want full control over image format & size fallbacks, you may need to use the Code element instead of the Picture element, as Bricks currently doesn’t support format fallbacks with a < picture > container, but only resolutions fallbacks with < img srcset >.

I share below a template code to paint a Picture element for responsive images with AVIF, WebP, and JPG fallbacks including retina support, then you may need to ammend the srcset sizes to your needs.

With a php function you can generate the code below sending {featured_image} dynamic data as a php variable. The function replaces. jpg to .webp and .avif from the filename and prints the code below. i will share the php funcion after reading your feedback.

<!-- Picture element for responsive images with AVIF, WebP, and JPG fallbacks -->
<picture>
  <!-- Fallback to AVIF for the largest size -->
  <source srcset="path/to/image-full.avif" type="image/avif" media="(min-width: 1536px) and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)">
  
  <!-- Fallback to AVIF for the medium size -->
  <source srcset="path/to/image-medium.avif" type="image/avif" media="(min-width: 769px) and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)">
  
  <!-- Fallback to AVIF for the small size -->
  <source srcset="path/to/image-small.avif" type="image/avif" media="(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)">
  
  <!-- Fallback to WebP for the largest size -->
  <source srcset="path/to/image-full.webp" type="image/webp" media="(min-width: 1536px) and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)">
  
  <!-- Fallback to WebP for the medium size -->
  <source srcset="path/to/image-medium.webp" type="image/webp" media="(min-width: 769px) and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)">
  
  <!-- Fallback to WebP for the small size -->
  <source srcset="path/to/image-small.webp" type="image/webp" media="(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)">
  
  <!-- Fallback to JPG for all sizes -->
  <img src="path/to/image-fallback.jpg" width="2560" height="1440" class="class-1 class-2 class-n" alt="Alternate text" title="Image title" decoding="async" fetchpriority="high" sizes="(max-width: 2560px) 100vw, 2560px">
</picture>

If you see a more effective method, or a better way to handle modern image formats on Bricks, please comment below.

I also wanted to share with you a tool I recently discovered to generate AVIF & WebP without plugins. Straight on MacOs finder. It’s called QuickWebp, and it has greatly simplified the process for me.

QuickWebp is a Mac app that offers unlimited image conversion to AVIF and WebP for a one-time payment of €3.99. A steal considering this is lifetime and not subscription model! Without plugins!

What I really love about QuickWebp is its simplicity and is local. Just select the images, click to convert on your Mac, and upload them by FTP together with the full size original files to avoid metadata bloat on your images folder.

The trial version allows you to make up to 10 conversions so you can try it out before committing. After that, the lifetime fee is the price of a coffee. Plus, the app offers customization options to adjust image quality and optimization.

The EWW deal at AppSumo was appealing, but I quickly was about to be chained for life to AppSumo Add-ons - EWWW Image Optimizer as bandwidth is expensive. Not all website models can afford this, especially those with high traffic. In my case, my website required a plan costing around 600€ per year.