Introduction:

Images can be found all over the web these days serving various roles – as content, as design elements, and as navigational aids.

How does understanding the technical aspects of images such as format, color, and resolution make you a better web developer, marketer, or media technician? When we talk about something as innocuous sounding as “size”, what are we really talking about, and is that what we really mean? Getting a handle on how to work with images on the web begins with a few basic concepts and a little vocabulary.

(or access the video directly)

Objectives:

By the end of this lesson you should be able to:

  • explain what a raster image is and list the most common raster file formats used on the web.
  • describe a pixel and explain the difference between DPI (dots per inch) and PPI (pixels per inch).
  • find the screen resolution of your monitor.
  • determine the resolution, dimensions, and file size of an image and understand how to change them.
  • Differentiate between JPEG, GIF, and PNG file formats and explain how they differ.

Reading:

Lecture:

You can listen to an introduction of web images, color, and resolution and add comments and questions you may have.

 

 

Web Image Formats:

  • JPEG (Joint Photographic Exchange Group): Supports 24-bit color. Good for photo-realistic images or images with gradual shifts in color (gradients). (JPEG technical background)
  • GIF (Graphics Interchange Format): Supports 8-bit color, transparency, and multiple images (animation). Fell into patent controversy over its proprietary compression (LZW) developed by Unisys. GIFs tend to be sensitive to vertical noise but can handle horizontal very efficiently. (GIF Specifications gif87 gif89)
  • PNG (Portable Network Graphic): Supports up to 16-bit greyscale, 48-bit (true) color, gamma storage, and 16-bit alpha. Not as sensitive to vertical noise as GIF. Doesn’t support animation officially, but there is an APNG extension to the specification that supports animation, 24-bit images, and 8-bit transparency. (PNG Recommendation)

This infographic helps to sum characteristics of the three file types up nicely:
Know Your File Types: When to Use JPEG, GIF, & PNG - Via Who Is Hosting This: The Blog

Source: WhoIsHostingThis.com

Color-related Vocabulary:

  • Color Depth: This refers to the number of colors supported and can range anywhere from 1-bit (black and white) to 32-bit. There are some graphics cards that support higher color depths such as 48- and 64-bit, and are used in high end graphics workstations. Just remember, the higher the color depth the broader the range of distinct colors in an image.
  • Color Model: A mathematical description of how color is displayed in an image, such as RGB or CMYK.
  • Color Space: A color model that is accompanied by information that maps specific information about how color components should be interpreted
  • Screen Calibration: Strategies that attempt to match the color input and output of a device to achieve predictable results on screen (or print)

Resolution for the Web

Image resolution refers to the amount of data an image contains, usually this is the number of pixels contained within an image. Typically, the more pixels an images contains, the higher its resolution is and the larger the file size will be. Unlike printed images where high resolution is desirable, web images are purposefully low resolution. This helps keep download speeds fast because file sizes are smaller. The standard resolution for images on the web is 72ppi.

Sourcing Photos

What is royalty-free and how does it differ from rights-protected image licensing? Stock image sites sell the rights to photographs for use on websites, print collateral, billboards, busses, etc. Royalty-free licences let you, as the designer, to use an image in your work for a fee, but also allow anyone else who pays the same fee to use that image. Rights-protected licences allow you to use an image in your work while limiting use of that image to you only (and potentially other restrictions depending on the service).

STOCK IMAGE SITES

FREE AND SHARED IMAGE SITES

Conversely, there are websites that make images available for you to use for free. Some of these sites ask that you give attribution to the photographer/artist who created the images.

