Image Markup

In LiveWhale 1.7.1, the basic HTML markup LiveWhale uses for images has been updated to use the newer <picture> syntax. It allows us to offer a whole host of future-looking performance improvements:

  • Automatically provide compreseed webp format where supported (especially valuable for large header / feature images)
  • Automatically handle retina images via srcset
  • Automatically include lazy loading for performance improvements on pages with lots of images

However, it does mean a subtle-but-significant change to the image markup that gets sent to the browser. As such, your theming might need to be adjusted to reflect this HTML change.

Where previously you might have seen

1
<img src="..." class="lw_image" alt=""/>

You’ll now have

1
2
3
4
5
<picture class="lw_image">
<source type="image/webp" srcset="..."/>
<source type="image/jpeg" srcset="..."/>
<img src="..." alt="" loading="lazy"/>
</picture>

When testing 1.7.1, please double-check images across your site – especially those added via LiveWhale editors – to make sure everything looks and works as intended.

You might find in your theme that CSS or JavaScript targeting img.lw_image needs to be updated to picture.lw_image (in the case of spacing rules) or .lw_image > img (if you add an image border).

A note about image uploads: you may still only upload images to LiveWhale in the JPG, GIF, or PNG formats; we don’t currently support WEBP uploads. Rather, LiveWhale will take your JPG uploads (and PNG, if they don’t use transparency or animation) and convert those to WEBP versions, serving them up as low-bandwidth alternatives using the above formatting.

Images in Widgets

In LiveWhale 1.7.1+, widgets will use the updated <picture> syntax, regardless of whether you’ve used {image}or <img src="{image_src}" />.

If you have special use cases where <img> is needed – say, a slider script that requires <img> and doesn’t work with <picture>, you can add the following to livewhale/client/public.config.php:

1
2
// Don't use <picture> in widgets where <img> was specified
$_LW->CONFIG['DISABLE_WIDGET_PICTURES']=true;

With this setting enabled, {image} in a widget will still use the <picture> syntax, but <img src="{image_src}" /> and all similar formats will use <img> tags.

Or, on a one-off basis you can use <img class="lw_no_picture" ... in your widget format and LiveWhale will skip translating that image into <picture> markup.