e are in a time where the web browser is ubiquitous. People now have many devices connected to the Internet and each one with their own browser and screens for browsing. This multiple user experience is bringing up more challenges for crafting images than ever before.
utting basic link tags around an image makes the entire image a link. Alternatively, an image map, created by web pioneer Kevin Hughes in 1993, allows for multiple links at predefined areas within an image. Back then, you had to use server-side programming to get image maps to work. Eventually, though, the browser vendors programmed [...]
mages made the web boom. In its early days, the World Wide Web was about colleagues sharing scientific papers written in text so dry it would make Shakespeare weep. If it wasn’t for the simple img element, a once nonstandard bit of HTML proposed by Marc Andreessen and coded into the now-relic Mosaic browser, we’d [...]
eople seldom read the web. Studies have found that people skim. Visitors to your website are experts at scoping out a web page. Their eyes dart from one corner to another looking for words and high-contrast imagery to determine if they’re in the right place. They look for what user experience researcher Jared Spool calls [...]
website’s brand goes beyond inserting an img element in the top left corner of the page. The logo can also be placed throughout a visitor’s browser or mobile device in the form of a favicon, a small image or icon often found in the URL bar that represents the website. To get the icon to [...]
For practical purposes, let’s think of pixels as squares. Images made up of these square building blocks can only have edges with right angles, and can only have smooth-looking edges when they’re rectangles. Working with rectangles leads to boxy layouts. Web designers use transparency to break out of this boring, boxy mentality; with transparency, they [...]
In this chapter, we first cover tips and techniques to prepare images for web delivery while still in imaging software like Adobe Illustrator or Photoshop. Then, we go over steps to export images into various file formats. Finally, we look at ways of optimizing and compressing images for snappy web browsing.