Managing Images and Photos on Blogger
When I tried to place an animated image into a recent blog post, I learned that Blogger isn't timid about modifying the images I upload. I naively expected Blogger to keep the file intact, but I pretty quickly learned that it converts all images to PNG format, and it scales images to a smaller size if they are too large. The moral of the story is that you can't count on Blogger to take care of your image files. You'll have to put in a little extra work to keep them in shape.
First of all, blogger converts everything you upload to the PNG file format, and looses the animation in the process. That's true even though the filename ends with ".gif". For example, this little guy started out as an animated GIF. But when I uploaded the file, blogger converted it to a static PNG image (even though it still had the GIF extension).
Firefox shows the true format if you right-click the image and choose "Properties":
Secondly, blogger reduces the size of large images that you upload. The dialog box above is 400 by 147, but it started out on my computer as 642 by 236. That means some of the detail is lost. If you zoom in on that image, you will find that the text isn't any easier to read. And if it were a family photo, you wouldn't be able to get a better look at how I've aged over the last year.
What to do?
If you simply upload to blogger, then you give up control. Most importantly for photos, you will not be able to see high-resolution versions. To avoid those limitations, you can upload your images to a photo sharing site and then link to them in your blogger post. Fortunately, there are plenty of free options for hosting images:
- flickr is a very popular site. They host millions of photos.
- photobucket seems like a popular option for blogger folks.
- google docs really isn't designed for photo sharing, but lets you upload files. Just be sure to "share" the file so that people reading your blog can get them.
No matter which service you use to host your images, once you have them uploaded, you can use the "Insert image" option right here in the blogger editor to include it.
You should link to a small version of the image, and then make the image a link to the page that has the larger sizes. This photo is an example where I used the "small" image from flickr, and changed the link to go to the image page itself. I have to admit it takes a little fussing around to get this right. But now that its done, you can click on the photo to take advantage of the features that flickr offers.
Related posts: