CPNT 201 Day 3 - Raster Images

Overview

1. Plan it out

• Intro to raster images and image editors
• Raster Image Theory

2. Brute force

• Set up image directories
• optimize images for web

3. Lab Time

• Work on Activity

4. Walkthrough

• Discussion on process

CPNT201 Assignment 2: Raster Image Optimization

• Due: Tuesday October 5th @ 11:59pm;

Raster Image Editors

• Gimp
  • Youtube Video Tutorials
  • Photogimp
    • Enhance gimp's functionality
  • BIMP
    • A plugin for Batch Image Processing
• Pixlr
  • Web based raster editing
• Canva
  • Web and mobile based editing
• Photoshop
  • Premium raster image editing program (Industry Standard)
  • Youtube Tutorial Videos
• I will be doing examples using GIMP with photogimp and bimp

Raster Images in Web Development

Terminology

• Terminology source

Aspect Ratio

proportional representation of width vs height

Clarity vs Sharpen

sharpen is contrast between light and dark pixels, clarity is contrast between mid tones.

Exposure

How light or dark an image appears after capturing it

Histogram

Displays tones in your image ranging from 0-255

Compression

decreasing an image fileze for faster loading. lossy or lossless

Lossy Compression

Reduces file size by eliminating information. The image will not be exactly the same. Data that is lost when performing a lossy compression cannot be recovered.

Lossless Compression

All the original information is kept. PNG is an example of loseless compression.

Common Practices for Raster Image Editing

• Color Selection
  • Photoshop: healing brush
• Brightness, Colors, Levels, Exposure
  • Gimp: Colors tab
  • Photoshop: Image/Adjustments tabs
• Touch up photos
  • Healing Brush
  • Gimp: Heal Selection
  • Photoshop: Spot Healing
• Cut a something out of a background
  • photoshop: direct selection tool, refine edge, mask mode
  • gimp:

Gist on image size ranges

Image size for Web extra Reading

• Flothemes article

File Formats for web

• PNG, JPG, WebP

Activity: Set up Directory Hierarchy

Lazy Loading

• This is used to shorten the critical rendering path
• items that are not required immediatly will be downloaded when the user gets to them
• this is the opposite of preload which we use on our fonts to speed up the rendering of the page
• for lazy loading, the image loads at render

<!-- image lazy loading -->
<img src="image.jpg" alt="..." loading="lazy">
<!-- iframe lazy loading -->
<iframe src="video-player.html" title="..." loading="lazy"></iframe>

Optimization

• Batch processing for resizing and file conversion using gimp
• Convert to Webp
• Optimize images

Tooltime

• BIMP
• squoosh

Activity: Image Optimization

Prep for tomorrow

• Video: Keven Powell Getting started with Figma
  • overview of how to use figma. longer video with great intro content
• Video: Logos by Nick Simple Box Icon
  • a design tutorial using inkscape. The same thing can easily be made in figma and illustrator. His method of using shapes is particularly useful.