Mở đầu — vì sao bài này quan trọng
Hãy thử tưởng tượng bạn vừa thiết kế một trang landing page tuyệt đẹp cho một thương hiệu thời trang Việt Nam. Bố cục cân đối, typography chuẩn chỉnh, màu sắc hài hòa. Nhưng khi khách hàng mở trang trên điện thoại với mạng 4G chập chờn ở một quán cà phê, họ phải nhìn vào màn hình trắng trơn suốt 8 giây trước khi ảnh hero hiện ra. Đến giây thứ 5, hơn một nửa số khách đã thoát.
Đây không phải kịch bản hiếm gặp — nó là thực tế. Theo nhiều nghiên cứu về hiệu năng web, hình ảnh thường chiếm 50–70% tổng dung lượng của một trang. Nghĩa là dù bạn tối ưu HTML, CSS, JavaScript đến mức nào, nếu ảnh nặng thì trang vẫn chậm. Là designer, bạn không chỉ chịu trách nhiệm về việc ảnh đẹp — bạn còn chịu trách nhiệm về việc ảnh nhẹ và hiển thị đúng.
Bài học này tập trung vào một kỹ năng mà rất nhiều designer Việt Nam bỏ qua: chọn đúng định dạng ảnh và tối ưu chúng cho web. Đây là phần "kỹ thuật" của nghề thiết kế, nhưng nó tạo ra khác biệt khổng lồ giữa một sản phẩm nghiệp dư và một sản phẩm chuyên nghiệp. Khi bạn nắm vững nó, bạn sẽ giao file đúng chuẩn cho developer, trang web của bạn tải nhanh hơn, điểm SEO cao hơn, và quan trọng nhất: người dùng không bỏ đi.
Khái niệm cốt lõi
Raster vs Vector — hai thế giới khác nhau
Trước khi nói về định dạng, bạn cần phân biệt hai loại ảnh cơ bản.
Raster (ảnh bitmap) được tạo từ một lưới các pixel. Mỗi pixel mang một màu. Ảnh chụp, screenshot, tranh kỹ thuật số đều là raster. Điểm yếu: khi phóng to vượt độ phân giải gốc, ảnh bị vỡ (pixelated). JPEG, PNG, WebP, AVIF đều là raster.
Vector được tạo từ các phương trình toán học mô tả đường nét, hình khối. Logo, icon, biểu đồ thường là vector. Điểm mạnh: phóng to bao nhiêu cũng sắc nét, dung lượng thường rất nhỏ. SVG là định dạng vector phổ biến nhất trên web.
Quy tắc đơn giản: logo và icon dùng vector (SVG), ảnh chụp và ảnh phức tạp dùng raster.
Các định dạng raster — chọn đúng vũ khí
JPEG (.jpg) — Định dạng kỳ cựu cho ảnh chụp và ảnh có nhiều màu chuyển sắc mượt. JPEG dùng nén "có mất mát" (lossy): nó vứt bỏ một phần thông tin mà mắt người khó nhận ra để giảm dung lượng. Bạn có thể chỉnh mức nén (quality) từ 0–100. Điểm yếu chí mạng: JPEG không hỗ trợ nền trong suốt (transparency) và xử lý kém với các cạnh sắc nét, chữ, đường viền — sẽ xuất hiện vệt nhiễu xung quanh (gọi là artifact). Đừng bao giờ lưu logo hay screenshot có chữ dưới dạng JPEG.
PNG (.png) — Định dạng cho ảnh cần nền trong suốt và cạnh sắc nét: logo, icon, screenshot giao diện, ảnh có chữ. PNG dùng nén "không mất mát" (lossless), nên giữ nguyên từng chi tiết. Đổi lại, file PNG ảnh chụp thường nặng gấp nhiều lần JPEG. Có hai biến thể: PNG-8 (256 màu, nhẹ, hợp với đồ họa đơn giản) và PNG-24/32 (hàng triệu màu + kênh alpha trong suốt).
WebP (.webp) — Định dạng hiện đại do Google phát triển, hỗ trợ cả lossy lẫn lossless, cả trong suốt lẫn ảnh động. Đây là điểm mạnh lớn nhất: WebP làm được gần như mọi thứ JPEG và PNG làm, nhưng nhẹ hơn đáng kể. Một bức ảnh WebP thường nhỏ hơn JPEG tương đương khoảng 25–35%, và nhỏ hơn PNG tới 50–80% với cùng chất lượng cảm nhận. Năm 2026, WebP được hỗ trợ trên gần như toàn bộ trình duyệt hiện đại, nên nó nên là lựa chọn mặc định của bạn cho hầu hết ảnh raster.
AVIF (.avif) — Định dạng thế hệ mới nhất, dựa trên codec video AV1. AVIF cho dung lượng nhỏ hơn cả WebP (thường nhỏ hơn JPEG 50%+) ở cùng chất lượng, hỗ trợ HDR, dải màu rộng. Nhược điểm: nén AVIF tốn nhiều thời gian xử lý hơn, và một số trình duyệt/công cụ cũ chưa hỗ trợ đầy đủ. Chiến lược tốt năm 2026 là dùng AVIF làm lựa chọn ưu tiên, WebP làm dự phòng, JPEG/PNG làm phương án cuối.
SVG (.svg) — Như đã nói, là vector. Tuyệt vời cho logo, icon, hình minh họa phẳng. Dung lượng cực nhỏ, sắc nét trên mọi màn hình (kể cả màn Retina), và có thể chỉnh màu, animate bằng CSS. Nhưng SVG không phù hợp với ảnh chụp — một bức ảnh chân dung chuyển thành SVG sẽ nặng khủng khiếp.
Hai khái niệm sống còn: kích thước hiển thị và độ phân giải
Đây là lỗi phổ biến nhất mà designer mới mắc phải. Bạn xuất một ảnh 4000×3000 pixel từ Figma rồi chèn vào một khung chỉ rộng 400px trên trang. Trình duyệt vẫn tải toàn bộ 12 triệu pixel rồi mới thu nhỏ lại để hiển thị. Người dùng tốn băng thông cho 11 triệu pixel họ không bao giờ nhìn thấy.
Nguyên tắc: kích thước file ảnh nên khớp với kích thước hiển thị thực tế, có tính đến màn hình mật độ cao (Retina/2x). Nếu khung ảnh rộng tối đa 400px, hãy xuất ảnh khoảng 800px (cho màn 2x) là đủ — không cần hơn.
Tình huống thực tế
Ví dụ 1 — Cửa hàng thời trang online "Lúa Studio" giảm 60% dung lượng trang
Một thương hiệu thời trang nhỏ ở TP.HCM, gọi là Lúa Studio, có trang sản phẩm tải rất chậm. Designer kiểm tra và phát hiện: mỗi trang danh mục có 24 ảnh sản phẩm, mỗi ảnh là JPEG 2.4 MB xuất thẳng từ máy ảnh, kích thước 3000×4000px, trong khi trên web chỉ hiển thị ở khung 300×400px. Tổng trang nặng tới 58 MB.
Cách xử lý: resize mỗi ảnh xuống 600×800px (cho màn 2x), chuyển sang WebP với quality 80. Kết quả: mỗi ảnh chỉ còn khoảng 45 KB — giảm hơn 98% so với bản gốc. Tổng trang từ 58 MB xuống còn khoảng 1.1 MB. Thời gian tải trên 4G giảm từ 14 giây xuống dưới 2 giây. Tỷ lệ thoát trang (bounce rate) giảm rõ rệt trong tháng tiếp theo.
Bài học: Ảnh gốc từ máy ảnh hoặc Figma gần như không bao giờ phù hợp để đưa thẳng lên web. Resize đúng kích thước hiển thị là bước tối ưu hiệu quả nhất, thường còn quan trọng hơn cả chọn định dạng.
Ví dụ 2 — Logo bị "răng cưa" trên trang của một startup fintech
Một startup fintech tại Hà Nội đặt designer làm bộ nhận diện. Khi lên web, logo trông mờ và có viền răng cưa trên màn hình laptop Retina, đặc biệt xấu khi người dùng zoom trang. Nguyên nhân: developer được giao một file PNG logo 200×60px và phóng to để vừa header.
Giải pháp: designer xuất lại logo dưới dạng SVG. File chỉ nặng 4 KB (so với PNG 18 KB), sắc nét tuyệt đối ở mọi mức zoom và mọi mật độ màn hình, lại còn cho phép đổi màu logo bằng CSS khi chuyển sang dark mode mà không cần file thứ hai.
Bài học: Với logo và icon — những thứ là đường nét, hình khối phẳng — luôn ưu tiên SVG. Nó vừa nhẹ hơn, vừa sắc nét hơn, vừa linh hoạt hơn.
Ví dụ 3 — Báo điện tử và chiến lược responsive images
Một tòa soạn báo điện tử ở Đông Nam Á phục vụ hàng triệu lượt đọc mỗi ngày, phần lớn từ điện thoại tầm trung. Họ nhận ra việc gửi cùng một ảnh lớn cho mọi thiết bị là lãng phí. Họ triển khai responsive images dùng thuộc tính srcset: máy tính bàn nhận ảnh 1600px, tablet nhận 1000px, điện thoại chỉ nhận 640px. Đồng thời ưu tiên AVIF, dự phòng WebP.
Kết quả: lượng băng thông ảnh trung bình mỗi bài đọc trên di động giảm khoảng 40%, chi phí CDN giảm theo, và chỉ số Largest Contentful Paint (thời gian phần tử lớn nhất hiện ra) cải thiện đáng kể — kéo theo điểm SEO tốt hơn.
Bài học: Tối ưu không chỉ là một ảnh nhẹ, mà là gửi đúng kích thước cho đúng thiết bị. Đây là tư duy bạn nên truyền đạt cho developer trong giai đoạn handoff.
Hướng dẫn từng bước
Đây là quy trình bạn có thể áp dụng cho mọi dự án:
Bước 1 — Phân loại từng ảnh. Trước khi xuất, hỏi: đây là ảnh chụp/phức tạp, hay là logo/icon/đồ họa phẳng? Phức tạp → raster (WebP/AVIF/JPEG). Phẳng/đường nét → vector (SVG).
Bước 2 — Xác định kích thước hiển thị thực tế. Đo khung chứa ảnh trên thiết kế (ví dụ 400px). Nhân đôi cho màn hình mật độ cao → xuất ở 800px. Đừng xuất lớn hơn mức cần thiết.
Bước 3 — Chọn định dạng theo nội dung.
- Ảnh chụp, ảnh nền: WebP (hoặc AVIF nếu pipeline hỗ trợ).
- Ảnh cần nền trong suốt: WebP/PNG.
- Logo, icon, minh họa phẳng: SVG.
- Ảnh động đơn giản: WebP động (thay cho GIF, vì GIF rất nặng).
Bước 5 — Tối ưu thêm bằng công cụ. Chạy ảnh qua công cụ nén: Squoosh (web app của Google, trực quan, so sánh trước/sau), TinyPNG, hoặc ImageOptim (macOS). Với SVG, dùng SVGO để loại bỏ metadata thừa.
Bước 6 — Đặt tên file và bàn giao chuẩn. Tên file mô tả rõ ràng, không dấu, không khoảng trắng: hero-banner-mobile.webp. Khi handoff, ghi rõ cho developer kích thước hiển thị dự kiến và gợi ý dùng srcset cho responsive.
Bước 7 — Lazy loading. Nhắc developer thêm loading="lazy" cho ảnh nằm dưới màn hình đầu tiên, để trình duyệt chỉ tải ảnh khi người dùng cuộn tới — tiết kiệm băng thông cho lần tải đầu.
Lỗi thường gặp & mẹo
Lỗi 1 — Xuất ảnh quá lớn so với khung hiển thị. Đây là lỗi số một. Một ảnh 4000px nhồi vào khung 400px lãng phí 90% băng thông. Luôn resize trước khi nén.
Lỗi 2 — Dùng PNG cho ảnh chụp. PNG lossless khiến ảnh chụp nặng gấp 5–10 lần WebP cùng chất lượng. PNG chỉ dành cho ảnh cần nền trong suốt hoặc đồ họa cạnh sắc.
Lỗi 3 — Dùng JPEG cho logo, screenshot có chữ. JPEG tạo vệt nhiễu quanh đường viền sắc nét và chữ. Kết quả nhìn bẩn và thiếu chuyên nghiệp. Dùng SVG hoặc PNG.
Lỗi 4 — Dùng GIF cho ảnh động. GIF chỉ 256 màu nhưng dung lượng khổng lồ. Một GIF 3 MB có thể thay bằng WebP động hoặc video MP4 chỉ vài trăm KB.
Lỗi 5 — Quên thuộc tính alt. Đây là lỗi vừa về accessibility vừa về SEO. Mọi ảnh có ý nghĩa nội dung cần alt mô tả. Ảnh trang trí thuần túy thì để alt="".
Lỗi 6 — Không đặt width và height. Thiếu kích thước khiến bố cục "nhảy" khi ảnh tải xong (layout shift), gây khó chịu và làm xấu điểm Core Web Vitals.
Mẹo: Luôn so sánh trước/sau bằng Squoosh để mắt bạn quen với việc nhận biết "ngưỡng" mà giảm thêm quality bắt đầu thấy rõ. Sau vài chục ảnh, bạn sẽ ước lượng được mức nén hợp lý mà không cần thử nhiều lần.
Mẹo: Với ảnh nền lớn full-width, hãy cân nhắc làm mờ nhẹ hoặc tăng nén — vì có lớp text đè lên trên, người dùng ít chú ý chi tiết ảnh nền, cho phép bạn nén mạnh tay hơn.
Bài tập thực hành
- Phân loại định dạng. Lấy 5 ảnh bất kỳ từ một dự án của bạn (ảnh chụp sản phẩm, logo, icon, screenshot, ảnh nền). Với mỗi ảnh, viết ra định dạng tối ưu nên dùng và lý do.
- Thực hành nén với Squoosh. Truy cập squoosh.app. Tải lên một ảnh chụp JPEG gốc. Lần lượt xuất bản WebP quality 80 và AVIF quality 60. Ghi lại dung lượng từng bản và quan sát bằng mắt xem có khác biệt chất lượng đáng kể không. Mục tiêu: cảm nhận được "điểm cân bằng vàng".
- Resize đúng kích thước. Lấy một ảnh gốc lớn (ví dụ 3000px). Giả định nó hiển thị trong khung 500px trên màn 2x. Resize xuống 1000px, nén WebP quality 80, rồi so sánh dung lượng cuối với bản gốc. Tính ra bạn đã giảm bao nhiêu phần trăm.
- Viết ghi chú handoff. Soạn một đoạn ngắn (3–4 dòng) bạn sẽ gửi developer kèm bộ ảnh, ghi rõ: định dạng, kích thước hiển thị dự kiến, gợi ý dùng
srcsetvàloading="lazy". Đây là kỹ năng giao tiếp quan trọng của designer chuyên nghiệp.
Tóm tắt
Hình ảnh là phần nặng nhất của hầu hết trang web, nên tối ưu chúng là trách nhiệm trực tiếp của designer, không phải chỉ của developer. Hãy ghi nhớ những điểm cốt lõi:
- Phân biệt raster và vector: ảnh chụp/phức tạp dùng raster; logo/icon/đồ họa phẳng dùng SVG.
- Chọn đúng định dạng raster: WebP là lựa chọn mặc định năm 2026 (nhẹ, đa năng); AVIF cho mức nén tốt nhất; JPEG cho ảnh chụp khi cần tương thích rộng; PNG chỉ khi cần nền trong suốt hoặc cạnh sắc.
- Resize trước, nén sau: khớp kích thước file với kích thước hiển thị thực tế (nhân đôi cho màn Retina) là bước tối ưu hiệu quả nhất.
- Quality 75–85 là điểm cân bằng vàng cho ảnh lossy.
- Tư duy responsive: gửi đúng kích thước cho đúng thiết bị bằng
srcset, và dùngloading="lazy"cho ảnh dưới màn hình đầu. - Đừng quên
alt,width/heightđể tốt cho accessibility, SEO và tránh layout shift.