Melon Corporate Blog
Don’t squish! Resize! Images and Html Emails
How many times have you seen an image in an html email that just looks wrong… too many times! It may look streeeeeetched ... or sqshed!
This is because people have attempted to resize an image in an html program without actually resizing the image itself (gif, jpg, or png).
Html editors are partly to blame as they allow users to do this.
So instead of the actual image size changing, what is happening is the html is representing the image of one size, as another size. Kind of like trying to squeeze a kid that has grown into his old clothes.
If the "aspect ratio" (proportion between width and height) of the new resized image at least stays the same as the original image then the image will look ok but appear either crunched or stretched.
However when people resize images in an html program often the aspect ratio changes from the original image and the image looks quite different to the original image.
Below is an example of an image squished into an aspect ratio that doesn’t match the original image.
So if you need to resize an image into a defined space that has an aspect ratio different from your original image you’ll usually need to crop the image to fit.
If you don’t have an editing program such as Photoshop a solution to resizing and cropping your images can be found within your Microsoft suite of applications.
Have a look for Microsoft Office Picture Manager within your applications.
A step by step tutorial for resizing images can found here.
Make sure after finishing your changes you save using a new file name to avoid copying over your original file. Mac users can resize and crop using iPhoto which comes packaged with the Mac.
Blog Categories
Archived Entries
October, 2008September, 2008
August, 2008
July, 2008
June, 2008
May, 2008
April, 2008
March, 2008
February, 2008
January, 2008
November, 2007
October, 2007
September, 2007
Comments - oldest entries appear first, most recent entries at the end.
One other issue with HTML resizing is that the browsers do it POORLY! The images aren’t re-sampled by the browser and end up looking pixelated.
I see this all the time at my business where non-design people have shrunk 3mb images down and then wondered why the image a) looks terrible and b) takes forever to load.
They don’t realise that the browser is still loading the full hi-res image first, and then resizing it to display properly.
The BEST thing to do is use one of the programs you mentioned (if you don’t have access to Photoshop) and size the image correctly BEFORE placing it in the web page/email/whatever you’re sending.
For me this has meant teaching marketing people about pixels… but it’s worth it to save the hassle later on.
By Olin Schusler on 04 04 2008
Hi Fiona
Another good reason to resize images is that Outlook 2007 unlike Outlook 2003 doesn’t actually care if you have resized the images in the html or not, it shows the true size of the images.
So in your example above, it would show the large undistorted version.
We have had a few instances where clients expect the email to look one way, but when they test it in Outlook 2007 are surprised to see it displaying massive images.
So yes, resizing images properly is more important than ever.
Kevin
By Kevin Garber on 07 04 2008
Leave a comment:
All comments are moderated, name and email fields are mandatory, but only the name will be displayed in the comment, your email address will remain private, and will not be added to any lists. The requirement of the email address is to help ensure that the comments are being submitted by legitimate people.