Image Optimization
Edgemesh Server Automatic Image Optimization
Edgemesh Server Image Optimization will replace all the images on your site with the best possible format that the requesting browser supports, regardless of what the source image is. This happens seamlessly and transparently with no additional coding required. We even support pre-existing source sets and lazy loaders.
For the best optimization, you can enable Edgemesh Server's full optimization mode:
  1. 1.
    Remove any existing lazy loader and source sets (srcset, data-src, data-srcset, etc)
  2. 2.
    Revert all images back to <img> tags and set the src to the largest version of your image needed on your site.
  3. 3.
    Add the data-em-optimize attribute to your image tag.
Edgemesh Server will then optimize that image automatically by applying the following:
  1. 1.
    The best format for the requesting browser will be served (avif, webp, png, jpg).
  2. 2.
    Source Sets will automatically be generated for the image.
  3. 3.
    Native lazy loading will be enabled.
  4. 4.
    Asynchronous decoding will be enabled.
By default the browser will assume you want to render the image at 100vw. In some cases this is okay, but for smaller images on your page, you will want to tell the browser how big the image will be rendered on your page in order to select the best image from the source set. You can set this in the data-em-optimize attribute.
1
<img
2
src="https://cdn.mystore.com/img-large.jpeg"
3
em-optimize="
4
(min-width: 960px) 720px,
5
100vw
6
"
7
/>
Copied!
The em-optimize attribute follows the same specification as the HTML Image Element Sizes attribute. A comma separated list of [(Media Query)] <size> or <size>. If no sizes are set, the size will default to 100vw.
Last modified 1mo ago
Copy link