Jul 14 2011
We’ve all received emails with images embedded in them only to have them not display correctly. These images are often blocked by email clients which filter the images for fear that they have malicious code associated with them. The result is an email that’s sent with professional stylized images but is received with that unmaintained website look. You know the websites that have frames for images that have long since been deleted or moved. Images that don’t display properly is the tell tale sign of a website that hasn’t been updated in a while.
What people want when they send images is for them to be received and viewed. Oftentimes these are simple logos in their signature. Now there’s a way to get those images to show up correctly, regardless of whether the email provider displays them. You can do so by converting them to HTML and CSS. This will have the same visual effect as the original image, but it’s presented in a form that the email clients will display.
The next question becomes how in the world does someone convert an image to CSS/HTML? The answer is with tables. What you do is create a table of 1 by 1 pixel cells with no spacing and padding. Each then needs to be given inline styles to represent the background color. So if you have a 100 by 25 pixel logo you’ll need 2500 pixels to identify and convert it to a large block of HTML. A power user tip is to zoom in on each pixel and use a color picker to identify the exact value of that cell’s color.
Fortunately, this is the type of task that can be automated. Rather than going through each pixel one by one you can have a program do it. That program is Img to CSS, which converts your images to stylized HTML and CSS. It will convert your images to exact replicas. They can then be placed anywhere on the web or in your emails.
Using Img to CSS is easy. Just upload an image file or point to a location online and it will return the code. It does in seconds what would have taken someone years to do on their own. Accepted image types are PNG, JPEG, GIF, BMP, TIFF, and ICO. The code can then be embedded where you want it. It works great and looks exactly the same.
The main caveat is that the larger the file the longer the HTML code snippet. In my testing I uploaded a 100×400 image file. Img to CSS converted it just fine but email servers may not. The code for my test was upwards of a quarter million characters which may be too long. Using a smaller logo is suggested. The other thing to be aware of is that transparency isn’t supported. To accommodate for this you can enter in a background color for your image which will replace the transparent parts.
The other feature with IMG to CSS is their API. Here you can programmatically convert images to HTML/CSS. This could be useful if you run a website and want to convert images before posting them or if you manage large email marketing campaigns. Details on the API can be found here.
Converting your images to HTML/CSS can be very useful. Any time you’re having trouble with images being displayed you can use it. Img to CSS comes with a free week long trial and is $5/month after that. It’s the easiest way to convert images to HTML/CSS so that they will display correctly no matter where you place them.