PNG, GIF – giải pháp để có hình ảnh trong suốt

PNG, GIF - giải pháp để có hình ảnh trong suốt
1. Lịch sử của .GIF

GIF (viết tắt của Graphics Interchange Format; trong tiếng Anh nghĩa là “Định dạng Trao đổi Hình ảnh”, chính thức đọc như “pinh”) là một định dạng tập tin hình ảnh bitmap cho các hình ảnh dùng ít hơn 256 màu sắc khác nhau và các hoạt hình dùng ít hơn 256 màu cho mỗi khung hình. GIF là định dạng nén dữ liệu đặc biệt hữu ích cho việc truyền hình ảnh qua đường truyền lưu lượng nhỏ. Định dạng này được CompuServe cho ra đời vào năm 1987 và nhanh chóng được dùng rộng rãi trên World Wide Web cho đến nay.

Định dạng GIF đã được đăng ký sở hữu trí tuệ bởi Unisys, và những ai muốn viết chương trình để tạo ra hoặc hiển thị tập tin GIF phải trả tiền bản quyền.GIF là một giải pháp tốt cho hình ảnh trên mạng, cho các hoạt hình nhỏ và ngắn.

2. PNG, từ đâu em tới

Định dạng PNG được thiết kế để thay GIF, cho hình ảnh tĩnh. PNG nén tốt hơn và có nhiều tính năng kỹ thuật hay hơn GIF. Tất cả tính năng của GIF, trừ nén hoạt hình, đều được hỗ trợ bởi PNG.PNG là một dạng hình ảnh sử dụng phương pháp nén dữ liệu mới – không làm mất đi dữ liệu gốc. PNG được tạo ra nhằm cải thiện và thay thế định dạng ảnh GIF với một định dạng hình ảnh không đòi hỏi phải có giấy phép sáng chế khi sử dụng (tức là free – nếu hiểu theo một cách nào đó).

Động cơ thúc đẩy cho việc tạo ra định dạng PNG bắt đầu vào khoảng đầu năm 1995, sau khi Unisys công bố họ sẽ áp dụng bằng sáng chế vào thuật toán nén dữ liệu LZW- được sử dụng trong định dạng GIF. Thuật toán được bảo vệ bởi bằng công nhận độc quyền sáng tạo ở trong nước Mỹ và tất cả các nước trên thế giới. Điều nảy rất quan trọng nếu bạn tuân thủ theo luật sở hữu trí tuệ, bạn sẽ phải trả phí khi viết chương trình để tạo ra hoặc hiển thị tập tin GIF.

Tuy nhiên, cũng đã có một số vấn đề với định dạng GIF khi cần có một số thay đổi trên hình ảnh, nhất giới hạn của nó là 256 màu trong thời điểm máy tính có khả năng hiển thị nhiều hơn 256 màu đang trở nên phổ biến. Định dạng GIF đã lỗi thời về lượng màu sắc hiển thị, vì 256 màu là một con số quá ư nhỏ bé so với 156.000.000 màu mà các monitor (dù là) cùi bắp nhất của chúng ta cũng có thể hiển thị được.

3. So sánh PNG và GIF

  • Giảm thiểu dung lượng: Trong tất cả các định dạng   ảnh phổ thông hiện nay thì ảnh PNG có thể coi là có dụng lượng nhỏ nhất. Điều này rất quan trọng khi sử dụng PNG trong môi trường web
  • Độ sâu của mầu:Ảnh PNG hỗ trợ đến true color 48bit màu. Trong khi đó ảnh gif chỉ ở mức 256 màu.
  • Tùy biến kênh Alpha: Bạn hoàn toàn có thể kiểm soát đựoc mức độ trong suốt trên định dạng PNG. Bạn có thể xem ví dụ mẫu kèm theo, với độ trong suốt tuyệt vời.

Với các yếu tố như thế, việc sử dụng PNG mang lại rất nhiều lợi ích. Bạn có thể xem sức mạnh của việc sử dụng PNG tại đây. Trong khi JPEG luôn là lựa chọn hàng đầu cho việc nén ảnh chụp, với các hình ảnh trong suốt, PNG sẽ luôn xứng đáng với lòng mong đợi của bạn (nhớ chọn PNG 24 khi save for web trong chương trình Photoshop).

