3.2. Tối ưu hình ảnh & asset tĩnh
Bài 2 – Tối ưu hình ảnh & asset tĩnh cho website
Hình ảnh và các file tĩnh (CSS, JS, font, icon…) thường là “thủ phạm” chính làm website tải chậm. Tối ưu đúng cách có thể giảm vài chục KB–MB băng thông trên mỗi trang, cải thiện tốc độ nhìn thấy rõ, không cần nâng gói hosting.
Bài này sẽ tập trung vào:
- Nguyên tắc chọn, resize, nén, và định dạng hình ảnh (JPG/PNG/WebP).
- Công cụ nén ảnh (online & plugin WordPress).
- Lazy load hình ảnh & video embedded để chỉ load khi cần.
1. Nguyên tắc 1 – Resize đúng kích thước
Nguyên tắc quan trọng nhất: không bao giờ để trình duyệt “co” một ảnh 2000px xuống 600px mà cứ làm 2000px. 1400px “bị lãng phí” vẫn phải tải, nhưng mắt người dùng chỉ thấy 600px.
Phương pháp đơn giản cho người mới:
- Đo xem layout bài viết hoặc hero ở width tối đa là bao nhiêu (ví dụ 800–1000px).
- Lúc chỉnh ảnh trên máy (Photoshop, Canva, Lightroom, v.v.), xuất ra đúng khoảng 900–1100px, đừng 2000–3000px.
- WordPress sẽ tự sinh thêm vài size nhỏ hơn, nhưng bạn hãy đảm bảo size lớn nhất upload lên nằm trong mức “đủ dùng” thay vì “quá khổ”.
Hiệu quả: một bức ảnh 2000px (3–4MB) có thể thành 900px (700KB–1MB), tải nhanh hơn rõ rệt mà chất lượng hiển thị trên web vẫn không bị “mờ”.
2. Nguyên tắc 2 – Nén vừa đủ và định dạng hợp lý (JPG/PNG/WebP)
2.1. JPG/JPEG cho ảnh chụp thực tế
Ảnh chụp, ảnh background, product photo… thường dùng JPG/JPEG vì nén tốt, dung lượng nhỏ, mà chất lượng vẫn chấp nhận được.
- Sau khi chỉnh resize, dùng phần mềm nén nhẹ (khoảng 70–80% chất lượng) vẫn giữ hình đẹp, giảm đáng kể dung lượng.
- Không nén quá mức (40–50%) nếu bạn dùng cho website bán hàng, vì có thể thấy răng cưa, bệt màu.
2.2. PNG cho logo và đồ họa
Logo, icon, banner đơn giản, hình có nền trong suốt nên dùng PNG.
- Ưu điểm: giữ chi tiết, trong suốt, phù hợp cho graphic.
- Nhược điểm: dung lượng thường cao hơn JPG, không dùng quá nhiều PNG cho ảnh lớn.
2.3. WebP – định dạng cho tốc độ
Định dạng WebP của Google có thể nén nhẹ hơn JPG/PNG khoảng 25‑35% mà chất lượng nhìn vẫn tốt.
- Rất phù hợp cho website cần tối ưu tốc độ, nhất là khi dùng theme/blog/ecommerce nhiều hình.
- Plugin WordPress hoặc CDN có thể tự động:
- Chuyển JPG/PNG thành WebP.
- Hoặc cung cấp file WebP cho trình duyệt hỗ trợ, giữ JPG/PNG làm “fallback” cho trình duyệt cũ.
Nguyên tắc nhớ: JPG cho ảnh chụp, PNG cho logo/graphic, WebP để tối ưu tốc độ.
3. Công cụ nén ảnh (online & plugin WordPress)
3.1. Nén ảnh trước khi upload (online)
Đây là cách tốt nhất: bạn kiểm soát chất lượng + dung lượng trước khi WordPress nhận file.
Một số trang nén ảnh miễn phí phổ biến:
- TinyPNG / TinyJPG (https://tinypng.com): kéo thả file, nén nhẹ, dễ dùng, giữ chất lượng tốt.
- Compressor.io hoặc tương tự: hỗ trợ nén tùy chọn, có thể xem dung lượng trước/sau.
- LightImage Optimizer, ImageOptim (dạng desktop, phù hợp nếu bạn chỉnh ảnh hàng loạt).
Thói quen nên có:
- Chỉnh size đúng (điểm 1).
- Nén nhẹ (điểm 2) bằng công cụ online hoặc phần mềm.
- Sau đó mới upload lên WordPress.
3.2. Plugin nén ảnh tự động cho WordPress
Nếu bạn đã có nhiều bài cũ, không muốn mất công nén lại từng file, có thể dùng plugin nén tự động.
Một số plugin phổ biến (hướng dẫn cài đặt không phải mục bài này, chỉ nói vai trò):
- **ShortPixel Image Optimizer**, **TinyPNG/ShortPixel**, **Smush**, **Imagify**, **EWWW Image Optimizer**, **reSmush.it Image Optimizer**…
- Chức năng chính: tự động nén ảnh đã upload và ảnh mới upload, giảm dung lượng file ảnh mà vẫn giữ độ sắc.
- Một số plugin còn hỗ trợ:
- Chuyển sang WebP.
- Lazy load.
Nguyên tắc dùng:
- Bật lossy (nén mạnh hơn) hoặc lossless (nén nhẹ, giữ nguyên chất lượng) tùy mức độ hình bạn chấp nhận.
- Không bật nén “quá mức” nếu website là studio ảnh, portfolio đòi hỏi chất lượng cao.
4. Lazy load hình ảnh & video embedded
Lazy load là kỹ thuật chỉ tải hình ảnh khi người dùng cuộn đến chỗ ảnh xuất hiện, thay vì tải tất cả lúc đầu. Điều này giảm số lượng request ban đầu, giúp trang load nhanh hơn, đỡ ngốn băng thông server và mobile data.
4.1. Lazy load hình ảnh
Trình duyệt hiện đại hỗ trợ lazy load bằng thuộc tính loading="lazy" trên thẻ img. Nhiều theme và plugin WordPress đã tích hợp lazy load sẵn.
- Kiểm tra trong cấu hình theme hoặc plugin: xem mục có dòng kiểu “Lazy load images” hoặc “Enable lazy loading”.
- Nếu theme chưa có, bạn có thể cài plugin chuyên về lazy load (hoặc sử dụng plugin nén ảnh kết hợp lazy load như ở trên).
- Lazy load nên bật cho tất cả hình nội dung bài, trừ một số hình “trên fold” cần hiện ngay (ví dụ hero image, nếu có).
4.2. Lazy load video embedded (YouTube, Vimeo…)
Video từ YouTube, Vimeo… thường làm trang đơ vì script và iframe tải rất nặng. Lazy load video giúp:
- Chỉ tải iframe/video khi người dùng cuộn tới.
- Người dùng mobile đỡ tốn data nếu không xem video.
Cách làm phổ biến (không phải code sâu):
- Dùng plugin hỗ trợ lazy load iframe (ví dụ: plugin lazy load hình + iframe, hoặc plugin riêng cho video).
- Hoặc dùng kỹ thuật “iframe placeholder” (một nút play hình); khi click mới load iframe thật – đây cũng là dạng lazy load nhưng nâng cao hơn.
Nguyên tắc: nếu trong một trang bài có hơn 1–2 video, nên tìm cách lazy load chúng để tránh “đẩy” hết toàn bộ script lên cùng lúc.
5. Checklist nhanh cho tối ưu hình ảnh & asset tĩnh
Để bạn dễ áp dụng ngay, dưới đây là checklist thực tế bạn có thể dùng sau khi đọc bài:
- Resize ảnh đúng kích thước hiển thị trên layout (không để ảnh quá lớn).
- Chọn định dạng đúng: JPG cho ảnh chụp, PNG cho logo/graphic, WebP nếu hệ thống hỗ trợ.
- Nén ảnh trước khi upload (online hoặc phần mềm).
- Hoặc cài plugin nén ảnh tự động cho WordPress để xử lý ảnh cũ & mới.
- Bật lazy load cho hình ảnh (nếu theme/plugin hỗ trợ).
- Áp dụng lazy load hoặc tối ưu cho video embed (YouTube, Vimeo).
Thực hiện xong checklist này, bạn sẽ thấy web tải nhanh hơn rõ rệt, dù không thay đổi hosting, theme, hay code. Bài tiếp theo có thể là “Tối ưu CSS/JS & cache”, nhưng trước hết hãy làm “sạch” phần hình ảnh và asset tĩnh đã.