Web Graphics 101 Web Image File Formats Image Optimization Size vs. Speed Legally Obtaining Images Creating Your Own Web Images

The Importance of Having Images A newspaper page with no pictures is called grey A Web page with no pictures is called unreadable The Web is as much a visible medium as a written one. Readers are likely to pass over web pages without pictures. BUT… Source: http://courses.help.com

Image Precaution On the Web, people generally appreciate creativity and passion over dancing bologna (Unless you are making a humour site.) Overuse graphics and your site becomes overdone Flashy = trashy? Your goal as a web designer is to not create something that looks like a 5- year-old’s first Christmas tree. Dancing Bologna Source: http://jameswhite.org/

Keep on trying!

How Images Work Images are made of pixels (picture elements) Pixels are small squares of colour. Computer monitors are made of pixels!

How Computer Memory Works: Bits and Bytes Every single bit of information on a computer is stored in its MEMORY, either permanently on a hard drive or temporarily in RAM. Basic unit of storage is the byte 1 byte = 1 character Example: “Hello World!” uses 12 bytes Each byte has 8 bits (bit = 1 binary digit) A bit can be either 0 or 1 A byte has 256 unique patterns e.g. ‘A’ = 01000001 ‘B’ = 01000010 Abbreviations: use ‘b’ for bit and ‘B’ for byte

Size Matters

Image File Sizes File size is different than image size Image size is the dimensions, usually in pixels or inches File size is how much space it takes up in the computer’s memory, in bytes “Small” image files are measured in bytes e.g. 500 bytes Larger image files are measure in kilobytes or megabytes 1000 bytes = 1 KB 1000 kilobytes = 1 MB

Image File Size File size is determined by: Physical size in pixels/inches/centimeters Number of pixels (resolution) More pixels = more detail and more information Number of bits used to represent the colors in a pixel Technical hardware term – more bits means more colour © 2004 Happy Aston-Snow

Size/Speed Considerations Space on a server costs $$ money $$ The larger your image: The more space it takes up on your web host’s server The more time it takes to load in your browser In our case, we get 1MB of server space – not a lot! Not enough to keep high-resolution photos on! The average iPhone photo is about 2 MB – that’s twice the size we’re allowed for our sites!

Speeding up Load Times How do you make your images “render” faster on the Web? Make the file size smaller. You can: Make the images physically smaller – crop or scale Reduce the number of colors Compress (optimize) the image This is all done in a graphics program like Photoshop

Graphic File Types GIF, JPEG, PNG

Three Main Web Image File Types GIF Graphics Interchange Format JPEG/JPG Joint Photographic Experts Group PNG A newer form of GIF, with advantages The bold word shows what each format handles best.

Graphics Interchange Format What is it Good For? GIFs Graphics Interchange Format What is it Good For?

GIF — Graphics Interchange Format Best for simple images that have solid areas of color: Logos Illustrations Cartoons/Clipart Line Art GIF is pronounced "JIF" by the format's creator, but many prefer GIF as in gift  Source: http://webdesign.about.com/compute/webdesign/library/weekly/aa031698.htm?terms=The+Right+Choice+-+Gif+or+Jpg Pronounce Source: http://www.gtscompanies.com/graphics.html#i

Number of Colours This means a smaller file size. GIF is an 8-bit format which means a GIF image is limited to displaying only 256 colors – not many. This means a smaller file size. Source: http://webdesign.about.com/compute/webdesign/library/weekly/aa031698.htm?terms=The+Right+Choice+-+Gif+or+Jpg

More Colours = Larger File

Transparent Backgrounds You can assign a transparent colour to a GIF Transparency helps your image blend in with a background.

Animation Created by layering several GIF images together within a single file

Joint Photographic Experts Group What is it Used For? JPEG Joint Photographic Experts Group What is it Used For?

JPEG: Joint Photographic Experts Group Best for continuous-tone images such as: Photographs Glow Effects Drop Shadows Gradients Source: http://webdesign.about.com/compute/webdesign/library/weekly/aa031698.htm?terms=The+Right+Choice+-+Gif+or+Jpg

