Thực đơn
trang chủẢnh và video

Cách mở tệp png. PNG là gì

Hơn nữa, là định dạng miễn phí, PNG mang lại nhiều lợi ích thiết thực hơn GIF cho người thiết kế web:
- Nén tốt hơn: Đối với hầu hết các hình ảnh, PNG đạt được kích thước nhỏ hơn tập tin hơn GIF
— Độ sâu màu lớn: PNG cung cấp truecolor lên tới 48 bit, trong khi ở GIF, chúng tôi chỉ có bảng màu 256
— Tính minh bạch của kênh Alpha: Trong khi GIF chỉ cung cấp độ trong suốt nhị phân thì PNG cho phép tạo ra các hiệu ứng trong suốt gần như không giới hạn bằng cách cung cấp kênh alpha để tạo độ trong suốt

Điều đáng chú ý là PNG không cho phép tạo ảnh động như GIF. Nhưng có một tiêu chuẩn (MNG) cho phép điều này, nhưng nó không được hỗ trợ rộng rãi bởi các trình duyệt web và trình soạn thảo đồ họa.

Vậy tại sao GIF vẫn được ưa chuộng đến vậy?

Có lẽ bạn đang thắc mắc tại sao PNG không phải là định dạng được sử dụng rộng rãi trên web nếu nó tốt như quảng cáo. Câu trả lời phần lớn là do quan niệm sai lầm về định dạng và trình duyệt hỗ trợ nó.

Bởi vì trình duyệt web IE 6 hoặc nhiều hơn phiên bản đầu không hỗ trợ đầy đủ các tính năng PNG (bao gồm cả độ trong suốt của kênh alpha), mọi người vẫn tin rằng (mặc dù điều này không chính xác) rằng Internet Explorer hoàn toàn không hỗ trợ PNG hoặc ít nhất là không hỗ trợ độ trong suốt. Trên thực tế, Internet Explorer 5 và 6 hỗ trợ đủ thông số kỹ thuật PNG để làm cho nó có chức năng tương đương (hoặc tốt hơn) với hình ảnh GIF không hoạt hình. Tất cả các trình duyệt khác được đề cập, bao gồm Firefox, Netscape 6 trở lên, Mozilla, Opera 6 trở lên, Safari và Camino đều hỗ trợ đầy đủ tính minh bạch của PNG.

Ngoài quan niệm sai lầm về hỗ trợ trình duyệt, hoạt ảnh tích hợp của GIF đã (và tiếp tục) là lý do chính cho sự thành công của nó. Mặc dù, trong những năm qua, việc sử dụng GIF ngày càng trở nên ít phổ biến hơn so với các công nghệ khác (ví dụ như Flash), vốn ngày càng trở nên phù hợp hơn cho hoạt hình.

Minh bạch - đặc điểm chính GIF và PNG, thường là lý do để nhà thiết kế web lựa chọn định dạng để sử dụng. Mặc dù PNG cung cấp hỗ trợ toàn diện hơn về tính minh bạch nhưng các nhà thiết kế web thường cần tạo phiên bản GIF của hình ảnh để phù hợp với các trình duyệt cũ hơn. Sử dụng CSS, điều này có thể thực hiện được (và hơi tầm thường) bằng cách gửi hình ảnh GIF cho các trình duyệt cũ hơn và hình ảnh PNG chất lượng cao tới các trình duyệt hiểu chúng. Nhưng đây là công việc kép đối với một nhà thiết kế web và kết quả là mọi người đi theo con đường ít phản kháng nhất và tiếp tục sử dụng hình ảnh GIF.

Vì vậy, chúng tôi đã xem xét một số lý do tại sao GIF vẫn rất phổ biến, nhưng hầu hết chúng đều dựa trên sự hiểu sai về các khái niệm hoặc sử dụng quy trình làm việc quen thuộc. Được trang bị một số kiến ​​thức quan trọng về PNG và cách sử dụng PNG một cách đáng tin cậy trong các trình duyệt, bạn có thể tận dụng tất cả những lợi ích mà PNG mang lại.

Còn JPEG thì sao?

