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:
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 | <picture class="lw_image"> |
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.
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 | // Don't use <picture> in widgets where <img> was specified |
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.
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.
1 | $_LW->CONFIG['RESPONSIVE_IMAGE_BREAKPOINTS']=[ |
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 | $_LW->CONFIG['RESPONSIVE_IMAGE_BREAKPOINTS']=[ |
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 | $_LW->CONFIG['RESPONSIVE_IMAGE_BREAKPOINTS']=[ |
The above example demonstrates a case where, at each breakpoint, you want images to load at 100 pixels wider than the breakpoint screen size.
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 |