JPEG Tech Specs Works best for: JPEG is a 24-bit format. This allows for 16 million colors (if you have a modern monitor). Works best for: Photographs Detailed scans Finely colored pieces of graphic art

JPEG Optimization JPEG is a lossy compression method JPEG compression does not work along horizontal lines, like GIF compression does JPEG compression breaks an image into square zones and throws away subtle color differences You can see these square regions on badly compressed JPEGs.

Do Not Over-Optimize

JPEG Optimization IMPORTANT NOTE: each time you save a JPG image it gets compressed It loses more information, ruining your picture. It is best to save an original of your image in another format (such as TIFF or RAW) and work from that original when making changes. Depends on the importance of the picture.

JPEG Optimization When saving an image in JPEG format, you can select how much compression to use and, therefore, how much information will be lost. This is called optimizing. More compression means a smaller file size, but also more loss of quality. POINT: we need to find a balance between quality and file size

IMAGE QUALITY FILE SIZE

…but overly compressed. A nice JPEG… …but overly compressed.

JPEG Files Source: http://www.widearea.co.uk/designer/ducks.html

Text: gif or jpeg? As a GIF, text is still crisp As a JPG, text is fuzzy © 2004 Happy Aston-Snow

Portable Network Graphics PNGs Portable Network Graphics

PNG Files PNG: Portable Network Graphics An updated GIF format. Similarities and differences: Lossless Quality is not degraded when you edit and save Transparency Supports 1000’s of colours Not good for photos, though – JPG works better Better compression than GIF = smaller file sizes No patents on PNG technology No license fees for software developers Not supported well on older browsers before ~2010

Which Format Should You Use? Choosing: GIF or JPEG? Which Format Should You Use?

Gif Review The GIF format reduces the color depth of images to a maximum of 256 colors The less colors you retain in your image, the smaller its file size and download time. BUT… If you're working with detailed or finely colored illustrations, you can lose some of the fine color gradation by saving it as a GIF The image might be a better candidate for the JPEG format Source: http://glassdog.com/design-o-rama/html/images.html

JPEG Review JPEG supports 24-bit color depths (up to 16 million colors) Generally, the more complicated an image is (the less it has areas of plain color) the better suited it is for a JPEG Compressing a JPEG too much causes a mosaic effect, and sometimes colors get mixed and muddied JPEGs hate the red hues If your image has large areas of pure red, avoid using JPEGs Also, very large images should be JPEGs Source: http://glassdog.com/design-o-rama/html/images.html

GIF vs. JPEG

JPEG Exception? Grayscale: Grayscale photos are different In most cases they should be saved as GIFs

JPEG Notes The JPEG format creates a larger file, so it is not necessarily a good format for very small photos Generally images that are smaller than 100 x 100 pixels known as thumbnails or icons should be saved in GIF format

Format Choice Quiz Text? Often better as a GIF. Photos that are larger than 100x100 pixels? JPEG format. Photos that are smaller than 100x100 pixels? GIF format. Images with large areas of solid color such as illustrations? Images with lots of shading or gradients? Source: http://webdesign.about.com/compute/webdesign/library/howto/htGIForJPG.htm

Two Types of Images Raster and Vector

Raster (Bitmap) vs. Vector Images All computer graphic programs fall into two basic categories: paint programs and drawing programs A paint program works with pixels A drawing program works with vectors Source: http://www.wfubmc.edu/biomed/infonotes/raster_vector.html

Raster (Bitmap) Images Pixel is short for picture element, and collectively those pixels make up a raster image (also called a bitmap image) Programs such as Adobe Photoshop work with pixels, or “raster images”, and therefore fall into the “paint program” category GIFs and JPEGs are bitmapped files.

Vector Images Vector objects are made of lines and curves that are defined mathematically in the computer Programs such as Adobe Illustrator work with vectors and therefore fall into the “drawing program” category Vectors can have various attributes such as line thickness, color and length For example, in a drawing program, a square is drawn as four lines connected at the corners Those lines can be set to different thickness and colors The square can be hollow or filled A line is one object with attributes, and you work with this line as a single object, not as a group of pixels as you would in a paint program

Any Questions?