BRHandling images in Outlook where dimensions are unknown
I've had this problem for a long while trying to handle images for Outlook where the image details are unknown. Why are they unknown? We are syncing product images from thousands of stores.
Things to know:
- Ratio could be landscape or portrait
- We can't detect the image size and this varies hugely
For the place we need it, we set a maximum width & height which works fine for everything except Outlook on Windows, because Outlook doesn't like max-width or max-height. Therefore we use one piece of code for images on Outlook where I fix the height with the height attribute (not css) and one for everything else using max-width and max-height. On Outlook, the "everything else" image is hidden.
The problem with Outlook is that fixing the height means that sometimes we get landscape images that could completely bloat the email width and I'm wondering if there's a solution that works with the constraints of ratio and lack of known image size. Any thoughts?
My compromise is either bloating the width with landscape or uneven heights between images if the image is portrait.
Here's the code I'm currently using....
<a href="https://www.google.co.uk" target="_blank" rel="noopener noreferrer" style="outline: 0px; border: none; text-decoration: none;">
<span class="outlook-hide">
<img class="product-image img-rsz" width="220" style="width:auto;height:auto;max-width:220px;max-height:330px;display:block;" src="https://cdn.shopify.com/s/files/1/0001/9857/4138/products/AACB3nw1jbnKw6QY5ecUlF70ltsSK_7HEE3O1WrXPpfrLgWKO6IFRQI9zU8gEDuIp1FWkXuTpuAm5liizKnMuY5MmPX6qDa7iqXd1oiNUMsrHtbWIHbixENhuQIuL5nwK7d_t-udEISPiH1e0qwHoCozyl4L0-gA6La7z1WTk4jgbHhy1B6Uv0qYihWTAYdSiVeNkkX2_480x480.jpg?v=1535005003" alt="">
</span>
<!--[if gte mso 9]><img class="product-image" height="220" style="width:auto;height:auto;max-width:100%;max-height:330px;display:inline-block;margin:0 auto;outline:0;border:none;text-decoration:none;" src="https://cdn.shopify.com/s/files/1/0001/9857/4138/products/AACB3nw1jbnKw6QY5ecUlF70ltsSK_7HEE3O1WrXPpfrLgWKO6IFRQI9zU8gEDuIp1FWkXuTpuAm5liizKnMuY5MmPX6qDa7iqXd1oiNUMsrHtbWIHbixENhuQIuL5nwK7d_t-udEISPiH1e0qwHoCozyl4L0-gA6La7z1WTk4jgbHhy1B6Uv0qYihWTAYdSiVeNkkX2_480x480.jpg?v=1535005003" data-similar-product="image" alt="" /><![endif]-->
</a>
Here's an improvement so we're only including image code once but wrapping a table to fix the height for mso images (based on 2x3 image ratio)- still not ideal as if you're using a landscape image, the cell height is quite large.
<a href="https://becs-conversio.myshopify.com/products/animal-print-hair-band-various-colours?receiptfultype=recin" target="_blank" rel="noopener noreferrer" style="outline: 0px; border: none; text-decoration: none;"><!--[if gte mso 9]><table width="100%" align="center" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td height="330" align="center" ><![endif]--><img class="product-image img-rsz" width="220" style="width:auto;height:auto;max-width:220px;max-height:330px;display:block;" src="https://cdn.shopify.com/s/files/1/0004/3283/2573/products/600_DB187_Hair_Band_Silver_Leopard_PrintPS_480x480.jpg?v=1519397701" alt=""><!--[if gte mso 9]></td></tr></tbody></table><![endif]--></a>Heya Becs,
So looks like you're using shoppify, you could try and fix the image widths with that.
I'm not tried that with shoppify before but works with other cdn's I've used, found a couple of articles that might help.
https://www.shopify.co.uk/partners/blog/img-url-filter
https://help.shopify.com/en/themes/liquid/filters/url-filters#img_url
Hi Mark, Shopify is just one of the stores types! We also have BigCommerce and WooCommerce stores
Knowing the width or height doesn't help with dealing with landscape/portrait issues either I don't think.
One image might be landscape, another portrait, side by side and the containing cell height must be the same (hence fixing the height with a table in Outlook). Because this is a product recommendation tool, the images are dynamic, the user doesn't touch them.