JPEG là một định dạng web phổ biến khác và trong hầu hết các trường hợp, chẳng hạn như ảnh (và những thứ tương tự), nó thậm chí còn tốt hơn PNG hoặc GIF. PNG không nhằm mục đích cạnh tranh với JPEG. Nén JPEG tạo ra các tệp nhỏ hơn đáng kể so với PNG khi làm việc với ảnh. Mặt khác, PNG tạo ra các tệp nhỏ hơn khi có văn bản, đường nét nghệ thuật, logo, màu sắc “phẳng”, v.v. bên trong hình ảnh.

Một số ví dụ tuyệt vời về việc sử dụng PNG khiêm tốn

Bây giờ hãy xem cách sử dụng PNG trong thiết kế web. Tôi đã biên soạn tất cả các tệp cho từng ví dụ trong thư mục riêng, có sẵn trên (handyblogger: menu gốc có ở đó nhưng tôi không tìm thấy nguồn).

Dốc

Trong vài năm qua, độ dốc là chuyển tiếp suôn sẻ giữa hai hoặc nhiều màu, trở thành bạn tốt nhất những người thiết kế web. Đặc biệt phổ biến là tinh tế, hầu như không nhìn thấy được tô màu gradient, mà không dễ thấy sẽ tạo ra cảm giác về chiều sâu và kết cấu.
Đôi khi GIF là lựa chọn tốt nhất cho độ dốc. Nếu gradient là một hiệu ứng chuyển tiếp hai màu đơn giản thì GIF sẽ hoạt động hoàn hảo trong đó. Tuy nhiên, giới hạn của GIF chỉ có 256 màu thường tạo ra "dải" cẩu thả và đáng chú ý trong số các chuyển đổi độ dốc phức tạp hơn. Mặt khác, JPEG có thể tạo ra một số độ chuyển màu khá rõ ràng, nhưng thường phải trả giá bằng kích thước lớn hơn tài liệu. Mặc dù độ chuyển màu của JPEG nhìn chung khá tốt nhưng bạn cần nhớ rằng JPEG sử dụng tính năng nén mất dữ liệu, có nghĩa là hình ảnh thu được sẽ không bao giờ đạt được chất lượng của hình ảnh không nén.

Kiểu chuyển màu nền điển hình được đề cập được sử dụng cho các nút, khối hoặc bất kỳ nơi nào khác. Nó có thể giống như Hình 5-1. Theo chiều kim đồng hồ từ góc trên bên trái, chúng ta thấy ảnh gốc (không nén), phiên bản GIF, phiên bản PNG và JPEG. Bạn có thể thấy rằng PNG kết quả có kích thước nhỏ nhất(515 byte). Con số này ít hơn bốn lần so với Ảnh GIF. JPEG lớn hơn PNG một chút ở mức 637 byte và cũng có chất lượng thấp hơn do nén bị mất dữ liệu (mặc dù mắt người không thể phát hiện ra sự khác biệt về chất lượng ở định dạng này). ví dụ đơn giản vẫn còn trong câu hỏi).

Hình 5-1
Bảng điều khiển Save For Web của Photoshop cho thấy sự khác biệt Kích thước tập tin cho cùng một hình ảnh trong định dạng khác nhau

Một hình ảnh sẽ hoạt động trên mọi nền

Đôi khi bạn cần tạo một hình ảnh hoạt động giống nhau trên các chất nền khác nhau. Một số ví dụ chung- đây là logo và biểu tượng. Theo truyền thống, GIF thường thống trị những trường hợp này nhưng có một số lý do khiến PNG có thể chiếm ưu thế hơn lựa chọn tốt nhất trong tình huống này. PNG thường chiếm ưu thế về kích thước tệp đối với logo hoặc một số “nghệ thuật” đơn giản khác. Ngoài ra, tính trong suốt vốn có của PNG khiến sáng tạo đơn giản các tập tin duy nhất hoạt động trên bất kỳ nền nào. PNG cung cấp độ trong suốt nhị phân như GIF, nhưng cũng cung cấp tùy chọn kênh alpha hấp dẫn hơn nhiều, trong đó các pixel có thể trong suốt một phần thay vì chỉ bật hoặc tắt. Việc sử dụng cái sau sẽ làm tăng kích thước tệp, đôi khi thậm chí còn lớn hơn cả GIF có độ trong suốt nhị phân, nhưng nó cho phép khử răng cưa ở các cạnh của hình ảnh của bạn và làm cho việc đặt nó lên trên nền trở nên trang nhã hơn.

