Webpage Design II Module 1: Images for the Web and Types of Images
Module 1: Images for the Web and Types of Images
Step 1: Understanding Digital Images
Images are visual files used on websites to improve appearance, branding, and communication.
Common Image Formats
| Format | Best Use | Advantages |
|---|---|---|
| JPG/JPEG | Photos | Small file size |
| PNG | Logos and graphics | Transparent backgrounds |
| GIF | Simple animations | Supports motion |
| SVG | Icons and logos | Scales without losing quality |
| WebP | Modern websites | Smaller file sizes and high quality |
Activity
Identify five images online and determine their file type.
Step 2: Image Optimization
Large images slow down websites.
Best Practices
-
Resize images before uploading.
-
Compress files using image optimization tools.
-
Use descriptive file names.
-
Add Alt Text for accessibility.
Example
Bad Filename:
IMG000123.jpg
Good Filename:
business-team-meeting.jpg
Lab Activity
Optimize three images for web use and compare file sizes before and after compression.