screenshot-formatThe quality of screenshot images and illustrations used on your website can make a difference.
You may use the good-old Print Screen key or any of the professional screen capture tools to grab your desktop but the basic requirement remains same – the output image should be sharp and that the file size be well within a reasonable limit.
Now PNG, JPG and GIF are the three most popular image formats for sharing screen captures on the web. Of course there’s another format called BMP but people rarely use that for obvious reasons.
Text & Clipart – If you are capturing text (like a block of source code or Google search pages or a navigation menu), always use GIF or the PNG format – the screenshots are clear and file size remains pretty low.
text-screenshots
Regular Desktop Windows – If you need to screen capture a regular window on your screen, dialog boxes, Windows Explorer, DOS command prompt window, Google Maps or even splash screens – use the PNG format.
The advantage with PNG is that it preserves all the colors and yield a much sharper output when compared with JPG. See this Photoshop splash screen for a comparison between JPEG and PNG quality.
window-screenshot
Videos & Photographs – If you doing a still image screenshot of a video(YouTube Flash video player), Google Earth, video games, Flash animations, desktop wallpapers or photographs (like Flickr) – always go with JPG instead of PNG because the image file size would be smaller without much degradation in the quality.
To give you example, this Wall Strip video on YouTube would take around 92kb when saved in PNG format but that would fall to 20kb if we changed the format from PNG to JPG. Surprisingly, there isn’t any remarkable difference in quality.
video-screenshot