Tuy nhiên, tôi đã làm lại khái niệm của họ bằng cách sử dụng hình ảnh màu trắng với các biểu tượng - giấy nến. Họ sử dụng biểu tượng màu trắng trên nền trong suốt, nhìn chung có thể khá hiệu quả. Trong trường hợp này, bạn màu nền CSS sẽ xuất hiện ở khu vực hình vuông hoặc hình chữ nhật xung quanh biểu tượng, thay vì chính biểu tượng đó.

Cả Dan và PJ đều sử dụng ảnh GIF trong suốt thay vì PNG. Điều này hoàn toàn đáp ứng được nhu cầu của họ và họ phải tạo ra các hình ảnh pixel để phù hợp với phong cách của các biểu tượng. Sử dụng PNG, bạn có thể đạt được kỹ thuật tương tự, nhưng với một số ưu điểm ở dạng khử răng cưa và trong suốt một phần để sử dụng trong các biểu tượng chi tiết hơn.

Được rồi, nhưng tính năng này hoạt động trong trình duyệt nào?

Tôi biết bạn đang nghĩ gì: tất cả độ trong suốt PNG này có vẻ ổn nhưng nó có thực tế không?

Tin tốt là mọi thứ trình duyệt hiện đại hỗ trợ đầy đủ Hình ảnh PNG, bao gồm cả tính minh bạch của kênh alpha, những lợi ích mà tôi đã trình bày trong các ví dụ. Safari (tất cả các phiên bản), Firefox (tất cả các phiên bản), Opera (phiên bản 6 trở lên), Netscape (phiên bản 6 trở lên) và Mozilla (tất cả các phiên bản) sẽ thực hiện mọi thứ tôi yêu cầu họ làm. Nhưng có một tin xấu - trình duyệt duy nhất mà tôi chưa đề cập đến và hầu hết người dùng của bạn đều có: Internet Explorer.

Internet Explorer 6 trở xuống không hỗ trợ độ trong suốt của kênh alpha được tích hợp ở định dạng PNG. Kể từ khi lựa chọn trình duyệt (hoặc không lựa chọn) được đưa ra cho hầu hết những người lướt web, lỗ hổng này đã khiến các nhà thiết kế web tránh xa PNG. Nhưng với việc phát hành Internet Explorer 7, chúng tôi đã nhận được hỗ trợ alpha đầy đủ PNG trong suốt trong tất cả các trình duyệt quan trọng. Tiếp theo là gì, có cách nào để làm việc với độ trong suốt PNG alpha trong Internet Explorer 6 trở xuống không? Vì vậy nếu bạn muốn sử dụng hiệu ứng này, không có gì có thể ngăn cản bạn. Internet Explorer 6 và các phiên bản trước đó của nó đòi hỏi nhiều sự chú ý hơn mức cần thiết, nhưng điều đó chắc chắn là có thể.

Hack cho Internet Explorer: AlphaImageLoader

Internet Explorer đi kèm với nhiều bộ lọc gốc khác nhau. Chúng được sử dụng trong CSS, nhưng chúng không phải là một phần của đặc tả CSS chính thức. Nói cách khác, chúng không được chuẩn hóa trên web. Thật không may, Internet Explorer 6 trở xuống không hỗ trợ đầy đủ định dạng PNG (được W3C khuyến nghị), Microsoft có một bộ lọc giúp loại bỏ thiếu sót này: AlphaImageLoader.

Đồ họa máy tính giờ đây đã lấp đầy mọi thứ xung quanh chúng ta, thậm chí chúng ta còn nhìn ảnh thường xuyên trên màn hình, điện thoại hoặc màn hình TV hơn là trên giấy. Nhưng điều thú vị nhất là cách lưu trữ những hình ảnh này rất khác nhau. Có hàng tá định dạng lưu trữ hình ảnh, mỗi định dạng đều có ưu điểm và nhược điểm riêng, nhưng hiệu quả và phổ biến nhất trong số đó vẫn là những định dạng cung cấp chất lượng tốt nhất Và bên cạnh đó, tập tin hóa ra lại nhỏ. Một định dạng như vậy là định dạng PNG. Định dạng này là gì và nó đến từ đâu?

Nói ngắn gọn về lý do xuất hiện của định dạng lưu trữ hình ảnh này...

