Menu
Hi everybody!
Been spinning my wheels a bit one for awhile and haven’t been able to solve this. Any help or insight would be appreciated! So where I’m at…
When html email displays on a desktop system, unscaled the “seams” between sliced images look fine. But as this same email is scaled down gaps appear between the images(see above image). If you scale the image down slowly in dev tools these lines will fade in and out. One of the reasons I suspect this being a sub-pixel issue…?…. When doing render test on Email on Acid or ReturnPath this issue tends to appear on mobile devices which have scaled the email down to fit on the screen. The code pen share link is below(linking functionality wouldn’t work, sry). If you set the view to “debug” & then enter the browsers dev mode & scale the view down you “should” see the white line affect I’m describing.
The workflow goes something like this. The email is designed in Photoshop, doc spec are 1080 X some random height, normally 4K to 8K. These images are then sliced in Photoshop(PS), exported out, then reassembled into multiple tables, images are wrapped in anchors for linking and placed in the <td>. In certain cases the <a><img> are all children in the same <td>… The html email width/max is 540px, all image assets that are brought it as set at half the value they were created in PS. All sliced/exported images are of even width/height to avoid any decimal values being set in the image dimension w/h attributes in the html.
In the html build there I think most of the recommended practices are being followed. The container tables width is set to 100%, content table is set at 540px, along with all its children tables. Each table has the attributes border, cellpadding / spacing set to 0. I have tried various css rules along with setting the background image via css instead of the image tag with the same results.