(Published Online: 3rd September 2007)
Before you EXCITEDLY send out those pictures
to the email boxes of all your contacts, PLEASE do them the
favour of REDUCING the image file sizes via web optimisation
using your graphics software.
Three Web-Relevant Graphics File
Format Acronyms And Their Meanings
In case you are unfamiliar with the
subject of graphic file formats, I provide brief descriptions
of the three main graphic file formats used on the web, and
which I have mentioned at least once in the body of this article:
a). JPEG means
"Joint Photographic Experts Group" : useful for
displaying "photographic or continuous tone" images.
b). GIF means
"Graphic Interchange Format" : useful for displaying
images with large areas of flat colours(e.g logos, icons,
and navigation buttons).
c). PNG means
"Portable Network Group": An improved replacement
format for GIF.
I Now Describe How You Can Proceed
Below, By Making References To A Personal Example
1. Load the
graphics editing software on your PC (If you have none,
ask around for advice from people who know, about which one
to buy - and where . It won't take you long to find someone
who can help).
Note: in this example, I
use Adobe Photoshop 7.0.
2. Click
"File-Open" in Adobe Photoshop, then use
the "Open" dialog
box that appears, to navigate to the folder/location of the
image(s) you wish to optimise.
Note: In my case, sometime
ago, it was a JPEG graphic of the front cover of my ten ways
manual (the Self-Development
Bible™) that I had designed for screen printing
onto T-shirts I intended to print for sale locally. The
initial file size was 1.8MB approx.
I call it up into Photoshop using
steps 1 and 2 above.
3. Once it
opens, I click "File-Save For Web..." on
the main menu and a "Save
For Web" dialog interface appears.
4. Looking
at the "Settings" panel to the top right,
I notice that the JPEG setting
(which can be any one of four possible settings for "desired
image quality" namely: Low,
Medium, High & maximum) is currently set to "Maximum".
A display on the bottom left of the image
reads "JPEG (indicating the image's
file format), 1.653M (indicating the displayed
image's size), 603 sec @ 28.8Kbps (indicating
estimated image download/view time at 28.8 kilobyte per sec
internet connection speed).
Remember : Your purpose is to
bring the image size(& by implication the download/online
display time) as low as possible without significantly losing
image quality.
You need to understand graphic
file formats to do this right. To learn the
difference between the different graphic file formats and
when it is best to use each one, press F1 in photoshop and
click "search" on the browser based help interface
that appears, then type "About file formats", and
click "Search".
The results page that appears to the
right offers - among other things - links to explanations
about different file formats. Also there is a link that leads
to information about "choosing a Web optimization format".
Explore the links and you should soon
be familiar with why JPEG is often the preferred format for
web optimisation of photographic images etc.
NB: Another way to learn about
the different graphic file formats (such as JPEG, GIF, and
PNG) and when best to use EACH is to do a search on the web.
5. Next I
click the graphic file formats selection drop menu and choose
"Medium". The interface soon changes, and
the resulting image display quality still looks acceptable.
So I check the bottom left display which now reads: "JPEG
(for image format), 339.9KB (for
the optimised image's
size), 133 sec @ 28.8Kbps (for the optimised
image's download time at 28.8 kilobyte per sec internet connection
speed).
Doing a quick calculation, I am
pleased to discover that I have achieved a MASSIVE 81.7% file
size reduction (from 1,800KB to 339KB!) using this quick and
easy process, without impairing displayed image quality.
Now imagine if I had six(6) such files
to email to my friends. Rather than slam their mail boxes
with 10.8 MB worth of picture attachments,
they will only have to contend with approximately six files
totalling 2 MB altogether(!) - each of which
would take about 122 secs to download at 28.8kbps. But it's
actually likely to be BETTER than that because in reality,
the simplest/most basic net connections today run at 56kbps
and higher, so that it would actually take 60 seconds or less
to view the optimised images!
6. Next I
click the "Save" button to accept the optimised
image, navigate to the desktop using the "Save
Optimised As" dialog box drop menu, add "_optimised"
to the default filename of the image and click "Save"
to store the new image to the desktop, where I will later
find it and send it as an email attachment to an acquaintance
for his comments.
Note that not only does the optimised
image look almost (if not just as) clear as the original,
it also has the exact same dimensions, so nothing really is
lost - at least to the human eye, which is the benefit of
the lossy compression format called "JPEG".
Summary
Many people come online in a bid to quickly
check their mails or find some information or upload some
data etc. Quite often, this causes them to have little time
or patience to "WAIT" for top- heavy web pages or
"fat" images to download.
As a result they tend to be "click-happy"
- and if your pictures take too long to appear - could "click
away " to do other more pressing things (possibly promising
themselves they will come back another time to view the lovely
pictures - but often "forgetting" to do so).
If you really want people to take time
to look at the pictures you send to their email boxes, make
the extra effort to optimise those pictures(using any good
graphics application) for quick/easy display on the web.
Most good graphics editing software will
offer something similar to Adobe Photoshop's "Save for
Web" tool. Play around with with your program a bit,
read up the instructions provided in the Help section, and
you should soon be up to speed with making your pictures/images
web optimised AND viewer-friendly :-) 
|