Vào ngày 4 tháng 1 năm 1995, ý tưởng tạo ra định dạng miễn phí thay vì GIF trả phí và đã có vào tháng 12 cùng năm Hình thức mới PNG đã sẵn sàng và được đề xuất xem xét. Định dạng GIF vào thời điểm đó cho phép thu được các tệp rất nhỏ, thuận tiện để sử dụng trên các trang web. Nhưng trước đây GIF miễn phí bất ngờ được trả tiền - chủ sở hữu bằng sáng chế của nó, công ty Unisys Corporation, dự định tính tiền cho mỗi hình ảnh sử dụng định dạng này. Đây là lý do cho sự phát triển của một định dạng miễn phí có tên PNG, viết tắt của cụm từ tiếng Anh “đồ họa mạng di động”. Đúng như tên gọi, nó được thiết kế để sử dụng trên mạng do kích thước tệp nhỏ, cho phép các trang có đồ họa tải nhanh hơn.

Ưu điểm và nhược điểm của định dạng PNG so với các định dạng khác, đặc biệt là đối thủ cạnh tranh chính của nó là định dạng GIF? Có rất nhiều sự khác biệt, nhưng điều đầu tiên trước tiên…

TRONG định dạng PNG nó sử dụng một thuật toán nén có tên Deflate, thuật toán này được phân phối miễn phí, nghĩa là hoàn toàn miễn phí. Thuật toán này hoạt động dựa trên nguyên tắc của một bộ lưu trữ thông thường, nén thông tin một cách hiệu quả về bảng màu từng pixel và chính điều này cho phép bạn có được một tệp khá nhỏ. Ngoài ra, ở định dạng này, bạn có thể lưu hình ảnh đủ màu, tức là những hình ảnh sử dụng tối đa 48 bit trên mỗi pixel - và đây là gam màu rất lớn, thậm chí nhiều hơn mức mà mắt người có thể cảm nhận được. Định dạng GIF cho phép bạn chỉ sử dụng 256 màu và sắc thái - đủ cho những bức ảnh đơn giản nhất nhưng rất ít cho chất lượng ảnh.

Các định dạng PNG, GIF và TIFF sử dụng cái gọi là kênh alpha. Điều này có nghĩa là bạn có thể làm cho một số phần của hình ảnh trở nên trong suốt. Đồng thời, ở định dạng GIF, việc này được thực hiện rất đơn giản - chỉ một trong các màu được chọn được gán trong suốt và khi xem hình ảnh, nó sẽ không hiển thị - đây là cách bạn có thể tạo nền trong suốt. Định dạng TIFF được cân nhắc kỹ lưỡng hơn về mặt này, nhưng nó cũng rất hiếm khi được sử dụng. size lớn các tập tin thu được. Nhưng ở định dạng PNG, kênh alpha được tạo một cách khôn ngoan - không chỉ có độ trong suốt mà còn có 256 mức độ sáng. Nghĩa là, bạn có thể dễ dàng thực hiện chuyển đổi từ nền hoàn toàn trong suốt sang hình ảnh đầy màu sắc, đồng thời có được hiệu ứng đẹp. Nó trông đặc biệt đẹp trên các trang web. Nếu không cần độ trong suốt, bạn có thể đơn giản là không sử dụng nó khi lưu hình ảnh và nhận được một tệp thậm chí còn nhỏ hơn.

Thật không may, định dạng PNG có một nhược điểm không đáng kể - nó không cho phép lưu một chuỗi hình ảnh, cái gọi là hoạt ảnh. GIF cho phép bạn làm điều này. Điều này xảy ra bởi vì tại thời điểm định dạng mới được tạo ra, hoạt hình thực tế không được sử dụng ở bất kỳ đâu và vào năm 1995, không có nhu cầu đặc biệt về các trang web đầy màu sắc, vì vậy hoạt hình đã bị loại khỏi dự án vì không cần thiết. Ngày nay, lĩnh vực hoạt hình đã bị chiếm giữ bởi Công nghệ đèn flashđiều đó không hề bình thường định dạng đồ họa không phải là đối thủ cạnh tranh.

