Learning Web Design, 5th Edition

24. Image Asset Production

24

Image Asset Production

In this Chapter

Selecting web file formats when exporting

Binary and alpha transparency

Producing responsive images

Image optimization tools and techniques

In the previous chapter, you learned a lot about images, but now we’re going to focus on making them. Because images typically make up 60–70% of the data on the web, it is critical to approach image creation thoughtfully, with a mind toward responsive design requirements and performance. Once again, we’ll be working with bitmapped formats: JPEG, PNG, and GIF. SVG has a different set of considerations and has been given the next chapter all to itself. This chapter is all about pixel-pushing!

You’ll get a chance to save or export images in a variety of bitmap formats and create an image with transparent areas. You’ll learn some shortcuts for creating multiple versions of an image at once for responsive layouts and high-density displays. Finally, you’ll pick up some optimization tools and techniques so you can make your image files as small as they can be.

Let’s start out with the most basic of image production tasks, saving an image in a web-appropriate format.

Saving Images in Web Formats

Let’s dig right in with saving web images in Photoshop CC and GIMP. You may be thinking, “Why just those two?” I wrote you a little sidebar, “Why Just Photoshop and GIMP?” to explain. If you use one of the dozens of other image editors, the process and terminology is likely similar ...