This site will look much better in a browser that supports web standards, but it is accessible to any browser or Internet device.

putting photos in Blogger pages

Putting photos in your blog




I sympathize with Blogger. They got lots of stuff to host for free. Compression is integral to their business model. I still want my stuff to look better than their default. For free. Here's how I do it.

I resize most images destined for web pages at 500 x 375, Flickr's dimensions. MIPS, drive space, RAM, pixels; no such thing as "too much". Better to downsample than upsample.

When I write a blogspot entry that will include a photo I select Add image... and browse to my JPG with None for layout and Large as my image size.

What I get squirted into my page is this:

  <a href="http://bp0.blogger.com/_xKJDrAiSZww/R5mFaJ29pDI/AAAAAAAAAB8/OdAjF3JBVhE/
s1600-h/DoubleIncenseBarcodes.jpg">
<img style="cursor:pointer; cursor:hand;" src="http://bp0.blogger.com/_xKJDrAiSZww/R5mFaJ29pDI/AAAAAAAAAB8/
OdAjF3JBVhE/s400/DoubleIncenseBarcodes.jpg" border="0"
  alt=""id="BLOGGER_PHOTO_ID_5159301532499158066" /></a>

Now I edit it into this:

  <img src="http://bp0.blogger.com/_xKJDrAiSZww/R5mFaJ29pDI/AAAAAAAAAB8/OdAjF3JBVhE/
  s400/DoubleIncenseBarcodes.jpg" width="400" height="300" alt="Double barcodes on incense"
  hspace="0" vspace="0" border="0" align="middle" />


I keep their filename and path in my img src. A width and height of 400x300 gives the best results in light of Google's compression. I'm old school (read: XHTML) so everything is in lowercase and I use hspace/vspace/border. Set your alt tag to something meaningful and useful. Think visually challenged as well as spider bait.

As always YMMV.