Một bức ảnh trị giá nghìn lời vì nó truyền tải nhiều thông điệp hơn. Trong thế giới số này, khoảng 64% website – truyền thông, thương mại điện tử, du lịch – đều có hình ảnh. Vì con người là sinh vật trực quan và phần lớn não bộ dành cho xử lý hình ảnh. Website ngày nay dùng sự thật nổi tiếng này để thu hút sự chú ý. Nhưng một số website với hình ảnh kém chất lượng và không đúng quy cách không thuyết phục được.
Website tải quá 3 giây thường làm mất tương tác người dùng và ranking Google thấp. Do đó, nếu website thiếu người truy cập, ranking Google kém, bạn cần tối ưu hóa hình ảnh và làm theo các mẹo dưới đây:
Trước khi học tối ưu hóa ảnh, hãy biết tối ưu hóa ảnh là gì và tại sao quan trọng.
Tối ưu hóa ảnh là gì?
Tối ưu hóa ảnh là quy trình giảm dung lượng file mà không làm giảm chất lượng ảnh. Nghĩa là bạn có ảnh chất lượng cao đúng định dạng, kích thước, kích thước, độ phân giải với dung lượng nhỏ nhất có thể. Ảnh có thể tối ưu hóa theo nhiều cách như nén dung lượng, resize (thay đổi kích thước), và caching. Điều này giúp cải thiện hiệu suất website và tăng tốc độ tải trang.
Tại sao tối ưu hóa ảnh quan trọng?
Người dùng thường rời website tải quá 3 giây, làm tăng tỷ lệ thoát (bounce rate) và cuối cùng ảnh hưởng tỷ lệ chuyển đổi (conversion rate). Nhưng với tối ưu hóa ảnh, tốc độ tải trang tăng, SEO ranking website cải thiện, trải nghiệm người dùng nâng cao.
Tốc độ tải trang (Page load speed) là thời gian trang web tải hoàn toàn. Website tải dưới 2 giây được truy cập và yêu thích nhất. Do đó, đóng vai trò then chốt trong ranking website và làm cho tối ưu hóa ảnh quan trọng. Không chỉ vậy, tối ưu hóa ảnh cũng liên quan đến SEO ranking và chuyển đổi.
Dưới đây là một số mẹo tối ưu hóa ảnh cho web và làm trang tải nhanh hơn.
1. Lưu ảnh trong đúng esquema màu (color scheme)
Chủ yếu, RGB và CMYK là hai esquema màu máy tính dùng để hiển thị ảnh. RGB là viết tắt của (red, green, blue) và CMYK là cyan, magenta, yellow và black. RGB là không gian màu tiêu chuẩn dùng bởi camera, máy tính và CMYK dùng cho in ấn.
Do đó, nếu dùng ảnh CMYK trên web chúng làm chậm tải trang và cũng không sáng, sống động như RGB. Vì vậy, để thu hút người dùng và tăng tốc độ tải, ảnh esquema màu RGB phải dùng.
Để chuyển ảnh CMYK sang RGB, Adobe Photoshop có thể dùng. Sau khi đổi hồ sơ màu của ảnh, file nên lưu lại với tên khác để dễ phân biệt hai file.
2. Nén dung lượng file ảnh
File web lớn hơn 2MB không nên dùng vì nó làm chậm tải trang. Do đó, giới hạn dung lượng 2MB (2048 kilobytes) là ý tưởng tốt. Bên cạnh đó, ảnh dùng cho web không nên bị pixelated (nhiễu pixel). Nghĩa là ảnh phải nét và chất lượng ảnh phải đảm bảo. Chất lượng ảnh phụ thuộc vào cài đặt nén, dung lượng file cuối. Với cài đặt nén đúng, dung lượng file nhỏ và chất lượng ảnh tốt có thể đạt được.
Thông thường, ảnh lưu với mức nén 70-80% không bị pixelated. Công cụ nén ảnh có thể dùng cho việc này.
3. Lưu ảnh đúng định dạng file
Có bốn định dạng file chính JPG, PNG, GIF và SVG để lưu đồ họa và ảnh. Nhưng mỗi định dạng có ưu và nhược điểm riêng. Do đó, mỗi đồ họa hoặc ảnh cần lưu trong định dạng cụ thể dựa trên raster (bitmap) hoặc vector.
Ảnh Raster (Raster Images) có số pixel hữu hạn và có thể chụp bằng chương trình dựa trên pixel như scanner hoặc camera. Khi phóng to, ảnh raster mất chất lượng. Định dạng phù hợp nhất cho ảnh raster là JPG, PNG và GIF.
Trong khi Đồ họa Vector (Vector graphics) được tạo bằng phần mềm vector và ảnh này có thể mở rộng mà không giảm chất lượng. Định dạng phù hợp cho ảnh vector là SVG và GIF. Nhưng ảnh vector cũng có thể lưu JPG hoặc PNG. Nhưng làm vậy làm mất khả năng scale vô hạn của đồ họa.
JPG
Ưu điểm JPG
- Dung lượng file tối thiểu
- Ảnh chất lượng cao tốt nhất
- Tương thích web và thiết bị hiện đại
Nhược điểm JPG
- Chất lượng ảnh giảm khi nén
- Không hỗ trợ nền trong suốt
Khi nào dùng JPG
JPG dùng khi cần ảnh tĩnh chất lượng cao. Nhưng không nên dùng trên nền màu.
PNG
Định dạng raster phổ biến khác linh hoạt hơn JPG là PNG. Nó hỗ trợ hơn 16 triệu màu, kênh alpha hoặc nền trong suốt.
Ưu điểm PNG
- Cung cấp nền trong suốt để xếp chồng ảnh trên nền màu
- Ảnh có thể nén mà không mất chất lượng
Nhược điểm PNG
- Dung lượng file lớn hơn JPG
- Không hỗ trợ animation
Khi nào dùng PNG
Khi cần đồ họa với nền không trắng, văn bản, cạnh sắc nét, logo, icon, và thiết kế khác, đồ họa PNG nên dùng.
GIF
GIF là định dạng raster khác cho phép ảnh chuyển động bằng cách sắp xếp ảnh lên nhau tạo chuyển động.
Ưu điểm GIF
- Có thể tạo thông điệp và ảnh hoạt hình
- Hỗ trợ nền trong suốt
Nhược điểm GIF
- Dung lượng và chất lượng ảnh liên quan đến màu. Nhiều màu nghĩa là ảnh sắc nét hơn, nhưng tăng dung lượng. Ít màu làm ảnh bị grainy (nhiễu).
- Chỉ dùng ảnh với 256 màu
Khi nào dùng GIF
GIF cho phép hiển thị nhiều ảnh với sự linh hoạt và thay đổi thú vị trong cùng đồ họa. Tuy nhiên, đồ họa nhiều màu tăng dung lượng file.
SVG
Khác với JPG, PNG, GIF, SVG là định dạng vector. Nó cho phép thao tác đối tượng với đồ họa sắc nét trên web. Dùng chương trình như Inkscape, Adobe Illustrator, và Sketch để chỉnh sửa và tạo ảnh vector.
Ưu điểm SVG
- Dung lượng file nhỏ hơn
- File có thể resize mà không mất chất lượng
- Hữu ích cho developer
- Chương trình như Adobe Illustrator có thể chỉnh sửa ảnh vector
- Cho phép animation
- Được Microsoft Office hỗ trợ cho đồ họa
Nhược điểm SVG
- Dung lượng và chất lượng ảnh liên quan đến màu. Nhiều màu = ảnh sắc nét nhưng dung lượng lớn. Ít màu = ảnh grainy.
- Giới hạn dùng ảnh chỉ 256 màu
Khi nào dùng SVG
Vì ảnh SVG có thể zoom không mất chất lượng, chúng dùng cho đồ họa, logo, icon, và minh họa khác trên web. Ngoài ra, dùng cho thiết bị di động vì trông tuyệt vời trên màn hình mật độ pixel cao như smartphone.
4. Xuất nhiều kích thước cho màn hình smartphone
Với smartphone phổ biến, người dùng muốn truy cập mọi thứ trên di động. Nhưng vì thiết bị này có màn hình hơn 200 PPI ngược với 72 PPI chuẩn cho PC và web.
Để ảnh hỗ trợ cả hai loại PPI, Adobe Illustrator và Photoshop có thể dùng. Điều này giúp xuất ảnh với tỷ lệ 2X và 3X. Nghĩa là ảnh gốc cùng với 200% và 300% sẽ được tạo. Cũng có thể xuất ảnh độ phân giải cao hơn.
5. Tăng kích thước ảnh nhỏ lên 115%
Nếu ảnh raster kích thước nhỏ dùng, cần phóng to 115% để giảm pixelation, dùng Adobe Photoshop.
Sử dụng các mẹo trên, chúng ta có ảnh sắc nét, tập trung. Những ảnh tối ưu này giúp thu hút sự chú ý và giữ người dùng trên trang web lâu hơn. Không chỉ làm trang web đẹp hơn mà còn giúp giảm thời gian tải trang.
Tối ưu hóa ảnh không chỉ hữu ích cho web mà còn hữu ích lưu trữ ảnh và làm chúng trông hấp dẫn. Ảnh nặng dùng nhiều bandwidth mà người dùng không thích, do đó ảnh cần tối ưu hóa.