Skip to content

Updating mailer image from svg to png for Google#6892

Merged
peggles2 merged 2 commits intomainfrom
eric-google-mail-svg-hotfix
Sep 1, 2022
Merged

Updating mailer image from svg to png for Google#6892
peggles2 merged 2 commits intomainfrom
eric-google-mail-svg-hotfix

Conversation

@eric-gade
Copy link
Contributor

What

Google proxies images that are sent in html emails that it receives in
any of its clients. However, Google does not support SVG images in
html emails.

This caused us some problems when attempting to send a mailer with an
SVG image included, which worked in local testing (mailcatcher) but
failed in a broader integration test environment (INT), 404'ing on
Googles cached version of the image link.

This commit provides a plain png rendering of the original svg and
updates the relevant mailer template to display the png version. This
should get us past the Google problem.

-- What
Google proxies images that are sent in html emails that it receives in
any of its clients. However, Google does _not_ support SVG images in
html emails.

This caused us some problems when attempting to send a mailer with an
SVG image included, which worked in local testing (mailcatcher) but
failed in a broader integration test environment (INT), 404'ing on
Googles cached version of the image link.

This commit provides a plain png rendering of the original svg and
updates the relevant mailer template to display the png version. This
should get us past the Google problem.
@eric-gade eric-gade requested a review from a team August 31, 2022 21:24
changelog: Bug Fixes, Asset Hosting, fixing svg image asset in mailer
for Google proxying
Copy link
Contributor

@solipet solipet left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm!

Copy link
Contributor

@zachmargolis zachmargolis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

<tr>
<td width="140">
<%= image_tag('letter-warning.svg', width: 140, height: 140, alt: '') %>
<%= image_tag('letter-warning.png', width: 140, height: 140, alt: '') %>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we want to attempts any 2x versions of this image? or is too ambitious? 😜

@aduth
Copy link
Contributor

aduth commented Sep 1, 2022

Ah, whoops, I should have caught this, since I encountered the same issue in my recent email template revisions.

For future reference, this caniuse-like site is a great resource: https://www.caniemail.com/features/image-svg/

Copy link
Contributor

@aduth aduth left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two suggestions:

  • Can we remove the now-unused letter-warning.svg file?
  • Can we move the PNG into app/images/email, which was created for these assets, as a way to try to disincentivize using the raster version outside of emails?

@aduth
Copy link
Contributor

aduth commented Sep 1, 2022

Looks like we could also losslessly reduce the size of the PNG by about 18% using a tool like Squoosh (OxiPNG).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants