Choosing The Right Image Format Will Make Your Pages Prettier And Load Faster

While waiting for Streamyx’s arrival to my home, I’ve been logging on to the Internet occassionally using TMNet’s 1315 dialup service. Man, it’s a hellish experience! At 33.6kbps everything takes ages to load and I’m merely visiting web sites!

I tried to visit some friends’ blogs and just couldn’t believe how bloody long it took to render the pages! After a while, I started to wonder how long would HTNet take to load on dial-up connection and I took a peek. I’m glad to find out that it loads pretty quickly.

Optimizing your web site’s loading time isn’t difficult; it’s mostly an excercise of common sense; smaller pages load faster. Hence, we should make our pages as small as possible without sacrificing the information we want to present on them.

When it comes to load time, images are undeniably the biggest culprit. However, in this multimedia age, using images is an almost unavoidable excercise. The key to using images efficiently is to select the right image for a particular purpose.

When choosing an image format, we basically have three popular formats to choose from: JPEG, GIF and PNG. Each format has its own strength and weaknesses:

  • JPEG
    • Excellent for rich coloured images
    • Decent file size compression to quality ratio
    • Doesn’t support animation
    • Doesn’t support transparency or alpha-blending
  • GIF
    • Small file size
    • Supports transparent regions
    • Supports animation
    • Limited colours (supports up to 256 colours maximum)
    • Doesn’t support partial transparency or alpha-blending; making transparent regions look chipped and unsmooth
  • PNG
    • Can be in true or indexed colour format
    • Supports true transparency and alpha-blending
    • Cannot be animated
    • File size can be big
    • Cross-browser support is an iffy deal (especially when it comes to Internet Explorer)

So what functions suit which format? There’s no hard and fast rule when it comes to this issue. However, from my experience JPEGs are best suited for photographs and images with vibrant colours. GIFs on the other hand are ideal for animated icons that brings attention to nearby text content.

PNGs are my preferred choice when it comes to background images and logos; especially when full or partial transparency is involved. By overlaying PNGs on top of one another, you can achieve pretty stunning visual effects! Better still, most modern browsers support PNGs much better than in the past.

As an owner or maintainer of web sites, one should always experiment with these three formats to get the best visual representation at the smallest size possible. Play around with indexed vs true colours, compression rates and image dimensions. Explore the capabilities of each image format and you’ll make better decisions when it comes to using images in your web pages.

Do you like this post? Please share it with others using the Share It icon below. You should also subscribe to HTNet’s feeds to be notified whenever I post something new.

You can read more about these image formats on Wikipedia:

11 responses to “Choosing The Right Image Format Will Make Your Pages Prettier And Load Faster”.

  1. Kay Kastum Says:

    Yep. makes lots of difference when you try out different files for your site.

  2. Site Admin Azmeen Says:

    Well sometimes the visual differences are not much, but the file size can be significantly reduced!

  3. ethel Says:

    I used to love using PNG formats for my header, it makes the graphic looks nice without any distorted pixels. GIF are a no-nos for a large header. It breaks the pixels giving you a super distorted images!

    But then.. I noticed that those PNG header file sizes are BIG! So I resorted to using JPG for my header. It’s much more smaller than PNG files. Well, JPG header normally gives u a distorted pixel look, but thank goodness for Photoshop, there’s a way to save JPG files which WONT distort the image at all. 😀

    Eh, do I make any sense to you? Sorry ar.. got carried away. Haha!

  4. ethel Says:

    Oops. I hit submit and cancelled it before it went through, because I wanted to edit the comment. Alamak! Now dah spam!!

    Could you remove my first comment? That was the non-edited version. 🙁

  5. Site Admin Azmeen Says:

    ethel,

    Deleted…

    You gotta teach me the non-distorting Photoshop JPG saving magic 😉

  6. Foreign Beauty » Choosing The Right Image For Your Blog/Web Says:

    […] posted an interesting topic on choosing the right images for your page that caught my attention. Since designing is one of my hobby, I’d like to post something in […]

  7. Limitless Says:

    Hi! Those are really good tips, nice article! I really enjoyed reading it. I’ll be checking your site more often 😉

    Limitless

  8. vetweb Says:

    awesome article! PNGs always the best option to display high quality graphic within a fast loading website

  9. CAP Marketer - 8 conseils pour optimiser vos templates Joomla Says:

    […] connaître les différents formats d’images (PNG, JPG ou GIF) pour les utiliser à bon escient (cet article pourra vous y aider). Pour convertir vos images, vous pourrez utiliser un éditeur comme The GIMP […]

  10. MonkeyfishMarketing Says:

    Hey what a great site i found it on Tyler Longren the man from slackware. I just booked marked the site and will pass the link to our web guys maybe learn some extra stuff. Great blog great info 🙂 .

    Phill

  11. pinnacleinternet Says:

    I agree with three formats and the faster loading you make your website, will improve rankings on search engines as they now take download time as one factor in ranking your website.