11 November 2008
HTML and Images          
No, this is not CAD related, but I know a lot of CAD users dabble in other things like website creation and maintenance, specifically HTML code.

With regard for the subject, I ran into my #1 pet peeve again today, SCALED DOWN IMAGES. Note: I am not on the fastest broadband connection in the world, but I'm not on the slowest either.

I am not going to mention this particular web site, but on the main page they have a banner image that is displayed at 1038px x 146px, and its file size is 159kb. The actual image is 1920px x 240px. I copied it, scaled it to 1038px x 146px and the image size is now 38K, or about 4X smaller.

Same site, same front page, there is a 374px x 245px, black and white image, and its file size is 51kb. It is also scaled down, to 167px x 125px, and it also happens to be a B/W image (not greyscale) but its color depth is set to 24-bit. If you reduce the color depth to 1-bit, and save it as a .PNG file, the file size is now 1,498 bytes, or about 34X smaller.

One main feature of this particular website is to inform its readers about upcoming events. Do they use a graphical calendar? No. Do they have a paragraph in the middle with a date highlighted in red? No. What do they use? Would you believe MARQUEE text? MARQUEE text was cute in 1995, and it didn't last that long. It is so annoying and worst of all in this case, you have to wait about 45 seconds to read the entire paragraph of information, since it is scrolling by.. Good grief...

So I follow a link on this website and it takes me to another page that contains 54 images. The first one on the top is 798px x 598px, but I notice it is loading REAL slow... I check the properties of this image and of course, its real size is 3264px x 2448px and its file size is a whopping 3.02MB (A scaled down version saved is 145kb). It took 2 minutes and 12 seconds to download and display this page. Nobody is going to wait that long to see your 54 photos.

In summary...

  • Do not use HTML to scale your images down
  • If a photo is B/W, save it as such.
  • Do not use MARQUEE text
  • Do use PNG or JPG depending on the application
  • Do test your webpage from various connections after you are done. Just because it loads fast on your Intranet doesn't mean it is good enough for the average Joe out there on a DSL connection.

One more thing... When I go to bookmark this page, its title is "HOME PAGE". Won't help you much when you are searching bookmarks later that month...

Labels: ,

PermaLink       Posted 11/11/2008 09:22:00 PM     

Comment from: Blogger Rockmaster
Date: November 14, 2008 at 3:47:00 PM CST  

I totally agree with you on this post. Another reason to not use HTML to scale images down is that a browser usually does a poorer job, quality-wise, than most image editors.

Post a comment