Top 4 tips for Image Usage in HTML Email

Another great post on Mike Kleiman's blog. This time he offers some great tips with regards to image formats, size, etc. Here are some of the takeaways:

• JPG’s are best for larger graphics that consist primarily of images, such as a masthead photograph. GIF’s are perfect for smaller items which contain less colour complexity and/or text – graphical buttons, for example.
• Avoid saving anything in a format other than JPG or GIF. Though you might be tempted to save an image as a PNG for the sake of maintaining opacity percentages – it’s not a good idea. They work, but your file size will be huge. Instead, try to find a workaround or a different way to lay out the design.
• the difference between saving a JPG at 80% quality in Photoshop as opposed to 40% is usually negligible. Tinker with it to see how low you can bring down the percentage before the image becomes distorted. A jump from 80 to 40 may only have minimal visual impact but can save you a lot in the file size department.
• Take a step back and figure out what needs to be an image and what doesn’t. Often using simple HTML and inline CSS can replace the need for an image.

Read more tips here.