Day 8 – Optimize Images (Step-by-Step Guide)
Week 2: SEO Implementation
Day 8 – Optimize Images (Step-by-Step Guide)
The purpose of Day 8 is to optimize all website images so they load faster, improve SEO, and make the website more accessible. Search engines cannot "see" images like humans do, so image optimization helps Google understand what each image represents.
Step 1: Identify Website Images
What are you doing?
Finding all the images used on the homepage and service pages.
Tool
Using WordPress Media Library – View and manage all website images.
How to Access
Log in to WordPress.
Click Media.
Click Library.
Open:
https://yourwebsite.com/wp-admin
Replace yourwebsite.com with your client's website.
Free or Paid: ✅ Free (included with WordPress).
Tasks
Check images on:
Homepage
About Page
Services Page
Blog
Contact Page
Record:
Image name
File size
Page used
Step 2: Rename Images
What are you doing?
Giving each image a descriptive filename before uploading it.
Why?
Google reads image filenames to understand the image.
Bad Examples
IMG001.jpg
photo.png
image1.jpg
Screenshot2026.png
Good Examples
root-learning-online-tutoring.jpg
math-tutor-helping-student.jpg
online-reading-class.jpg
science-tutoring-session.jpg
Rules
Use lowercase letters.
Separate words with hyphens (-).
Avoid spaces and special characters.
Include the page's main keyword if appropriate.
Step 3: Compress Images
What are you doing?
Reducing the image file size without noticeably reducing quality.
Smaller images help pages load faster.
Tool
Using TinyPNG – Compress PNG, JPEG, and WebP images.
How to Access: TinyPNG
Free or Paid:
✅ Free for standard use.
⭐ Paid plans available for higher usage and API access.
Steps
Open TinyPNG.
Drag and drop the image.
Wait for compression.
Download the optimized image.
Example
Before
student-learning.jpg
Size: 4.5 MB
After
student-learning.jpg
Size: 650 KB
The image quality looks almost the same but loads much faster.
Step 4: Convert Images (Optional)
What are you doing?
Converting images into modern formats that load faster.
Tool
Using Squoosh – Compress, resize, and convert images.
How to Access: Squoosh
Free or Paid: ✅ Completely Free.
Steps
Open Squoosh.
Upload the image.
Compare the original and optimized versions.
Choose a format such as:
WebP
AVIF
Download the optimized image.
Why?
Modern formats like WebP and AVIF are usually smaller than JPEG or PNG while maintaining good image quality. Ensure the website supports these formats before replacing existing images.
Step 5: Upload Optimized Images
What are you doing?
Replacing old images with optimized versions.
Tool
Using WordPress Media Library – Upload optimized images.
Steps
Go to Media.
Click Add New Media File.
Upload the optimized image.
Replace the old image on the page if necessary.
Step 6: Add Alt Text
What are you doing?
Writing a short description of each image.
Alt text helps:
Search engines understand images.
Screen readers describe images to visually impaired users.
Images appear in Google Images.
Tool
Using WordPress Media Library – Add alt text.
Steps
Open the uploaded image.
Find the Alternative Text (Alt Text) field.
Write a clear description.
Bad Example
image
Bad Example
photo123
Good Example
Child participating in an online tutoring session with a certified teacher.
Another Example
Image
math-tutor-helping-student.webp
Alt Text
Certified online math tutor helping a primary school student solve equations.
Tips
Describe what is actually shown in the image.
Use the page's keyword naturally when relevant.
Keep it concise.
Do not stuff keywords.
Step 7: Check Image Dimensions
What are you doing?
Making sure images are not larger than needed.
Why?
Uploading a 4000 × 3000 pixel image for a small website thumbnail wastes bandwidth and slows the page.
Example
Large Banner
1920 × 1080
Small Thumbnail
300 × 300
Resize images before uploading if they are much larger than required.
Step 8: Test Website Speed Again
What are you doing?
Checking whether image optimization improved performance.
Tool
Using Google PageSpeed Insights – Test website speed after optimization.
How to Access: Google PageSpeed Insights
Free or Paid: ✅ Free.
Steps
Open PageSpeed Insights.
Paste the website URL.
Click Analyze.
Compare the new performance score with the previous result.
Step 9: Record Your Work
What are you doing?
Keeping track of all optimized images.
Tool
Using Microsoft Excel or Google Sheets – Create an image optimization log.
How to Access: Google Sheets
Free or Paid: ✅ Free.
Example
| Image | Renamed | Compressed | Converted | Alt Text Added | Status |
|---|---|---|---|---|---|
| Homepage Banner | ✅ | ✅ | ✅ | ✅ | Completed |
| Math Tutor | ✅ | ✅ | ❌ | ✅ | Completed |
| Reading Class | ✅ | ✅ | ✅ | ✅ | Completed |
| Contact Image | ✅ | ✅ | ❌ | ✅ | Completed |
Best Practices
File Names
✅ Good
online-tutoring-for-children.webp
❌ Bad
IMG001.jpg
Alt Text
✅ Good
Online tutor teaching a primary school student during a live virtual lesson.
❌ Bad
Image
File Size
Try to keep website images as small as possible while maintaining good quality. There isn't one perfect size for every image—hero banners can be larger than icons or thumbnails—but avoiding unnecessarily large files helps improve loading speed.
Deliverables for Day 8
By the end of Day 8, you should have:
✅ All important images renamed with descriptive filenames.
✅ Images compressed to reduce file size.
✅ Images converted to modern formats where appropriate.
✅ Alt text added to every important image.
✅ Images uploaded or replaced in WordPress.
✅ Website speed checked after optimization.
✅ Image optimization tracking sheet.
Final Goal
By the end of Day 8, every important website image should:
Have a descriptive filename.
Load quickly because it has been optimized.
Include meaningful alt text for SEO and accessibility.
Display correctly on the website without reducing visual quality.
Optimized images improve page speed, user experience, accessibility, and search engine visibility.
Comments
Post a Comment