Tối Ưu Hình Ảnh Website – Từ JPEG Đến WebP Tự Động

Hình ảnh chiếm 50-80% dung lượng trang web. Tối ưu ảnh đúng cách có thể giảm thời gian tải trang xuống 2-3 lần.

WebP – Định Dạng Ảnh Tương Lai

WebP nhỏ hơn JPEG 25-35% và PNG 26% với chất lượng tương đương. Tất cả browser hiện đại đều hỗ trợ.

Chuyển Sang WebP Tự Động Trong WordPress

// WordPress 5.8+ tự chuyển sang WebP
// Thêm vào functions.php để ưu tiên WebP
add_filter('wp_upload_image_mime_transforms', function($transforms) {
    return [
        'image/jpeg' => ['image/webp'],
        'image/png'  => ['image/webp'],
    ];
});

Dùng picture Element Cho Fallback

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Mô tả ảnh" width="800" height="450" loading="lazy">
</picture>

Script Batch Convert Với ImageMagick

#!/bin/bash
# convert-to-webp.sh
for file in *.jpg *.jpeg *.png; do
    convert "$file" -quality 85 "${file%.*}.webp"
    echo "Converted: $file"
done

Quy Tắc Vàng

• Ảnh blog: 1200x630px, tối đa 100KB
• Thumbnail: 400x300px, tối đa 30KB
• Logo: SVG (vector, không pixelate)
• Luôn thêm width, height attribute để tránh CLS
• Dùng loading=”lazy” cho ảnh below-the-fold