I have picture quality problems in my blog posts (Blogger.com), making the good quality picture in .jpg format, with normal compression for faster loading, and when I upload to my blog space I get a picture with low quality, high compression and many artifacts. So I tested uploads with different kinds of pictures (particularly JPG, PNG and GIF, also you can upload BMP or TIF picture format on your blog space) on different posts, with considering loading time, quality after uploading to blogger, transparent options, easy of use (transparent picture background is capable for taking your blog background if you use gradient backgrounds, for example) and widely use picture format like (mobile phones, computers, digital cameras..) I will try to explain basic features of picture file formats, not to be too much tech based.

JPG – is the most widely used picture format, you can take JPG pictures from your digital camera or mobile phone and post directly to your blog (see size limitations on your blog first), also you have different stages of compression so you can make a pictures with smaller size without visible quality loses on higher stages (from 8 to 12). Becouse picture is compressed it will load faster on the web. But what happens? Even if you set up your picture to good quality/size compression ratio, when you upload it to blogger for example, the service will compress it again, so you get high compressed picture with quality distraction.

So, do not compress your JPG pictures before uploading. Another negative point is that .jpg file format does not support transparency, so if you use gradient background on your blog it will be difficult to post jpg picture objects – for example different types of icons, artworks etc.. See picture examples. My recommends is to use JPG for big high resolutions pictures.

PNG – Biggest plus is Transparency. PNG’s compression is fully lossless so restoring and re-saving an image will not degrade its quality, unlike JPG. Becouse is lossless format the picture file has more size compared with same JPG image, especially for big resolution pictures.

My recommends is to use PNG for pictures, icons and artworks with transparent background and for quality based pictures on your blog. (Becouse your blog has not limited space and the internet connection is high today, this format is preferred by me.

GIF – is also widely use picture format, especially for web animations and mobile phones. The picture format has 256 color palette, so I do not recommend GIF format for high resolution pictures.

GIF support transparency but the pictures are not the same quality with PNG’s becouse of limited GIF color palette. My recommendation is to use on web menus, text, buttons, background pictures and other small pictures with basic colors.

Picture info:
1. JPG image 1000×750 pixels, BEST Quality (12) 72 dpi, size 769KB
2. JPG image 1000×750 pixels, Quality (8) 72 dpi, size, 172KB
3. PNG image 1000×750 pixels, 72 dpi, size 1.12MB
4. PNG with PNG transparent icon 500×375 pixels, 72 dpi, size 322KB

5. GIF image 1000×750 pixels, 72 dpi, size 391KB
6. GIF with GIF transparent icon 500×375 pixels, 72 dpi, size 110KB
7. JPG with JPG (not support transparency) icon 500×375 pixels, 72 dpi, size 76.8KB

Last picture – JPG image, quality (8) but with artifacts from upload compression process – look around the numbers and text! For that kind of pictures I recommend PNG format

If you want to convert your pictures on various picture format including JPG, PNG or GIF read more in this DetectorPRO article.

Tags | Blogger, Graphic, Howto, Linux, Mac OS, Photography, Windows