Gmail uses an image-proxying system that may modify or convert your images before displaying them to recipients. When an email contains WebP images, Gmail will change the format (to PNG or JPEG), which can flatten transparency, adjust colors, or remove animation. As a result, you may notice distorted edges, pink/red halos, black backgrounds, or lower-quality product images.
This article explains why these issues happen and how to prevent or resolve them.
Why Gmail Modifies WebP Images
Gmail doesn’t always display your image exactly as you uploaded it. When your email is opened, Gmail creates its own version of the image, and during that process, the image may change.
Here’s what Gmail may do to WebP images:
Convert the image format from WebP to PNG or JPEG;
Remove transparency, which can add unexpected colors around the edges;
Compress or adjust the image, which may reduce sharpness or clarity;
Turn animated WebP images into static images.
These changes are why WebP files in Gmail may display differently, as in the example above. These changes are introduced after Gmail processes the image.
Note: Omnisend does not re-encode or modify your image files. We reference your image URL directly in the <img> tag. Display issues are introduced after Gmail processes your image through its proxy.
Troubleshooting Common WebP Issues in Gmail
Red/Pink Borders Around Images
Images that contain transparency, soft edges, or cutouts may show thin pink or red borders in Gmail.
This happens because Gmail often converts WebP images into JPEG, and JPEG doesn’t support transparency. When the transparency layer is flattened, faint color fringes can appear around the edges, especially on white or light backgrounds.
Troubleshooting
To prevent halos or fringes around your images:
Avoid using WebP for graphics. Use PNG instead.
You can use PNG for any image with transparency, soft shadows, cutout products, logos, or icons.
Use JPG for photos.
JPG format is the safest option for full-bleed photos and background-style imagery without transparency.
This prevents unwanted halos/fringes, reduces time spent debugging email appearance, and helps emails look as expected across all email clients.
WebP Transparent Background Issues
In addition to pink/red borders, images with transparent backgrounds may also appear with a black, gray, or unexpected background color when viewed in Gmail.
As Gmail converts WebP images into a different format before displaying them, transparency can be removed or flattened, causing previously transparent areas to be filled with a solid color.
Troubleshooting
To prevent transparent background issues in Gmail:
Avoid using WebP for images with transparency. Use PNG instead.
PNG preserves transparency more reliably when email clients process images.Use PNG for logos, icons, and graphics with transparent backgrounds.
This helps ensure transparent areas remain transparent across inboxes.Avoid soft shadows or partially transparent edges when possible.
These elements are more likely to produce unwanted background colors after conversion.
Using PNG for transparent images reduces unexpected background fills and helps your emails display consistently in Gmail and other email clients.
Animated WebP Images Displaying as Static
Animated WebP images may appear as still (non-animated) images when opened in Gmail.
Gmail does not reliably support animated WebP files. When Gmail processes these images before displaying them, the animation may be removed, and only a single frame is shown.
Troubleshooting
To ensure animations display correctly in Gmail:
Avoid animated WebP images in emails.
Gmail may convert animated WebP files into static images.Use GIF for animated content instead.
GIF is the most widely supported animation format across email clients, including Gmail.Keep animations lightweight and simple.
Short, looping animations with fewer frames load more reliably and display more consistently.
Using GIFs for animation helps ensure motion is preserved, and your message appears as intended across Gmail and other email clients.
FAQ
Why do my product images from WooCommerce look blurry or fractured in Gmail?
This can happen if your WooCommerce product images were uploaded in WebP format, especially when they include transparent backgrounds. When these images sync into Omnisend, the original WebP version is preserved. Gmail may then convert or recompress the image when displaying it, which can result in blurring, pixelation, or fractured edges.
To resolve this, update the product images at the source in WooCommerce:
Remove transparent backgrounds, or
Replace WebP images with PNG or JPG versions
Once the source image is updated in WooCommerce, the corrected image will automatically sync into your Omnisend emails.
Can I prevent Gmail from changing my images?
No. Gmail controls how images are processed and displayed, and this behavior cannot be overridden.
Why do my images look fine on my website but not in Gmail?
Web browsers support WebP natively. Email clients, including Gmail, may change how WebP images are handled before displaying them.
Need further assistance? Feel free to connect with our Support Team via in-app chat or at [email protected].