Learning Web Design, 5th Edition

Part V. Web Images

V

Web Images

23. Web Image Basics

23

Web Image Basics

In this chapter

Where to get images

PNG, JPEG, GIF, and WebP

Image and screen resolution

Web image production strategy

How to make favicons

Unless you plan to publish text-only sites, chances are you’ll need images. For many of you, that might mean getting your hands on an image-editing program for the first time and acquiring some basic graphics production skills. If you are a seasoned designer, you may need to adapt your style and process to make graphics that are appropriate for web delivery.

In Chapter 7, Adding Images, we covered the basics of embedding images in the HTML document, including the difference between bitmapped graphic formats and the vector-based SVG. This chapter covers the fundamentals of the images themselves. We’ll start by reviewing sources for imagery. From there, we’ll get to know the file formats available for web graphics to help you decide which one to use. We’ll look at image resolution and how it relates to the resolution of the screens on which they appear, including high-density displays. I’ll also walk you through a series of questions that will help you form a strategy for creating images for your site. Finally, the chapter wraps up with a quick Favicon how-to.

Image Sources

You need to have an image to save an image, so before we jump into the nitty-gritty of file formats, let’s look at some ways to get images in the first place. There are many options: ...