Nếu định dạng PNG tốt như vậy thì tại sao nó lại không trở nên phổ biến? Câu trả lời rất đơn giản - nó không được các nhà phát triển chương trình khác hỗ trợ. Đặc biệt có ảnh hưởng là thực tế là phần lớn người dùng Internet đã sử dụng Trình duyệt Internet Explorer, nhưng nó không “hiểu” được hình ảnh ở định dạng PNG, mặc dù các nhà phát triển của các trình duyệt khác đã ngay lập tức tích hợp tính năng hỗ trợ như vậy vào chúng. Tình hình chỉ được cải thiện khi Internet Explorer 7 xuất hiện nhưng thời “khuyến mãi” đã trôi qua từ lâu.

Ngày nay, định dạng PNG là một trong ba định dạng phổ biến và được khuyên dùng nhất trong công nghệ web, cùng với định dạng GIF và JPG. Và, nếu bạn không coi việc thiếu hoạt ảnh là một bất lợi thì nó sẽ thắng về mọi mặt so với những thứ khác. Hình ảnh chất lượng cao chất lượng không bị mất, tệp nhỏ, chuyển tiếp mượt mà sang nền trong suốt và không vi phạm bản quyền của bất kỳ ai – nhà phát triển trang web còn cần gì nữa để hài lòng?

Một trong những nhiệm vụ chính mà các nhà thiết kế trang web mới phải đối mặt là tải nhanh các trang trình duyệt. Và vì không phải tất cả người dùng đều thích thiết kế tối giản nên chúng tôi phải tìm kiếm sự dung hòa giữa thiết kế đẹp với các yếu tố đồ họa trang nhã và tốc độ của tài nguyên web. Trước đây, để giảm trọng lượng của hình ảnh, các nhà phát triển trang web đã sử dụng GIF hoặc JPG. Ngày nay, các nhà thiết kế bố cục ngày càng sử dụng hình ảnh ở định dạng PNG. Chúng ta hãy cùng nhau cố gắng tìm hiểu lý do tại sao điều này xảy ra.

Tại sao định dạng PNG được phát minh?

Chữ viết tắt là tên của loại đồ họa này được hình thành từ các chữ cái đầu tiên của các từ tiếng Anh sau: đồ họa mạng di động, có thể dịch là “đồ họa di động để sử dụng trên mạng”. Định dạng PNG được phát minh đặc biệt để loại bỏ những nhược điểm của việc nén bằng thuật toán GIF đơn giản hơn, thuật toán này đang dần trở nên lỗi thời. Ngoài ra, ở một mức độ nào đó, nó có thể được sử dụng để thay thế TIFF cồng kềnh hơn nhiều, vốn được sử dụng chủ yếu để chỉnh sửa.

Định dạng PNG là gì?

Ngày nay, hai phiên bản của thuật toán này được sử dụng rộng rãi. Trong trường hợp đầu tiên, 8 bit được sử dụng và trong trường hợp thứ hai là 24 bit. Ảnh ở định dạng PNG-8, so với phiên bản GIF, tốt hơn một chút và thiếu khả năng tạo ảnh động. Mặc dù hình ảnh này có thể chứa tối đa 256 màu, thuật toán nàyĐược sử dụng rộng rãi để tạo văn bản đồ họa, logo, hình minh họa với các cạnh sắc nét và hình ảnh có độ trong suốt chuyển màu. Trong trường hợp điều này rõ ràng là không đủ, các nhà phát triển sử dụng định dạng PNG 24-bit, có rất nhiều lợi ích kèm theo, chẳng hạn như:

  • Một thuật toán nén được cải tiến giúp loại bỏ bất kỳ sự giảm chất lượng nào.
  • Khả năng sử dụng độ trong suốt alpha cung cấp 256 cấp độ khác nhau sự minh bạch.
  • Sự hiện diện của hiệu chỉnh gamma, cho phép bạn tự động điều chỉnh độ sáng của hình ảnh khi phát lại trong các chương trình khác nhau.
  • Khả năng sử dụng khoảng 16,7 triệu sắc thái màu.

Tất cả những điều này cùng nhau góp phần vào việc sử dụng PNG24 để nén bất kỳ hình ảnh nào có chứa các vùng trong suốt, các bản vẽ có một lượng lớn màu sắc và ranh giới hình ảnh rõ ràng.

Xu hướng phát triển

