Welcome to WebmasterWorld Guest from

Forum Moderators: mack

Message Too Old, No Replies

Graphics Primer

6:27 pm on Jun 5, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 23, 2000
votes: 0

Graphics Primer

(Related Forum – Website Graphics Design & Usage [webmasterworld.com] )

Graphics are a basic component of a good website. They engage the viewer and may be the first element that influences a visitor to remain on or flee from your Internet property. While not always true, sharp graphics contribute a sense of professionalism and authority to your site. Mis-aligned, fuzzy, or gaudy images tend to scream at the user to leave and find the next site on down the line.

Skillful use of web graphics include a knowledge of image formats, image size, and how the graphic is to contribute to the purpose of your website. Here are a few tidbits to get you going.

Image Formats

GIF – An 8-bit file format with a maximum of 256 colors. This is a good choice for images with sharp edges and few complex color variation.

JPEG – 24-bit file format that handles millions of colors. This format is a good choice for photographs and images with many color variations. This is not a good choice for images that contain text due to its tendency to leave artifacts around sharp edges when compressed.

For more on image formats, see: [htmlhelp.com...]

Image Size

Due to bandwidth constraints on Internet connections, it is still essential that a website loads quickly. Images can greatly slow down the load time of a web page. Try to achieve the smallest image size possible while still maintaining image quality. Some techniques to get a smaller image size is to reduce images to 72dpi, slice large graphics into several smaller parts and rejoin through HTML coding, reduce the size of an image by cropping/resizing/both, and compress the image in your graphics program. You can read more information here on compressing graphics [webmasterworld.com] and this thread for a discussion on image size and page loading speed [webmasterworld.com].

To create and manipulate graphics, you need software. Below are a few suggestions on free utilities to manipulate existing graphics and programs that will help you create images on your own. Don’t forget to read the help files if you download a program. They often give you vital tips on graphic design as well as help you find your way around an otherwise frustrating piece of software. Also see Webmasterworld Members’ software recommendations [webmasterworld.com].

Free Utilities

Modify graphics, cut down on image size, save in different formats, cut and crop, and make slideshows.

Irfanview [irfanview.com]
Other recommended programs [webmasterworld.com]

Image Creation

Paint Shop Pro [jasc.com] – Many professional tools for under $100
Adobe Photoshop [adobe.com] – Industry standard of excellence but very pricey.
Fireworks [macromedia.com] – Another popular tool but also expensive

If you would rather not mess with making your own graphics, there are many places on the Internet where you can use photos and graphics for free,

Free icons [iconbazaar.com]

WebmasterWorld member recommendations for free photos [webmasterworld.com]

WebmasterWorld member recommendations for free clip art [webmasterworld.com]

Once you get the basics of graphic creation and manipulation down, check out some of the threads below that will help fine tune your graphics skills:

Manipulating background color [webmasterworld.com]
Software for banner design [webmasterworld.com]
High resolution screen shots [webmasterworld.com]
Creating curves on images [webmasterworld.com]
Images that gradually fade [webmasterworld.com]
Working with color combinations [webmasterworld.com]
Small text in graphics [webmasterworld.com]
How to bend type [webmasterworld.com]
Is the web safe palette dead? [webmasterworld.com]

[edited by: JamesR at 6:51 pm (utc) on June 5, 2002]

6:49 pm on June 5, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 6, 2000
votes: 0

Great starting point, JamesR! Thanks. :)
7:41 pm on June 5, 2002 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fathom is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:May 5, 2002
votes: 109

Thanks JamesR,
I'll be a great fan!

Hmmm... Ok, a nightmare at times, but I know you'll just love the challenge!

Recently (yesturday) had huge, I mean [big]HUGE[/big] disagreement for a site with the designers. So without going into the outcome, JamesR, your last thread post "web safe colors" was the primary topic..."outdated or not"?

The Site - purely an e-commerce point-of-sale "amazon" style. This site is feed by 6 other "information" media rich sites to motive the need to buy and seamless linkage to come here to this site.

The e-commerce has no need to upsell or produce the "WOW" since a visitor arriving here has made at least the initial action "to head for the check out line".

Assumption - consumer focus must now change from motivating through benefits to reliability of customer service and fulfillment services.

Therefore the primary purpose of this site is -"very fast loading", "reliable, easy transaction processing" and CRM door openings for quick access and promoting to returning customers.

Now in this context - what advantages does web safe color schemes give? Is there any advantage at all or does this just limit some other aspect that may not be currently in the mix?

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members