Uploading images to your menu item
You can upload and choose images for your menu item using WebDAV. To do this, you will need to configure the app for WebDAV uploads.
Image
This is the default image used for the menu item. It can be overridden on mobile devices by also providing a mobile image.
Mobile image
Optionally, you can choose a separate image to be used on mobile. This can be useful to provide device appropriate image, e.g. to achieve a different design, or to optimise for page performance by providing smaller images.
Performance considerations
The more images your menu contains, the more weight is added to your page. So you will want to be conscious about image sizes and how many you use.
For more info on optimising images, read this guide from Adobe.
Image dimensions
There is no single size that an image should be as the image will be expand to fill the column that it is placed in.
However, we recommend that you review the displayed size and reduce the dimension size of the image so that it's no more than 2x the displayed size.
Image format
We recommend that images are in a modern format optimised for web such as webp
jpg
, JPEG 2000
.
Image compression
Finally, we recommend using tools that can help to compress images and reduce the file size.
Image optimisation tools
These tools can help to optimise images to reduce their size, convert them to optimal formats and reduce the file size
Lazy loading images
When configuring your menu with our PageBuilder widget, you may also choose to lazy load images so that the browser does not load them until they are viewed. This helps to reduce the page weight on initial load.