Skip to Content

Basics of Web Design
HTML5 & CSS3 Second Edition


Chapter 5 – Web Graphics Styling Basics

A key component of a compelling website is the use of interesting and appropriate graphics. This chapter introduces you to working with visual elements on web pages. When you include images on your website, it is important to remember that not all web users are able to view them. Some users may have vision problems and need assistive technology such as a screen reader application that reads the web page to them. In addition, search engines send out spiders and robots to walk the web and catalog pages for their indexes and databases; such programs do not access your images. Some of your visitors may be using a mobile device that may not display your images. As a web designer, strive to create pages that are enhanced by graphical elements but that are usable without them.

Optimizing a Photo for the Web

Free Graphics Tutorials

Often students need a logo banner or a button for their first web site project but have not taken any graphics courses yet. You can learn how to create a logo and button with the free tutorials below:

Free Image Editors

Free online image editor applications:

Free image editor applications to download:

Free Online Image Optimization Tools:

Round the corners of rectangular images:

Create an icon from your image:

WebP —A New Image Format

Google Labs has developed a new image format for the Web called WebP (pronouced "weppy") that improves compression on photographic images. Currently it's supported by Google's Chrome browser.

Chapter Updates

  • Page 146: In the last paragraph, the phrase "coords attriubte" should be "coords attribute".

Questions or Comments

The author would like to hear from you!
Feel free to complete the contact form with your questions or comments.

Book Cover

Share |