Nếu từng chụp với máy ảnh kỹ thuật số, bạn sẽ thấy dung lượng ảnh thường rất lớn. Điều này vừa làm tốn không gian trên ổ cứng máy tính của bạn, vừa khó gửi ảnh cho bạn bè qua email. Có lần tôi được ông anh nhờ gửi một tập ảnh cưới cho người bạn của ông - file có dung lượng đến 400MB, giải pháp up lên các dịch vụ chia sẻ file như Dropbox hay Mediafire rồi gửi link tải thì cũng được thôi, nhưng sẽ tốn rất nhiều thời gian để up với đường truyền mạng thông thường như nhà tôi (và đa số mọi người).
Lúc đấy tôi phải kết hợp 2 thứ để giảm dung lượng ảnh - đó là giảm kích cỡ ảnh và nén ảnh không giảm chất lượng, kết quả là tôi có file gần 40MB, và chỉ mất độ 12 phút để up lên email rồi gửi.
Giảm kích cỡ ảnh thì đơn giản rồi nên Blog Mạng Lưới Toàn Cầu sẽ tập trung vào vấn đề Nén ảnh.
Nén ảnh sẽ làm ảnh có dung lượng giảm đi, tuy nhiên nén có 2 kiểu, thứ nhất là nén và chất lượng ảnh cũng giảm (lossy compression), và thứ hai, nén nhưng chất lượng ảnh không giảm (lossless compression).
 |
| Bức hình bên tay phải chỉ có dung lượng bằng 1/4 hình bên tay trái Nhưng chất lượng cũng suy giảm hẳn Đây gọi là nén mất dữ liệu |
Để dễ hình dung, tôi sẽ đưa ra ví dụ sau. Chẳng hạn bạn có một căn phòng với khá nhiều đồ đạc và bạn bắt đầu cảm thấy chật chội, bạn muốn căn phòng phải thoáng hơn, thế thì bạn phải làm như thế nào?
Hoặc là bạn phải vứt bớt đồ đạc khỏi căn phòng (nén giảm chất lượng), hoặc là bạn phải bỏ chút công sức ra thu xếp đồ đạc cho gọn gàng ngăn nắp, bạn sẽ không phải vứt đi cái gì cả mà vẫn có thêm không gian - đây chính là nén ảnh mà không giảm chất lượng.
Giờ bạn hãy nhìn 2 bức ảnh dạng .png sau, theo bạn nó có chất lượng khác nhau hay giống nhau:
Bức số 1:
Bức số 2:
Đến cuối bài tôi sẽ trả lời về 2 bức hình này.
Tiêu đề bài viết có nói là cả người thường và dân thiết kế web đều cần quan tâm đến vấn đề nén ảnh - bây giờ tôi sẽ trả lời tại sao.
Đối với người thiết kế web, tối ưu trang web là điều quan trọng bên cạnh thẩm mỹ, tối ưu tức là làm sao để trang web trông vẫn vậy mà lại bớt tốn kém nhất. Ví dụ cũng trang web như thế nếu không áp dụng tối ưu dung lượng sẽ tốn thêm 50MB không gian lưu trữ và 5GB đường truyền hàng tháng, cũng như làm trang web tải chậm hơn.
Tối ưu dung lượng ảnh là vô vùng quan trọng, vì ảnh là thành phần chính chiếm dung lượng của bài viết, text thường chỉ quanh quẩn cỡ 10KB, còn độ 3 ảnh là thừa sức 60KB, một bài viết thông thường thì ít cũng là 2 bức ảnh. Video và nhạc thì tất nhiên bạn sẽ sử dụng bên thứ ba để lưu trữ, ví dụ như Youtube hay Zing Mp3. Vì vậy trong thực tế nén ảnh và chống hotlink là phần chính giúp tích kiệm băng thông.
Để chứng minh cho việc ảnh chiếm phần lớn lưu lượng web tải về, chúng ta sẽ làm một thí nghiệm nhỏ với trang báo điện tử Vnexpress.net. Chúng ta sẽ lấy một bài viết bất kỳ làm mẫu rồi xem ảnh chiếm bao nhiêu, chữ bao nhiêu. Bài tôi làm thí nghiệm là Cuộc săn lùng Snowden ở sân bay Nga bài này có 3 ảnh và văn bản khá dài. Và sau đây là kết quả:
 |
| Click vào hình để thấy rõ hơn |
Kết quả cho thấy 3 bức ảnh chiếm tới 176 KB còn chữ chỉ chiếm 9 KB, tức là chênh lệch nhau hơn 19 lần một chút...
...Google có một ứng dụng để kiểm tra khả năng tối ưu của trang web, đó là Google speed test, tôi sẽ dùng chính trang web của tôi để xem thế nào. Kết quả cho thấy tốc độ đạt 96/100 - như vậy là tốt, nhưng Google vẫn gợi ý là tôi còn chưa tối ưu hóa hình ảnh:
...Google có một ứng dụng để kiểm tra khả năng tối ưu của trang web, đó là Google speed test, tôi sẽ dùng chính trang web của tôi để xem thế nào. Kết quả cho thấy tốc độ đạt 96/100 - như vậy là tốt, nhưng Google vẫn gợi ý là tôi còn chưa tối ưu hóa hình ảnh:
 |
| Click vào hình để thấy rõ hơn |
Như ở phần đầu Blog Mạng Lưới Toàn Cầu có hứa với bạn là sẽ trả lời về 2 bức hình giống nhau, câu trả lời là 2 bức hình đó có chất lượng hoàn toàn như nhau, nhưng trong đó có một bức được tạo ra từ việc nén không mất chất lượng từ bức còn lại, nó đã giảm được 51% dung lượng so với bức gốc !!! Giờ thì bạn đoán tiếp xem đâu là bức ảnh nén nhưng không giảm chất lượng còn đâu là bức ảnh gốc :)
Xem thêm:
No comments:
Post a Comment