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.
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.
Thanks for your reply, i'll give that a go.
It certainly helps when viewing with images turned off.
Let me know how it goes
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.
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!
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...
Ah, I wish - max-width and min-width support is pretty poor. I'll keep looking into options here, though!