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.

Responsive Images

In LiveWhale 2.0+, the <picture> markup has been made responsive. This means that, at smaller mobile and tablet breakpoints, LiveWhale will instruct your web browser to only load an appropriately-sized version of each of your images, making pages load faster.

You don’t need to make any changes to your theme or markup to do this—any existing image widgets that LiveWhale generates will have this responsive code added automatically.

Responsive images are configured by breakpoints. A breakpoint essentially says, “at any screen size smaller than {width in pixels}, don’t load any image larger than {width in pixels}”.

The default configuration in LiveWhale sets breakpoints at 500, 800, and 1200 pixels. This means, for example, that at screen sizes between 800 and 1200 pixels wide, LiveWhale images won’t be loaded at sizes larger than 1200px wide.

Default Configuration

1
2
3
4
5

$_LW->CONFIG['RESPONSIVE_IMAGE_BREAKPOINTS']=[
	500,
	800,
	1200
];

Custom Configuration

You can override this in livewhale/client/global.config.php if you’d like to set custom breakpoints to correspond to your theme. We recommend sticking to around three or four breakpoints, but LiveWhale supports up to ten. Any breakpoints after the first ten in your config file will be ignored.

1
2
3
4
5
6

$_LW->CONFIG['RESPONSIVE_IMAGE_BREAKPOINTS']=[
	500,
	925,
	1300,
	1600
];

Custom Configuration: Different Screen and Image Widths

If your theme includes parallax, zooming, or other animation effects, you might want to support images larger than the viewport. If this is the case, you can use an alternate format for $_LW->CONFIG['RESPONSIVE_IMAGE_BREAKPOINTS'] that separates the screen size from its max image size.

1
2
3
4
5
6

$_LW->CONFIG['RESPONSIVE_IMAGE_BREAKPOINTS']=[
//	screen width => maximum image width at that breakpoint
	500 => 600,
	800 => 900,
	1200 => 1300
];

The above example demonstrates a case where, at each breakpoint, you want images to load at 100 pixels wider than the breakpoint screen size.

Disabling Responsive Images

If for some reason your site’s theme does not work well with responsive images, you can disable this functionality by adding the following to livewhale/client/global.config.php.

1

$_LW->CONFIG['RESPONSIVE_IMAGE_BREAKPOINTS']=[]; // disable responsive images