lynx picture  

CancerLynx - we prowl the net
July 2, 2007

Web Graphics
Website Creation Tips and Tricks for Publishing.
Alexandra Andrews and Lydia Idem



Graphics

Monitors are coming in all sizes and types of CRT (Cathode Ray Tube) and LCD (Liquid Crystal Display). The days of writing a website to only a 15" CRT are over. The goal is to create sites that are fluid and will display anywhere. If you are using a 27" monitor to design, test out the website using different monitors and resolutions.

Lydia: As monitors become larger (those greater than 15"), the resolution increases, which means that more pixels can be squeezed onto the screen than ever before and this is beginning to affect graphics (and consequently graphic web design). The graphics are rendered differently because graphics are measured by the screen in terms of pixels - the same measurement used to size monitor screens. If we can now fit more pixels on the screen, then graphics and images begin to appear smaller on larger screens because of the increased screen resolution even though the actual image size remains constant. Thus, graphics and images appear larger on smaller screens because of the decreased screen resolution even though the actual image size remains constant. If you don't believe me, open this article on a computer with a larger 21" monitor if you have access to one. You will see the difference.

Also keep in mind, that monitors include computer monitors, televisions, plasma televisions, high-definition (HD) televisions, cell phones, laptops, PDAs, car navigation systems, and kiosks. As Alexandra said, "The days of writing a website to a 15" CRT are over."

In creating a graphic for the web, you want to have the size as small as possible. At one point one could trust the Adobe save for the web option to create a compressed graphic that would be smaller and load quickly. However, we have discovered this is no longer true. Because of Adobe's many extra comments in the file info, graphics are now bloated and huge. Using the GIMP (GNU Image Manipulation Program) one can get a smaller, leaner graphic that loads quickly.

Examples

For the following we used, Adobe Photoshop CS2 on a Power Mac G5 and GIMP 2.2.10 on SUSE Linux Enterprise 10. We saved the original graphic as a PSD(Photoshop Document).
Now look!

Graphic sample saved as a  gif using Adobe CS2 on a Power Mac G5
First saved as a CompuServe GIF (Graphics Interchange Format) an 8-bit-per-pixel bitmap image format, using Adobe Photoshop CS2 on a Power Mac G5
File size 171KB
Graphic sample gif using Adobe save for the web option
Graphic sample gif using Adobe save for the web option
File size 398 Bytes
Graphic sample gif using the GIMP
Graphic sample gif using the GIMP
File size 388 Bytes
Adobe save for the web requires a two step process. The GIMP is a one step graphic creation. Both of these samples are similar in size.

Next, the same example using JPG/JPEG (Joint Photographic Experts Group)

Graphics Sample using Adobe Photoshop CS2 saved as a jpg
Graphics Sample using Adobe Photoshop CS2 saved as a jpg
File size 36.0 KB
jpg graphic example using the save for the web option
jpg the save for the web option
File size 5.23 KB
jpg graphic example using the GIMP
jpg example using the GIMP
File size 2.21 KB

The Adobe graphic is 42% larger in size than the comparable GIMP graphic

Next example, an original jpg desert photograph, 2597x1900 pixels, file size 1.48 MB.

jpg Desert photograph saved in Adobe Photoshop size  200x150 pixels file size 59.9 KB
200x150 pixels jpg desert photograph saved with Photoshop
File size 59.9 KB
Same desert scene saved in Photoshop using the save for the web option file size 11.7 KB
200x150 pixels desert scene saved with Photoshop using the save for the web option
File size 11.7 KB
jpg desert scene example  using the GIMP  file size 9.20 KB
200x150 pixels jpg desert scene saved with the GIMP
File size 9.20 KB

There is an 8% difference in the above examples.

We also ran the following tests saving the original desert photograph of 2597x1900 pixels as 400x300 pixels with the following results.

Desert scene saved in Photoshop
400x300 pixels desertorig_400.300.jpg RGB File Size 117KB

Desert scene saved in Photoshop using the save for the web option
desert400.300_saveweb.jpg RGB 1 layer File size 76.7 KB

Saved using the GIMP
desertgimp400.300.jpg File size 21.9 KB

In the larger graphic comparison the difference in file size is 29% between the Adobe save for the web option and using the GIMP. Clearly, GIMP is the tool to use for web graphics that load quickly and speedily.

Alexandra - Having just spent days trying to make decent looking buttons for CanceSupportiveCare.com/5index.html - take this advice. I had been told, when doing lettering it is a good idea to use a vector based program. This avoids the jagged bitmap problem. Too True!

You might ask why we are not discussing saving in PNG (Portable Network Graphics) a bitmapped image format that employs lossless data compression. This option is great, if you are certain about your users, platforms, browsers and OS (operating system) - an intranet. Not all devices support png. Thus for the largest audience where you do not know what device is being used to view your website, the older graphic extensions of jpg and gif are safest.

Lydia: I just finished working with PNG. If you haven't noticed by now, though Alex and I agree on most issues, I tend to be more liberal in web design. So I decided to give PNG a try. It does produce much nicer looking graphics than GIF especially if you want to use a transparent background (which is only supported by GIF and PNG). With these great attributes, I decided to try it for this new website I am working on. I thought it would be fine because the website uses a lot of Flash and video so I figured the audience will be using the latest browsers that support the most recent version of Flash Player.

I created the graphic header which looked terrific as a PNG file because I needed the background to be transparent. HA! I was so surprised when my client viewed the website and called me asking me if I had put a background color on the graphic. He viewed it once before on Firefox but was viewing it again from work on Internet Explorer. He said he saw a light blue background (and keep in mind the website colors are orange and yellow and he saw the Flash video playing just fine). Needless to say I changed the file format of that graphic from PNG to a GIF immediately after he told me. When he saw it again, he was pleased.

I like the graphic quality and size that PNG produces. Unfortunately, it is not widely supported enough by the browsers to be considered seriously for effective web design.

Have you read the previous Website Creation Tips and Tricks for Publishing articles to prepare for your website?
Getting Started with Websites
cancerlynx.com/webhost.html
cancerlynx.com/font.html
cancerlynx.com/design.html
Accessibility, Usability, and Navigation
cancerlynx.com/navigate.html

Alexandra Andrews is a Linux Webmaster for many websites including CancerSupportiveCare.com, CancerLynx.com, and CancerLinks.com
Lydia Idem is currently a professor at California Design College and Webmaster for BlackTree Media (www.blacktreemedia.com and www.blacktree.tv).


You are welcome to share this © article with friends, but do not forget to include the author name and web address. Permission needed to use articles on commercial and non commercial websites. Thank you.

Search CancerLynx

one pawprintCancerLynx.com one pawprintWhat do you think? one pawprintTop of Page

kitten picture