Web Devs Should Use PNG Images

3704312555_1f9bf46220_o.gifHad a conversation the other day with a dev who thought my usage of PNG images in my designs was interesting. Actually it’s been so long since I used GIF I thought his comments were interesting.

PNG is by far a superior file type. Like all file types though, it’s all in you usage. There are three PNG file types, 32, 24, and 8. Each has a different compression ratio, suitable for different situations.

PNG-32 has the least compression, support for layers, index and alpha opacity and is the default image type used in some image editing software, like Adobe’s FireWorks.

PNG-24 has more compression, no support for layers. I use it for artwork with gradients in lieu of JPG.

PNG-8 has the most compression, the ability to limit the number of colors (just like GIF) and support for alpha and index transparency.

So, PNG-8 is used in place of GIF, and PNG-24 can be used in place of JPG. I find that the benefits of PNG-24 on photographic images does not supersede that of the trusty JPG which still provides a better compression, and thus smaller file size.

3705121536_325d3d98b5_o.pngPNG-8 however produces consistently smaller file sizes and greater clarity than GIF in images based on vector art.

So why didn’t PNG make a bigger initial splash in the web dev world? It’s because of Internet Explorer 6’s lack of alpha transparency support. Transparency was touted as PNG’s great benefit; and it certainly was the most exciting. IE6’s lack of support kept devs from making the switch en mass and they thusly disregarded the compression/file size benefits.

Take a look at the images included in this post. They are of a prime example, a logo created in vectors, lots of blocks of color.
  1. The first is the GIF (12.3k) 
  2. Second is the PNG.(10.2K).
You decide which you would rather use.

Custom Image Placement in Posterous

 

Screencapture_08_apr

Posterous has some wicked cool image handling capabilities. Just attach an image to your email to the service and it will get embedded in your post at the top of the content (example). Attach several images and Posterous builds a sweetly simplistic gallery for you at the bottom of your post (example).

But what happens when you want more control over image placement?

Moving Single Image or Gallery Placement

When you attach an image, or multiple images, a Posterous object is created and called into your post with some custom code. To move the image position you’ll need to:
  1. Login, via the web interface, find your post in question and click edit. 
  2. Once on the edit page, you’ll notice the advanced editor menu is available, click the far right blue “html” button.
  3. Inside the html code you will see something that looks like this: [[posterous-content:Y22oPHKFX11e6BY4miL5]]. That is the Posterous object code calling your image.
    NOTE: an image gallery will also use a single object code as well, more about that that below.
  4. Now you can cut and paste that code where ever you want it to appear in the post.
But what about positioning and margin? Simple as pie. Simply surround the Posterous object code with a <div style=”float:right;margin:1em;“> </div> and you are good to go. Modify the inline style as needed for your look.

Multiple Positioned Images

You will quickly notice, when you attach multiple files to your email, that Posterous doesn’t create multiple object codes for each image, but just one code for the gallery. To get around this and position individual images,

UPDATE: Roj commented below that you can include ((nogallery)) in the subject line of your email. This will cause Posterious to generate individual image tags for multiple images attached.

don’t attach your images in the email. Rather:
  1. Email you post copy first. 
  2. Upload your images to your own server, a CDN, or a service like Flikr. 
  3. Login to Posterous and edit the post html. Adding <img src=”http://my-img-url-here” style=”float:right;margin:1em;” /> for each image you want to include. Place the image tag where ever you need the image.positioned in the post.
Have any other Posterous tips and tricks? Please let everyone know by commenting below.