*64 Best Free Stock Photo Sites* A BIG list of the very best sites offering high quality free images. Note that the range of open licensing on these sites varies so be sure and note the commercial/noncommercial reuse and attribution requirements for images you find. https://docs.google.com/spreadsheets/d/14RDW5uz-IctN4Rq9us8hLvLFGUMYXtq6gd6hr7GukK8/edit#gid=0
Free Photos A free resource where you can find creative commons photos for your website or print projects. https://freephotos.cc/
Realgraphy A huge collection of unedited photos. These are great if you’re interested in adding your own filters and edits. https://realgraphy.org/
RightLight Licence free photos for commercial & personal use. https://rightlight.nordwoodthemes.com/
Skuawk Public Domain photos https://skuawk.com
Old Book Illustrations This collection focuses on illustrations that are within the limits of the public domain. https://www.oldbookillustrations.com/
The British Library Image Gallery The British Library’s collections on Flickr Commons offer access to millions of public domain images, which they encourage you to explore and re-use. https://www.flickr.com/photos/britishlibrary
Getty Open Content Program The Getty Museum makes available, without charge, all available digital images to which the Getty holds the rights or that are in the public domain to be used for any purpose. No permission is required. More info at https://www.getty.edu/about/whatwedo/opencontent.html https://search.getty.edu/gateway/search?q=&cat=highlight&f=%22Open+Content+Images%22&rows=10&srt=a&dir=s&pg=1
Viintage Copyright-free vintage graphics https://viintage.com/
Public Domain Review The focus is on works which have now fallen into the public domain, that vast commons of out-of-copyright material that everyone is free to enjoy, share, and build upon without restriction. https://publicdomainreview.org/
SpaceX Photos on Flickr Official Flickr account for SpaceX, the future of space travel. These official SpaceX images are being made available to the public and news media with no restrictions. https://www.flickr.com/photos/spacex/
Free Vector Maps Free Vector Maps is a Ted Grajeda project created to provide the design world with a highly detailed, easily customisable and consistent library of stock maps for free* and premium maps and icons at great prices. https://freevectormaps.com/
Icon Monstr Use the icons for free, regardless of whether for commercial or non-commercial purposes. https://iconmonstr.com/
Vexels Vector designs available for use. Licenses vary by creator. https://www.vexels.com/
Public Domain Vectors Copyright-free vector images in popular .eps, .svg, .ai and .cdr formats.To the extent possible under law, uploaders on this site have waived all copyright to their vector images. https://publicdomainvectors.org
Vector Open Stock Search and filter by file type such as PSD mockups, vectors graphics, Transparent PNGs. https://www.vectoropenstock.com/
Open Clip Art Vector graphics available under Creative Commons Zero 1.0 License. https://openclipart.org
FreeVectors.net All the images on this site are free to use for personal use and most of them can be used commercially. https://freevectors.net
Allvectors.com Most of vector art published on this website is free to use for both personal and commercial purposes. Vector files are usually saved in .EPS (encapsulated post script) or .AI (Adobe Illustrator) formats. https://allvectors.com
StockVault Their sole purpose is to collect and archive high resolution photographs that photographers, designers and students can share and use for their personal and non-commercial design projects. https://www.stockvault.net/
Burst New photos are being added every week. These public domain pictures are free to use for personal or commercial purposes. https://burst.shopify.com/photos

Attribution, Copyright, and Legal Use

Understanding the Public Domain, Creative Commons, and Fair Use

Copyright law is designed to be a legal mechanism to protect creators of original content. Technically, works are protected from the moment they are created. Using images, audio, video, or any other media without the permission of creator is an infringement of copyright.

There are instances where use of copyright-protected material without express permission from the creator/owner may be permitted. These instances are referred to Fair Use. Fair Use makes provision for activities such as teaching and criticism, but has somewhat vague limits. If use of protected material is called into question it will be up to you to defend your intention of fair use of said material. More information about Fair Use can be found in this factsheet from Copyright.gov.

Work that is considered to be in the Public Domain has no copy protection. Usually, these works have not had their copyright renewed or it has expired. You often hear of these works referred to as having fallen into the Public Domain. A work can also be expressly dedicated to the Public Domain by the creator/owner.

There has been a good deal of controversy around Copyright Law as it specifically (or not so specifically) pertains to digital works. The ease with which people are able to share protected works digitally with each other makes interpreting the law a moving target, of sorts, as new technology creates needs for setting precedence as the technology is adopted. From an opposite perspective, the ease with which people are now able to generate original content has created a greater need for purposeful and flexible licensing of content when creators/owners want to share with others.

In the case of the creator/owner who wants to share with others, Creative Commons offers solutions…

 

Creative Commons A Shared Culture from John Morrison on Vimeo.

 

Additional resources:

Activities:

Discussion: How are Images Used on Web Sites?

Learning about the web can certainly be convenient. It just happens to be one of those places where it is easy to look under the hood to take a look at what is going on. Having said that, let’s talk about images and how they are used on web sites. There is a handy extension for Firefox and Chrome called the Web Developer Toolbar that will be handy to have installed before e get started. If you need the Web Developer Toolbar for Firefox on your home computer you can find it here.

If you’ve never used the Web Developer Toolbar to examine images on a website before this tutorial covers a few ways the toolbar can help you understand how images are used on any website.

 

 

As part of your homework you will be taking a screenshot of a website you are analyzing. You will most likely have to resize your image. If you’ve not ever done this in Photoshop or Fireworks, the tutorials below will be helpful.

Tutorial on Resizing Images in Photoshop

 

If you’re using Fireworks, you can follow this tutorial for resizing/optimizing images.

 

Supplemental Resources

Looking Ahead

Before moving onto next week you should: