SEO - Tối ưu hóa hình ảnh

Xin chào các nhà SEO tương lai! Hôm nay, chúng ta sẽ cùng lặn vào thế giới fascininating của việc tối ưu hóa hình ảnh. Là giáo viên máy tính ở khu phố gần bạn, tôi ở đây để hướng dẫn bạn qua hành trình này, từng bước một. Không có kinh nghiệm lập trình trước? Không có vấn đề! Hãy bắt đầu!

SEO - Optimize Images

Tại sao hình ảnh lại quan trọng đến thế?

Hãy tưởng tượng bạn đang duyệt một trang web và tất cả bạn thấy chỉ là một bức tường văn bản. House, phải không? Đó là nơi hình ảnh xuất hiện! Chúng giống như những hạt sprinkle trên món kem sundae kỹ thuật số của bạn. Nhưng đây là catches: trong khi hình ảnh làm cho trang web của bạn trông tuyệt vời, chúng cũng có thể làm chậm trang web của bạn nếu không được tối ưu hóa đúng cách.

Trong những ngày đầu của tôi trong thiết kế web, tôi từng tạo một trang web đầy hình ảnh có độ phân giải cao. Nó trông tuyệt vời, nhưng nó tải chậm hơn một con ốc trên một ngày Chủ nhật lười biếng. Đó là khi tôi học được tầm quan trọng của việc tối ưu hóa hình ảnh!

Cải thiện trải nghiệm người dùng

Trải nghiệm người dùng là vua trong thế giới kỹ thuật số. Hãy cùng xem xét một số cách để cải thiện nó thông qua việc tối ưu hóa hình ảnh:

1. Giảm kích thước tệp hình ảnh

Một trong những cách dễ nhất để cải thiện trải nghiệm người dùng là giảm kích thước tệp hình ảnh. Dưới đây là một đoạn mã Python đơn giản để làm điều đó:

from PIL import Image

def compress_image(input_path, output_path, quality=85):
with Image.open(input_path) as img:
img.save(output_path, optimize=True, quality=quality)

compress_image('large_image.jpg', 'compressed_image.jpg')

Đoạn mã này sử dụng thư viện Pillow để nén một hình ảnh. Tham số quality (0-100) cho phép bạn cân bằng giữa kích thước tệp và chất lượng hình ảnh.

2. Sử dụng Lazy Loading

Lazy loading giống như phục vụ một bữa ăn theo từng món, thay vì đặt tất cả lên bàn cùng một lúc. Dưới đây là một ví dụ đơn giản bằng HTML:

<img src="placeholder.jpg" data-src="actual-image.jpg" class="lazy">

Và đoạn mã JavaScript tương ứng:

document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});

lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
}
});

Đoạn mã này sử dụng API Intersection Observer để tải hình ảnh chỉ khi chúng sắp vào viewport.

Alt Text: Đó là gì?

Alt text giống như một thông điệp bí mật cho các công cụ tìm kiếm và máy quét màn hình. Nó mô tả nội dung của hình ảnh khi hình ảnh không thể hiển thị. Dưới đây là cách sử dụng nó:

<img src="cute-puppy.jpg" alt="Một chú chó golden retriever chơi với một quả bóng đỏ">

Mẹo chuyên nghiệp: Hãy mô tả nhưng ngắn gọn. Nghĩ về điều bạn sẽ kể cho một người bạn nếu họ không thể thấy hình ảnh.

Định dạng hình ảnh

Chọn đúng định dạng hình ảnh giống như chọn trang phục phù hợp cho một dịp. Dưới đây là một hướng dẫn nhanh:

Định dạng	Tốt nhất cho	Ưu điểm	Nhược điểm
JPEG	Ảnh chụp	Kích thước tệp nhỏ	Nén có损
PNG	Hình ảnh với trong suốt	Nén không có损	Kích thước tệp lớn hơn
WebP	Trình duyệt hiện đại	Nhỏ hơn JPEG/PNG	Không được hỗ trợ bởi tất cả các trình duyệt
SVG	Logo và biểu tượng	Tương tự	Không phù hợp cho hình ảnh phức tạp

Lời khuyên về tối ưu hóa hình ảnh

thu nhỏ hình ảnh trước khi tải lên: Đừng sử dụng một hình ảnh 4000x3000 pixel cho một không gian 400x300 pixel!
Sử dụng các công cụ nén hình ảnh: Các công cụ như TinyPNG có thể làm điều kỳ diệu.
Chọn đúng định dạng: Sử dụng bảng của chúng tôi ở trên làm hướng dẫn.
Thực hiện hình ảnh响应 ứng: Dưới đây là một ví dụ:

<picture>
<source media="(max-width: 799px)" srcset="small-image.jpg">
<source media="(min-width: 800px)" srcset="large-image.jpg">
<img src="default-image.jpg" alt="Mô tả của hình ảnh">
</picture>

Đoạn mã này cung cấp các kích thước hình ảnh khác nhau dựa trên chiều rộng màn hình của thiết bị.

Sử dụng một Mạng phân phối nội dung (CDN)

Một CDN giống như việc có một dịch vụ giao pizza với nhiều chi nhánh trên khắp thành phố. Nó cung cấp hình ảnh của bạn từ vị trí gần nhất với người dùng của bạn, tăng tốc thời gian tải.

Dưới đây là cách bạn có thể sử dụng CDN với HTML:

<img src="https://your-cdn.com/path/to/image.jpg" alt="Mô tả">

Và với CSS:

.background-image {
background-image: url('https://your-cdn.com/path/to/image.jpg');
}

Kết luận

Chúc mừng! Bạn vừa hoàn thành khóa học nhanh về tối ưu hóa hình ảnh cho SEO. Nhớ rằng, tối ưu hóa hình ảnh không chỉ là về việc làm hài lòng các công cụ tìm kiếm; nó còn về việc tạo ra một trải nghiệm tốt hơn cho người dùng của bạn.

Khi chúng ta kết thúc, đây là một câu chuyện nhỏ: Tôi từng có một học sinh gặp khó khăn với việc tối ưu hóa hình ảnh. Cô ấy liên tục tải lên các hình ảnh lớn lên trang web của mình, tự hỏi tại sao nó lại chậm như vậy. Sau khi áp dụng các kỹ thuật chúng ta đã thảo luận hôm nay, trang web của cô ấy đã từ chậm như TORTOISE thành nhanh như HARE trong thời gian ngắn!

Tiếp tục thực hành, giữ vững sự tò mò, và chúc bạn thành công trong việc tối ưu hóa! Nhớ rằng, trong thế giới SEO, mỗi kilobyte đều có giá trị!

Credits: Image by storyset

Hướng Dẫn Trước:

SEO - Đ anchor Tối Ưu

Hướng Dẫn Tiếp Theo:

SEO - Nội dung trùng lặp