Skip to main content

Handle large images

Large images can hurt email performance and, in some cases, deliverability. Even when Better Email optimizes uploads, it is still worth using appropriately sized source files.

General guidance​

For most email layouts:

  • JPEG and PNG files are usually fine when dimensions stay reasonable
  • extremely large source dimensions often create the real problem
  • many emails do not need images larger than about 1200px wide

If an image is too large, the first fix is often to crop or resize the source before upload.

GIFs need extra care​

GIFs are more likely to become heavy files quickly. If a GIF is causing problems, optimize it before upload.

Tools like ezgif.com can help reduce file size. As a rule of thumb, smaller is better, and very large GIFs are more likely to be blocked or load slowly.

Masked images are PNGs​

Masking an image — for rounded corners, a circle, or a custom shape — requires transparency, and that means the output is a PNG. For a photograph a PNG is several times the size of the equivalent JPEG.

That is usually a fine trade for a small image like an avatar. For a full-width hero photograph it is worth checking the resulting file size, and worth asking whether the shape is needed on that particular image.

Prevent upscaling for GIFs​

If you normally use dpr: 2 for sharp images, you may want to avoid that for GIFs so the file size does not grow unnecessarily.

One approach is to detect whether the file is a GIF and lower the DPR:

{% if img.image.url contains '.gif' %}
  {% assign dpr_size = 1 %}
{% else %}
  {% assign dpr_size = 2 %}
{% endif %}

Then use that value in your image code:

<img alt="image" src="{{ img.image.url | resizeImage: width: 640, height: 200, dpr: dpr_size, fit: 'cover' }}" width="640" style="width:640px; height:200px; display:block; border:0;" />

Or with imgTag:

{{ top_article.background_image | imgTag: class: 'w-full', height: top_article.img_height, gravity: gravity, fit: 'cover', dpr: dpr_size }}