4. Khi nào bạn cần trong suốt

Chúng ta hãy cùng xét ví dụ sau đây

Để hiển thị giống như thiết kế phía trên, có lẽ bạn sẽ vã mồ hôi hột khi tối ưu. Yêu cầu phần nội dung lúc nào cũng ở giữa trang, ở bất kỳ độ phân giải màn hình nào? Cái khó là ở chỗ đó!!!

Phần nội dung canh giữa: quá dễ, bạn có thể sử dụng DIV + CSS.

Backgroud hoa văn phức tạp có thể dùng mẫu lặp (repeat) để giảm dung lượng.

Còn các góc bo tròn hay hình dạng phức tạp thì sao??

Dùng GIF gần như  là không thể, với dạng background phức tạp, độ trong suốt của GIF chỉ là kẻ ăn hại không hơn không kém. Đường biên răng cưa và xấu xí kinh khủng trên nền hoa văn.

Bạn dùng PNG được hỗ trợ rất tốt trên các trình duyệt khác như Firefox, Opera, thậm chí là Safari nhưng IE7 thì phần trong suốt là một màu trắng tinh khôi đang cười chọc quê bạn. Rõ ràng Microsoft luôn có lý do để làm thế, IE tặng kèm với Window, với những Filter độc quyền cho đứa con cưng của mình, xuất hiện Popup khi hiển thị Flash.

Còn một cách là bạn xuất sang file Flash, embed với chế độ trong suốt. Nhưng như vậy thì quá sức phức tạp và đòi hỏi bạn phải biết thêm Flash nữa.

5. Có cách nào dễ hơn không

Chúng ta sử dụng hình PNG trong suốt, vì nó được hỗ trợ từ hầu hết các trình duyệt và fix lỗi trên IE là một giải pháp đơn giản và hiệu quả. Ở Việt Nam, đa phần người sử dụng vẫn xài IE do kèm theo Window nên việc fix lỗi rất cần thiết.

Bạn download file Fix lỗi hiển thị.. đính kèm bài viết, giải nén và chép vào thư mục trên chứa website. Nó gồm có 2 file:

1. blank.gif -> bạn chép nó trên root – folder ngoài cùng, nếu không bạn sẽ phải điều chỉnh lại file htc. Bạn muốn trên root hoàn toàn sạch sẽ là một điều rất tốt, vì bài viết dành cho những ai mới sử dụng cách này lần đâu, cần cách thức đơn giản hiệu quả, nên tôi khuyên bạn nên suy nghĩ tới vấn đề này sau khi bạn thử nghiệm thành công.

2. pngbehavior.htc-> file này sẽ tự động sửa lỗi trong suốt cho TẤT CẢ các file PNG mà bạn sử dụng khi hiển thị trên IE.

Thêm đoạn code sau đây giữa tag head của trang HTML
<style type=”text/css”>
<!–
img {behavior: url(pngbehavior.htc);}

–>
</style>

Quan trọng: Bạn nhớ  điều chỉnh đường dẫn tới file pngbehavior.htc cho chính xác nhé!
Bây giờ bạn có thể sử dụng các hình PNG trong suốt rồi đấy.
Quá dễ ! Quá đã!

3 Comments »

  1. 1
    thaocao Says:

    chào bạn, bài viết bạn hay quá, mình đang cần sử dụng hình trong suốt, nhưng mình lại không thấy được
    “”Thêm đoạn code sau đây giữa tag head của trang HTML “”–> nó không hiện thị, bạn có thể cho mình xin đoạn code đó không? thanks bạn nhìu nhìu

  2. 2
    thaocao Says:

    Bạn có thể email cho mình qua email thoasgsg1@gmail.com, bạn có mail không? cho mình xin với, thanks bạn nhìu nhìu😉

  3. 3
    thaocao Says:

    Sorry, minh gửi lại email, Bạn có thể email cho mình qua email thoangsg1@gmail.com, bạn có mail không? cho mình xin với, thanks bạn nhìu nhìu


RSS Feed for this entry

Gửi phản hồi

Please log in using one of these methods to post your comment:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: