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.

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 }}