Large Images reduced to small square in emails - increases readability

Hi

Can't see this elsewhere in the forum.  I subscribe to a number of newsletters to see what other people are doing etc.

I've seen a couple recently where they had large images in the emails, but with images *turned off*, the graphic with the 'X' in was reduced to small square which was great.  You could read the email without the massive space taken up by the proper size of the image.

Does anyone know how this could be achieved?

I looked at the source and the image width and height were there and there was nothing that jumped out.

Cheers

Alex I., 4 years ago

Hi Vine.

This is a great question. The way to do this is to not set a height on an image. This will force them to "collapse" when images are turned off.

I would urge you to keep the width's though as it may cause some spacing issues if you don't have image widths set.

For example; if you have a hero image that is 640 pixels wide and 250 pixels tall your code should look something like this currently:

<img src="images/heroimage.jpg" alt="Blah Blah" width="640" height="250" border="0" style="display:block">

Simple remove the height on the image like so;

<img src="images/heroimage.jpg" alt="Blah Blah" width="640" border="0" style="display:block">

This should fix the issue for you. It's good practice to do this as standard for images you'd like to collapse as almost all email clients automatically turn off images as standard.

If you need anything else don't hesitate to ask.

Cheers,
Alex.

vine, 4 years ago

Hi Alex

Thanks for your reply, i'll give that a go.

It certainly helps when viewing with images turned off.

Vine

Alex I., 4 years ago

Let me know how it goes

vine, 4 years ago

Hi

I noticed when testing it was fine across most platforms but on hotmail, there was a large placeholder for the image - even larger than the image.  This was when the container height (i.e. <td>) didn't have a heigh associated with it.

It's a shame as the technique was great for readability.

Vine

roshodgekiss roshodgekiss, 4 years ago

Hi vine, thank you for your observation here - that's a bit unfortunate. It's a seriously good heads up for others who may want to give this a go, though!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
vine, 4 years ago

I wonder if there is a way to speciify a min or max width to the containing element, So that it has a height of some sort but not the size of the image.  Back to the drawing board :-)

By the way I know big images are bad...  It's just that some customers have good lifestyle shots...

roshodgekiss roshodgekiss, 4 years ago

Ah, I wish - max-width and min-width support is pretty poor. I'll keep looking into options here, though!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098