Tối ưu hóa website nhằm tăng cường khả năng tải web ở mức độ nhanh nhất là một trong những ưu tiên hàng đầu của những người làm web. Tôi cũng đã có nhiều bài viết chia sẻ về vấn đề này với các bạn, như 3 tuyệt chiêu với .htaccess hay tối ưu hóa giao diện người dùng với YSlow. Hôm nay tôi sẽ giới thiệu với bạn thêm một số kỹ thuật tối ưu hóa hình ảnh trên trang để trang web của bạn nhẹ hơn, tải nhanh hơn.
Phụ mục
1. Điều chỉnh kích thước hình ảnh cho phù hợp với nội dung
Không sử dụng HTML để thay đổi kích thước hình ảnh mà hãy để nó hiển thị đúng kích thước của nó. Bất kỳ một người thiết kế website cũng biết điều này nhưng các Editor lại thường bỏ qua nó. Họ thường thay đổi kích thước bằng cách tùy chỉnh kích thước ảnh từ bộ Editor WYSIWYG.
Điều này có vẻ đơn giản nhưng nó tác động khá lớn đến thời gian tải trang vì ngoài việc phải tải môt hình ảnh lớn (thậm chí là rất lớn) trình duyệt còn phải xử lý kích thước hình ảnh và điều này thật chẳng hay ho chút nào.
2. Kích thước và độ phân giải màn hình
Kích thước (pixel) là trị số đo lường chiều rộng và chiều cao của ảnh tính bằng pixel. Còn độ phân giải là độ mịn của chi tiết trong hình bitmap và được đo bằng số lượng pixel trong mỗi inch(ppi). Càng nhiều pixel trong mỗi inch độ phân giải của ảnh càng cao và nói chung là độ phân giải của ảnh càng cao thì chất lượng ảnh sẽ càng tốt hơn.
Trên môi trường web, độ phân giải không ảnh hưởng đến chất lượng hình ảnh nhưng nó ảnh hưởng đến trọng lượng ảnh. Nếu bạn tải về 2 hình ảnh cùng kích thước là 250px x 250px trên 2 màn hình lần lượt là 72dpi và 300dpi sẽ chẳng khác gì nhau cả. Độ phân giải cao chỉ có ích khi bạn thay đổi kích thước ảnh (lớn hơn) hoặc khi in ấn ra giấy A4 chẳng hạn.
3. Tránh tải nhiều ảnh lớn trên cùng môt trang
Về thư viện ảnh hoặc các blog có nhiều ảnh cũng có một số vấn đề mà bạn cần phải lưu tâm: không tải hàng ngàn ảnh trên cùng một trang, thậm chỉ là ngay cả những ảnh bé nhỏ chứ chưa cần đến ảnh lớn. Về việc này bạn có thể sử dụng các script để cải tiến quá trình tải trang. FaceBook, Flick đang làm điều đó với các script cho phép tải tiếp nội dung khi bạn kéo xuống chân trang. Bạn cũng nên học tập từ họ.
Ảnh raster và vector
Một ảnh raster được tạo ra bằng các điểm ảnh (pixel), các ảnh vector được tạo ra bằng các hình học cơ bản.
Vậy nên, hãy sử dụng ảnh vector cho:
– Logo
– Icon
Một ảnh raster sẽ phụ thuộc vào độ phân giải, nếu bạn phóng to một ảnh raster bạn sẽ làm giảm số lượng pixel. Đối với vector, hình ảnh sẽ không bị thay đổi bất kể kích thước.
Thuật toán nén ảnh: lossy và lossless
Nén ảnh cũng là một khuyến cáo được Google đưa ra, bạn cũng có thể tìm được lời khuyên tương tự ở các công cụ kiểm tra tốc độ tải trang. Về cơ bản, chúng ta có 2 thuật toán nén:
- Lossy compression
- Lossless compression
Lossless và Lossy về cơ bản đều là thuật toán nhằm nén ảnh, tất cả các thông tin về ảnh sẽ được phục hồi khi giải nén. Với lossless compression, tất cả các thông tin sẽ được phục hồi sau giải nén. Còn với Lossy compression môt số thông tin có thể bị mất sau khi giải nén. Ví dụ với một ảnh PNG, số lượng màu và chất lượng màu có thể giảm.
Nhưng không sao cả, tôi sẽ chọn lossy nếu nó tăng tốc độ tải trang lên đáng kể.
Chọn Lossy hay lossless ?
Về viêc nén ảnh, dĩ nhiên là Lossy nén ảnh tốt hơn so với Lossless đặc biệt là sử dụng trên môi trường web. Hãy quan sát hình ảnh dưới đây một cách trực quan trước và sau khi sử dụng phương pháp nén Lossy: chất lượng ảnh hầu như không có sự thay đổi nhưng có sự thay đổi lớn về dung lượng ảnh – giảm từ 254KB xuống còn 39KB. Bằng cách sử dụng phương pháp nén Lossless compression, dung lượng ảnh giảm từ 254Kb xuống 180Kb. Dĩ nhiên chúng ta dễ dàng nhận ra phương pháp Lossy là tốt hơn.
Crop and resize hình trong Photoshop
Nếu bạn sử dụng Photoshop để thiết kế website thì một trong những công việc khiến bạn tốt thời gian nhiều nhất ngoài công việc thiết kế đó là lựa chọn định dạng hình ảnh và độ phân giải hợp lý cho từng hình ảnh. Tìm ra sự cân đối giữa chất lượng hình ảnh và dung lượng ảnh rất quan trọng và hầu như là chìa khóa để mang lại một website có tốc độ tải tốt.