Mặc dù thực tế là việc phổ biến định dạng PNG vẫn bị cản trở bởi các trình duyệt cũ hơn, cũng như sự hỗ trợ không đầy đủ và không đầy đủ cho các khả năng của thuật toán này trong các phiên bản mới, PNG rất hứa hẹn cho đồ họa web. So với GIF, nó có ba ưu điểm chính: kênh alpha, hiệu chỉnh gamma và xen kẽ 2D (một phương pháp hiển thị dần dần hình ảnh). Và so với JPEG, nó không bị giảm chất lượng. Lưu ý rằng định dạng PNG được phát minh vào ngày 4 tháng 1 năm 1995. Đã 18 năm trôi qua kể từ đó và nó đã trở thành ứng dụng dẫn đầu được sử dụng trên các trang web, đẩy GIF xuống vị trí thứ hai.

Hầu hết các ứng dụng của người dùng (ví dụ như MS Paint) ngày nay đã sử dụng nó làm tiêu chuẩn để lưu tệp “theo mặc định”. Có lẽ, nếu không có hoạt hình và những điều kỳ quặc của phiên bản cũ Phiên bản Internet Explorer, GIF lẽ ra đã phải nhường chỗ cho đối thủ cạnh tranh sớm hơn.

Định dạng PNG là định dạng trẻ nhất trong số các định dạng đồ họa web phổ biến; Vì vậy, nó vẫn chưa đủ phổ biến. Tuy nhiên, khả năng của nó cho thấy các nhà sản xuất phần mềm và nhà phát triển web sẽ chú ý đến nó nhiều hơn trong tương lai.

PNG viết tắt là viết tắt của Đồ họa mạng di động.

Về đặc điểm, định dạng này tương tự như GIF, điều này không có gì đáng ngạc nhiên - xét cho cùng, PNG đã được phát triển để thay thế nó. PNG hỗ trợ các tính năng sau:

  • lưu trữ hình ảnh màu với độ sâu màu lên tới 48 bit (trong GIF - tối đa 8 bit);
  • lưu trữ hình ảnh đơn sắc (tối đa 16 bit mỗi pixel);
  • hỗ trợ độ trong suốt có thể thay đổi - lên tới 256 độ chuyển màu (ở định dạng GIF, mỗi pixel có trong suốt hoặc không);
  • nén hình ảnh không mất dữ liệu;
  • sử dụng tính năng lọc để tối ưu hóa việc nén (không có trong GIF);
  • khả năng hiển thị hình ảnh xen kẽ trên màn hình;
  • công cụ phát hiện lỗi truyền dữ liệu tích hợp (không có trong GIF);
  • công cụ chỉnh sửa màu sắc (không có trong GIF);
  • lưu một bản sao nhỏ của hình ảnh.

Không giống như GIF, định dạng PNG được sử dụng miễn phí. Điều này có nghĩa là sự hỗ trợ của anh ấy phần mềm có thể được nhập mà không phải trả bất kỳ giấy phép nào. Để nén hình ảnh ở định dạng PNG, thuật toán LZ78 được sử dụng - tiền thân của LZW được sử dụng ở định dạng GIF. Nhược điểm của PNG so với GIF bao gồm không có khả năng lưu nhiều hình ảnh trong một tệp và tạo hình động.

Tệp được lưu ở định dạng PNG có cấu trúc khối, khiến nó giống với định dạng TIFF. Bất kỳ chương trình nào hỗ trợ định dạng chuẩn PNG, sẽ hoạt động với bốn loại khối:

  • Khối tiêu đề chứa các tham số chính của hình ảnh. Một tập tin không thể có nhiều hơn một tiêu đề;
  • Khối bảng màu xác định bảng màu được sử dụng trong ảnh. Khối này chỉ được sử dụng nếu cần một bảng màu (hình ảnh được lưu ở chế độ màu được lập chỉ mục);
  • khối hình ảnh chứa dữ liệu hình ảnh;
  • Khối kết thúc hình ảnh đóng tệp PNG.

