Search
Listen to this Post.

As I have eluded to in this blog in the past, if you don’t find me at my laptop working on designing maps or optimizing imagery, you’ll probably find me out on one of our area disc golf courses here in Southwestern Minnesota…enjoying what has to be one of the best sports ever invented! :) When the weather conditions are poor and/or time does not allow me to get out and play, however, sometimes the next best thing is hanging out at discgolfersR.us, a social network at Ning devoted to our wonderful sport. MANY thanks go out to Terry Calhoun, the brains and brawn behind the discgolfersR.us site…as it is FINALLY a place where all of us “addicts” can go to compare notes and learn about what disc golfers are doing in other parts of the planet.

discgolfersR.us is a WONDERFUL site! However, if it has one major flaw or shortcoming at the moment, it is the fact that anyone and everyone can upload imagery to the site without any controls related to image optimization (along the same lines as Flickr or eBay). People with little/no understanding of how electronic imagery works are uploading files with little/no attention being paid to image size, file format or optimization tasks. An example of that fact can be seen below:

Unoptimized .jpg graphic
Unoptimized 2424×2400 pixel .jpg graphic (displayed at 40×40 pixels) – 408 KB

Unoptimized .jpg graphic
Unoptimized 40×40 pixel .jpg graphic – 2,625 bytes

Optimized .jpg graphic
Optimized 40×40 pixel .jpg graphic – 1,837 bytes

The above example is a perfect illustration of what happens when you place nuclear weapons in the hands of small terrorism cells. ;) This graphic is intended to be displayed at 40×40 pixels, yet it has been uploaded to the ning server at 2424×2400 pixels…over 400 KB in size! Quickly converting that image to the proper 40×40 pixel dimensions immediately reduces that image down to 2.56 KB, and a bit of additional optimization work in xat.com Image Optimizer further reduced that image down to 1.79 KB…an improvement of 99.6 percent. For every three visitors to the discgolfersR.us web site, over 1 MB in bandwidth could be conserved.

Additional optimization opportunities exist as well! Below are just a few more examples of this fact:

Unoptimized .png avatar
Unoptimized 128×128 pixel .png avatar – 43,101 bytes

Optimized .png avatar
Optimized 128×128 pixel .png avatar – 1,172 bytes

Unoptimized .gif graphic
Unoptimized 14×532 pixel .gif graphic – 2,393 bytes

Optimized .png graphic
Optimized 14×532 pixel .png graphic – 1,735 bytes

Roughly two minutes of effort on the above two graphics takes 44.4 KB in file size down to 2.83 KB, an improvement of 94.6 percent. With hundreds/thousands of daily visitors to this particular social network, it doesn’t take much to imagine how a little effort along these lines will make an enormous positive impact…not only for the visitors of the discgolfersR.us site, but also for the folks who manage all of the server space on the Ning network. I know Terry, so maybe I can convince him to let us “tinker” and serve as a bit of a watch dog related to the imagery that is uploaded to the site! Anything I can do to help make one of the coolest online hang-outs for disc golfers out there just a little bit better would be an honor.

Print

3 Responses to “discgolfersR.us (.jpg/.gif/.png)”

    [...] datonn created an interesting post today on discgolfersR.us (.jpg/.gif/.png)Here’s a short outlineAs I have eluded to in this blog in the past, if you don’t find me at my laptop working on designing maps or optimizing imagery, you’ll probably find me out on one of our area disc golf courses here in Southwestern Minnesota…enjoying … [...]

    Hey, if you wanted to write a brief FAQ about optimizing images, aimed at newbies, I would be glad to create a “Notes” page for it. The way the network is set up, deliberately, I can delete other peoples’ things but not edit or change them.

    I suppose if I were to try and put together a quick “Optimization 101″ type of guide for newbies related to electronic imagery, I might say something like this:

    Optimal file formats to use with your imagery:
    – .jpg for photography
    – .gif for animated non-Flash files
    – 8-bit .png for all static, drawn imagery

    Quick/Easy methods for reducing an image’s file size:
    – Save any photo/graphic/video at the exact dimensions in which you intend to have displayed within a web page…rather than simply altering the “width” and “height” code in your HTML or proportionally stretch/shrink an image in your WYSIWYG editor.
    – Remove any excess colors when exporting into display on the web. For example, some logos might only use 6-8 colors, but many/most design programs will save them for the web at full 8-bit (256 color) output. Reducing from 256 colors will save a great deal of file size, when applicable.
    – Avoid the use of interlacing (.gif/.png) or progressive encoding (.jpg) when creating your web-based imagery. Using those techniques will slowly bring into focus images on your pages…but add extra image file size as a result.

    Free Tools for Optimizing Imagery for the Web:
    – .jpg (ImageMagick, PureJPEG*)
    – .gif (GIF Builder #, SuperGIF: unlimited trial is free)
    – .png (ImageMagick, PNGOUT*, PNGSlim*)

    * – Windows / Command Line only
    # – Mac only

    If folks on ANY site could simply stick to those general rules and tools, all of our web sites would be a much, MUCH better place! Hope that helps.


This site is protected with Urban Giraffe's plugin 'HTML Purified' and Edward Z. Yang's Powered by HTML Purifier. 6555 items have been purified.