Week 8: Website Design

by | Oct 27, 2025 | Website Design Class

Images & Graphics

Learn how to source, edit, optimize, and use images effectively in their websites to improve visual appeal and performance.

Scripture

 Philippians 4:8 (HCSB) – “Finally brothers, whatever is true, whatever is honorable, whatever is just, whatever is pure, whatever is lovely, whatever is commendable—if there is any moral excellence and if there is any praise—dwell on these things.”
→ Tie-in: Our website visuals should reflect beauty, truth, and excellence, just like the content we share.

Website Structure Basics

Review week 7
    • Did you complete your primary and footer menus?

    • Have you drafted your Contact page content?

Quick check to ensure menus are functional and logically organized.

Sourcing Images
  • Where to find high-quality, royalty-free images:

    • Unsplash

    • Pexels

    • Pixabay

  • Importance of copyright and proper attribution when needed.

Encourage using original photography when possible for authenticity.

Editing Images
  • Demonstrate basic edits:

    • Cropping

    • Brightness/contrast adjustments

    • Resizing

  • Tools:

    • Canva

    • Pixlr

Photopea (Photoshop alternative)

Optimizing Images for Web
  • Why optimization matters:

    • Faster page load times

    • Better SEO

  • File formats:

    • JPG for photos

    • PNG for graphics/transparency

    • WebP for best compression

  • Tools for optimization:

    • TinyPNG / TinyJPG

    • Squoosh

Demonstration: Compress an image before uploading to WordPress.

Steps:

  1. Go to a trusted image compressor:

  2. Upload your images (PNG or JPG).

  3. The tool will automatically compress them — reducing file size without noticeable loss in quality.

  4. Download the compressed version.

  5. Upload that image to WordPress via the Media Library or your page builder

 

Use a WordPress Plugin 

If you prefer WordPress to handle it:

  • Install one of these:

    • Smush

    • ShortPixel Image Optimizer

    • Imagify

  • They automatically compress new uploads and can bulk-compress existing images.

Homework
  1. Select and optimize all images for your About page and Contact page.

  2. Insert images into these pages, ensuring they are sized and positioned well.

Add alt text to each image for accessibility and SEO.