Ngoài các khối này, tệp có thể chứa dữ liệu bổ sung, chẳng hạn như thông tin về tác giả, nhận xét văn bản (bao gồm cả nhận xét đã nén), thông tin về độ tương phản và hiệu chỉnh gamma, thông tin về độ trong suốt (kênh alpha), v.v. Khi giới thiệu các tính năng mới, bạn có thể dễ dàng thêm vào tập tin khối mới. Đồng thời, các chương trình cũ chỉ đơn giản là “sẽ không chú ý đến nó”. Điều này cung cấp khả năng dễ dàng phần mở rộng định dạng.

  • Bản thân hình ảnh có thể được lưu trong nhiều chế độ khác nhau. Ví dụ, Adobe PhotoShop hỗ trợ Chế độ RGB(16 triệu màu), thang độ xám (256 mức tăng dần) và màu được lập chỉ mục (256 màu).
  • Độ trong suốt của hình ảnh được lưu trữ dưới dạng kênh alpha, cho phép bạn hiển thị tối đa 256 mức độ trong suốt. Điều này cho phép chuyển đổi mượt mà từ hình ảnh sang nền và tránh sự xuất hiện của “quầng sáng” ở đường viền trong suốt. Trong bộ lễ phục. Hình 2.9 cho thấy một ví dụ về lớp phủ như vậy. Bên trái là ảnh gốc, ở giữa là nền, bên phải là kết quả.

Cơm. 2.9.Kết quả của việc phủ một hình ảnh với sự thay đổi mượt mà về độ trong suốt trên nền

Trong bộ lễ phục. Hình 2.10 cho thấy kết quả của việc phủ một hình ảnh được lưu ở định dạng GIF lên cùng một nền.

Cơm. 2.10.Xếp chồng một hình ảnh với hai giá trị trong suốt trên nền (có hoặc không có)

GHI CHÚ.Các trình duyệt vẫn chưa triển khai hiển thị độ trong suốt thay đổi mượt mà.

Khi lưu hình ảnh ở định dạng PNG, bạn có thể sử dụng các hình ảnh xen kẽ và nhiều bộ lọc khác nhau để tối ưu hóa khả năng nén. Hình ảnh xen kẽ không được hiển thị theo từng dòng (như khi đọc định dạng GIF), mà ở dạng khối hình chữ nhật (khối 8x8 đầu tiên, sau đó là 4x8, 4x4, 2x4, 2x2, 1x2). Thuật toán này có được đặt tên là Adam theo tên người phát minh ra nó không? Thật không may, không phải tất cả các trình duyệt đều xử lý chính xác khả năng của định dạng này. Trong bộ lễ phục. Hình 2.11 cho thấy cách các tệp PNG được hiển thị bởi Internet Explorer.

Bộ lọc cho phép bạn chuẩn bị dữ liệu (tối ưu hóa dữ liệu) và do đó tăng tỷ lệ nén. Lọc được áp dụng cho các byte thành phần màu của pixel theo từng dòng. Bạn có thể áp dụng thuật toán của riêng mình cho từng dòng hoặc không áp dụng thuật toán nào cả. Có một số loại bộ lọc:

Cơm. 2.11.Hiển thị trang có hình ảnh ở định dạng PNG trong quá trình tải

  • Sub xác định sự khác biệt giữa giá trị byte cho pixel hiện tại và cùng giá trị cho pixel trước đó;
  • Up xác định sự khác biệt giữa giá trị byte cho pixel hiện tại và cùng giá trị cho pixel trước đó;
  • Trung bình - giá trị cho pixel hiện tại được dự đoán dựa trên giá trị trung bình thu được cho các pixel nằm ở bên trái và phía trên pixel hiện tại;
  • Paeth - giá trị được dự đoán dựa trên giá trị hàm tuyến tính, thu được từ các giá trị của pixel bên trái, trên cùng và trên cùng bên trái.

Trong một số trường hợp, tính năng lọc có thể làm giảm kích thước tệp nhưng phương pháp lọc phải được chọn riêng cho từng hình ảnh.

Ngoại trừ các thuật toán khác nhau có thể áp dụng các công cụ lọc, chỉnh màu tích hợp cho hình ảnh. Đối với PNG, đây là chỉ báo hiệu chỉnh gamma (cho phép bạn điều chỉnh màu sắc theo độ sáng của màn hình), thông tin về độ tương phản, cũng như thông tin về màu cơ bản và “điểm trắng”. Màu sắc cơ bản và chấm trắngđược xác định bởi tọa độ trong tiêu chuẩn không gian màu. Tất cả các tùy chọn này đều có thể cải thiện chất lượng hình ảnh hiển thị trên máy tính của người dùng.

Chúng tôi đã xem xét các đặc điểm của định dạng PNG. Để có được bức tranh toàn cảnh về phạm vi ứng dụng của nó, chúng tôi sẽ tiến hành thử nghiệm. Trong bộ lễ phục. 2.12 cho thấy ba hình ảnh thử nghiệm. Hình 2.13a là một ví dụ về bản vẽ bao gồm các đường nét rõ ràng (sơ đồ hoặc hình vẽ). Hình 2.13, b - bức ảnh chứa một vùng rộng lớn với sự thay đổi màu sắc mượt mà (bầu trời). Hình 2.13, c - bức ảnh có nhiều chi tiết nhỏ. Kích thước tệp nguồn trong định dạng TIFF: từ 127 đến 129 KB.

MỘT
b V.

Cơm. 2.12.Kiểm tra hình ảnh để so sánh khả năng của các định dạng GIF, JPEG và PNG

Để so sánh khả năng của các định dạng khác nhau, hãy lưu tất cả những hình ảnh này vào tập tin GIF, PNG và JPEG. TRONG trong trường hợp nàyđã được sử dụng định dạng GIF và PNG ở chế độ bình thường và xen kẽ, đồng thời ở định dạng JPEG, ảnh được lưu với điểm chất lượng (theo thang đo Adobe PhotoShop) là 7. Đồng thời, có hiện tượng nhiễu nhẹ ở tất cả các ảnh (đặc biệt là ở ranh giới của các đối tượng). ). Hãy so sánh kích thước của các tập tin kết quả.

Bảng 2.1.Kích thước tệp thu được sau khi lưu hình ảnh thử nghiệm ở nhiều định dạng khác nhau, KB

Bảng này cho phép bạn đánh giá phạm vi áp dụng tối ưu của từng định dạng. Như bạn có thể thấy, các định dạng GIF và PNG mang lại lợi thế rõ ràng khi lưu ảnh với số lượng màu ít và vùng đơn sắc lớn (sơ đồ, sơ đồ). Hơn nữa, GIF cung cấp khả năng nén tốt hơn một chút. Vì các thuật toán nén được sử dụng trong các định dạng này không gây nhiễu vào hình ảnh nên không sợ các chi tiết nhỏ của mạch điện sẽ bị mất hoặc bị biến dạng. Hình ảnh xen kẽ, mặc dù trực quan hơn đối với người dùng nhưng lại chiếm nhiều không gian hơn so với hình ảnh không xen kẽ. Để lưu hình ảnh đầy đủ màu sắc cách tốt nhấtĐịnh dạng JPEG là phù hợp. Mặc dù nó gây ra một số biến dạng trong bản vẽ nhưng bằng cách chọn mức nén, bạn có thể giảm chúng xuống mức chấp nhận được. Trong trường hợp này, các tệp có định dạng này là kích thước nhỏ nhất cho tất cả các hình ảnh ngoại trừ sơ đồ. Khi lưu hình ảnh tương tự, GIF và PNG cho kết quả tốt nhất.

Chúng tôi cũng sẽ so sánh hiệu quả của các bộ lọc khác nhau được sử dụng ở định dạng PNG.

Các bộ lọc đã được kiểm tra bằng cách sử dụng các ví dụ về sơ đồ (Hình 2.13, a) và một bức ảnh có các chi tiết nhỏ (Hình 2.13, c). Đối với sơ đồ, việc sử dụng các bộ lọc không dẫn đến tăng kích thước tệp mà ngược lại, khiến kích thước tệp tăng thêm 0,5-1 KB. Đồng thời, đối với nhiếp ảnh, các tệp “đã lọc” hóa ra lại nhỏ hơn các tệp “chưa lọc”. Đối với hình ảnh có 16 triệu màu, mức tăng là khoảng 10%. Đồng thời, hình ảnh có 256 màu thực tế không phản ứng với việc áp dụng bộ lọc.

Kết thúc cuộc trò chuyện về định dạng PNG, chúng ta có thể nói rằng mặc dù nó chứa đựng những cơ hội lớn nhưng hầu hết đều là Hiện nay không được triển khai trong trình duyệt. Điều này cản trở sự phát triển của sự phổ biến của nó. Sau khi được giới thiệu hỗ trợ đầy đủ, định dạng này có thể chiếm vị trí xứng đáng trong số các “công cụ” của một nhà thiết kế web.