) ve AlphaImageLoader'ın Internet Explorer'da olması gerektiği gibi çalışmasını bekleyin. AlphaImageLoader'ın görüntünüzü nesnenin arka planı ve ön planı arasına eklediğini unutmayın. Bu nedenle, görüntünüzü tüm şeffaf güzelliğinde yükleyecek olsa da, aynı zamanda harika yarı saydam pikselleriniz olmadan bir CSS arka plan görüntüsü olarak yüklemeye devam edecektir.

AlphaImageLoader'ın gerçek kullanımı

Önceki örneklerden birine dönelim ve Internet Explorer'a doğru şekilde yüklemeye çalışalım. Topeka'daki bir TV kanalı olan Kanal 49'u hatırlıyor musunuz? Eminim - evet. Şekil 5-21, sitenin Internet Explorer 6'da nasıl göründüğünü gösterir.

  Şekil 5-21
  Üstbilgi 49abcnews.com, bozulmamış PNG saydamlığıyla Windows için Internet Explorer 6'da görüntülenir.

Hava durumu ile ilgili en üstteki HTML zaten tahmin etmiş olabilirsiniz:

Görüntüyü görüyorsunuz ve kesinlikle PNG, Internet Explorer bile kusursuz bir şekilde indiriyor. Bunun gizli bileşeni JavaScript'tir. Aslında, img öğesini anında kaldırmak ve bir div öğesi ile değiştirmek için biraz DOM komut dosyası kullandım, ki bunu tahmin ettiniz - AlphaImageLoader kullanıyor. JavaScript, Internet Explorer'da yerleşik olarak sunulan Microsoft'tan başka bir tamamen standart olmayan deyim olan koşullu yorumların içinde açıklanmaktadır. Koşullu yorumlar, kodu yalnızca Internet Explorer'ın daha önce bilinen bir sürümü için kullanmanızı sağlar. Kod diğer tüm tarayıcılar tarafından yok sayılır, bu yüzden onları hiçbir şekilde etkilemez. Öğede   web sitesi www.49abcnews.com, bulacaksınız:

İlk satır sayesinde, lte IE6 ise, bu komut dosyası çizilen belgeye yalnızca Internet Explorer sürümünden daha az veya eşit olarak gösteriliyorsa (bu lte ile gösterilir) 6. Yeni Internet Explorer 7 dahil olmak üzere diğer tüm tarayıcılar bunu yoksayar. .

Peki fixWeatherPng.js JavaScript dosyasında ne var? Bir göz at:

Window.attachEvent ("onload", fixWeatherPng); function fixWeatherPng () (var img \u003d document.getElementById ("weatherImage"); var src \u003d img.src; img.style.visibility \u003d "gizli"; var div \u003d document.createElement ("DIV"); div.style. filter \u003d "progid: DXImageTransform.Microsoft. AlphaImageLoader (+ src +" ", boyutlandırma \u003d" ölçek ")"; // Kısaca 49abcnews.com'a özgü bazı CSS stilleri atlandı.   img.replaceNode (div); )

Kodun ne yaptığını adım adım analiz edelim. İlk olarak, tarayıcıya sayfa yüklendiğinde fixWeatherPng işlevini yürütmek istediğimizi söyleriz. Betiğin geri kalanı işlevin kendisidir.

Başlıyoruz, önce id özniteliğiyle çalışacağımız ve img değişkenine kaydedeceğimiz bir resim arıyoruz. Src özniteliğini (resim dosyasına URL) src değişkenine kaydediyoruz. Sonra CSS görünürlük özelliğini gizli olarak göstererek img öğesini gizliyoruz.

Sonuç olarak, orijinal img öğesini (gizli), AlphaImageLoader'ın başarıyla eklendiği yeni oluşturulan div öğesiyle değiştiririz.

AlphaImageLoader'ınızı - filtreleme bitini anında - eklemek için DOM komut dosyası kullanma, değişken ama gerekli tarafı yanlış CSS'ye sahip. Ayrıca, anlamsal olmayan div öğeleri (X) HTML işaretlemenizin dışında yer alacaktır. Tüm bunlar koşullu yorumların içinde açıklanmış olsa da, diğer tarayıcıların Microsoft koduyla bozulma şansı yoktur. (handyblogger: Burada Jeff, Microsoft'un “beceriksiz” bir çözümüne ustaca işaret etmeye çalışıyor)

Yanlış bir şey yapmanız gerekiyorsa, en azından onu ayıklayabilir ve gerekli olmayan her şeyden ayrı olarak kaydedebilirsiniz.

Gözaltında

PNG, grafik formatı olarak GIF'lerde yaygın olarak kullanılanların yanı sıra birçok teknik avantaj sunar. Aslında, faydalar o kadar büyük ki, PNG, uzun zaman önce - fotoğraf görüntüleri ile ilgisi olmayan bir grafik formatı olarak uzun süre baskın bir pozisyon alabilirdi. Alfa kanalı saydamlığı gibi daha önemli PNG özellikleri için Internet Explorer'dan destek eksikliği, sonuç olarak birçok web geliştiricisini korkutur. Ancak PNG'den korkmamanız için çok iyi iki neden var.

Birincisi: Internet Explorer 6 ve önceki sürümleri bile GIF'in neler yapabileceği açısından PNG'yi neredeyse tamamen destekliyor (tabii ki animasyon hariç). PNG neredeyse her zaman daha küçük bir dosya boyutu göstererek daha hızlı yüklenmelerini ve daha az kaynak tüketmelerini sağlar.

İkincisi: Internet Explorer 7, PNG alfa saydamlığı için tam destek sunar. Yarı saydam seçeneklerin tam gamı \u200b\u200bile elde edilebilecek etkiler neredeyse sınırsızdır. PNG saydamlığını kullanmanın ilginç yollarını bulan tasarımcıların, bu makalede açıklananlar ilkesine göre, daha önce görülmemiş yeni bir stil seviyesine kapılarını açmasını bekliyorum. PNG şeffaflığıyla oluşturabileceğiniz şeyler hakkında size faydalı fikirler verdim, ancak burada bitmiyor. Kendin için bak!

Web Standartlarının Yaratıcılığından Alıntı: Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin ve Rob Weychert; ED arkadaşları tarafından yayınlandı. Telif Hakkı Jeff Croft 2007. Apress, Inc.'in izniyle kullanılmıştır.

PNG görüntü formatı en popüler olanlardan biridir ve kullanıcılara sıkıştırılmış görüntüleri kalitelerini kaybetmeden saklamalarını sağlar. Çoğu PNG, grafikleri düzenlemek veya Internet'te kullanmak için kullanılır. Ardından, bu biçimdeki bir dosyayı bilgisayarınızda açmanın birkaç basit yoluna bakacağız.

PNG dosyalarını görüntüleme ve düzenleme için açmanıza izin veren birkaç farklı yöntem vardır. Sadece aşağıda verilen talimatları izlemeniz ve görüntüyü açmanız zor değildir.

Yöntem 1: Görüntü İzleyiciler

İnternette, görüntüleri izlemek ve düzenlemek için birçok grafik editör ve özel yazılım vardır. Kullanıcılara, resimlerle çalışma sürecini olabildiğince konforlu hale getiren çok sayıda işlev ve araç sağlar. GIMP program örneğini kullanarak bir PNG görüntüsü açma işlemini düşünün:

Herhangi bir nedenden dolayı GIMP size uymuyorsa, aşağıdaki bağlantıdaki makalemizdeki görüntüleri izlemek için programların tam listesini öğrenmenizi öneririz. Orada kesinlikle uygun bir şey bulacaksınız.

Açık bir görüntü ile çeşitli manipülasyonlar yapmanız gerekiyorsa, gelişmiş işlevselliğe ve çok sayıda farklı aracın varlığına sahip özel grafik editörleri kullanın. Daha fazla detayı aşağıdaki bağlantıdan makalemizde bulabilirsiniz.

Yöntem 2: Standart Windows Aracı

Windows işletim sisteminin tüm sürümlerinde görüntüleri izlemek için yerleşik bir program vardır. Yardımı ile PNG dosyası da açılır. Bu sürece daha yakından bakalım:

Tüm PNG görüntülerinin standart Windows fotoğraf görüntüleyicisiyle açılmasını istiyorsanız, aşağıdaki adımları izleyin:

Artık varsayılan olarak tüm PNG dosyaları standart fotoğraf görüntüleyici kullanılarak açılacaktır. Programı açılacak şekilde değiştirmek için, aynı adımları izleyerek farklı bir yazılım seçmeniz yeterlidir.

Bu makalede, PNG görüntülerini açmanın basit yollarını iyice inceledik. Gördüğünüz gibi, bu süreçte karmaşık bir şey yoktur ve her şey sadece birkaç adımda yapılır.

".Png ile biten bir dosya uzantısına sahip bir dosyanız olduğu için buradasınız. Dosya uzantısı .png olan dosyalar sadece belirli uygulamalar tarafından başlatılabilir." .Png dosyalarının belge veya medya yerine veri dosyaları olması mümkündür. yani "hiç görülmüyorlar."

a & nbsp.png & nbspfile nedir?

PNG dosyaları, genellikle diğer Web grafikleri arasında bir web sitesinde bulunan görsel öğeler için uygulanan sıkıştırılmış tarama görüntü dosyalarıdır. Bu .png dosyalarının görüntü içeriği, bitmap görüntüleri ile entegre edilmiş dizin renklerinden oluşur ve bu .png dosyalarına uygulanan kayıpsız dijital görüntü sıkıştırma ve kodlama özellikleri, GIF dosyalarına entegre edilen sıkıştırma standartlarına benzer. Taşınabilir ağ grafikleri olarak da bilinen PNG formatı, renk desteği ve patent lisansı açısından GIF görüntülerinin sınırlamalarını kaldırmak için geliştirilmiştir. Bu PNG dosyalarının saydamlık kanalı, 8 bit desteği uygulamak için geliştirilmiştir. CMYK desteği bu PNG dosyalarında mevcut değildir.

bir açmak için nasıl .png dosya?

Bir başlatın .png dosyası, ya da PC üzerinde herhangi bir diğer dosya ile çift tıklatarak. Dosya dernekleriniz doğru olarak ayarlanmışsa, ".png dosyanızı açması gereken uygulama açar. Bu da doğru uygulamayı indirmeniz ya da satın almanız gerekebilir. PC'nizde doğru uygulamaya sahip olmanız da mümkündür, ancak .png dosyaları henüz onunla ilişkili değildir. Bu durumda, bir .png dosyasını açmaya çalıştığınızda, Windows'a o dosya için hangi uygulamanın doğru olduğunu söyleyebilirsiniz. O andan itibaren, bir açılış .png Dosya doğru uygulamayı açılacaktır.

bir açık uygulamaları .png dosya

Microsoft Windows için Adobe Photoshop CS6

Microsoft Windows için Adobe Photoshop CS6, Windows bilgisayarlarda (Windows 7 (SP ve SP1 olmadan) ve Windows XP SP3) indirilebilen bir görüntü düzenleme ve yönetme yazılımıdır. Bu yazılım, dijital görüntülerin kolay, hızlı, eğlenceli ve gelişmiş bir şekilde düzenlenmesi için yeni özellikler ve araçlarla birlikte gelir. Bu programı görüntü düzenleme için güvenilir yapan özelliklerden biri, daha hızlı ve kaliteli performans sağlayan bir motor teknolojisi olan Adobe Mercury Graphics Engine'dir. İçeriğe Uygun araçlar, görüntüleri herhangi bir efekt olmadan kırpabileceğiniz, bulanıklığı veya geniş açılı lens eğriliklerini otomatik olarak düzeltebileceğiniz, kırmızı gözü giderebileceğiniz ve parlaklık ve kontrast gibi renk dengesini ayarlayabileceğiniz için görüntüleri rötuşlamak için tasarlanmış yeni özelliklerdir. Bu görüntü düzenleyici, kaydedilmemiş görüntüleri, Arka Plan Kaydetme seçeneğini, Bulanıklaştırma Galerisi, Kırpma aracı, video oluşturma ve çok daha fazlasını yedekleyebilen otomatik kurtarma özelliği ile birlikte gelir. Tüm bu yeni geliştirilmiş özellikler ve modern kullanıcı dostu arayüzü ile dijital fotoğraf düzenleme Photoshop CS6 olmadan asla bu kadar eğlenceli ve kolay olamaz.

Mac için Adobe Photoshop CS6

Mac için Adobe Photoshop CS6

   Mac için Adobe Photoshop CS6, özellikle Mac bilgisayarlar, özellikle Mac OS Xv10.6 ila 10.7'de 64-bit için tasarlanmış “Creative Suite” görüntü yönetim yazılımı sürümüdür. Bu görüntü düzenleme programı, aynı şirket tarafından hızlı ve yüksek kaliteli görüntü geliştirme performansı için geliştirilen Mercury Grafik Motoru, İçeriğe Uygun özellikler, film tasarımı için sezgisel yeniden hayal edilen araçlar, iş akışları gibi yeni bir dizi özellik ve araçla birlikte gelir. , Blur Galerisi, Kırpma aracı ve çok daha fazlası. Adobe Mercury Graphics Engine, düzenleme görevini kolay ve hızlı bir şekilde gerçekleştirecek şekilde çalışır. Bu ayrıca görüntülerin otomatik kurtarma ve Arka Plan Kaydetme seçenekleriyle paylaşılmasına ve taşınmasına olanak tanır. Yeni İçeriğe Uygun araçlar, daha memnun bir çıktıyla sonuçlanan görüntüleri rötuşlamak veya iyileştirmek için kolay ve kontrol edilebilir bir yol sunar. Temel olarak herhangi bir kullanıcının görüntüleri otomatik olarak düzeltmesini, kırpmasını ve geniş açılı lens eğrilerini düzeltmesini sağlar.

ACD Sistemleri Tuval 14

ACD Sistemleri Tuval 14

ACD Systems International Inc. kullanıcıların grafik analiz etmesine, grafikleri geliştirmesine ve tüm bilgileri kolay ve hızlı bir şekilde paylaşmasına olanak tanıyan teknik bir grafik çözüm yazılımı olan ACD Systems Canvas 14'ün geliştiricisidir. Bu program, kullanıcıların teknik grafik ve illüstrasyonları doğru bir şekilde yapmalarına yardımcı olan tam özellikli araçlarla tasarlanmıştır. Görüntü düzenlemeden nesne çizim araçlarına kadar değişen düzenleme araçlarından oluşur. Bu program tarafından oluşturulan sonuçlar, grafik ve mühendislikle ilgili herhangi bir iş kolu için projeler, teklifler ve diğer amaçlar için iyi sunumlar yapar. Özellikler hakkında daha fazla bilgi, kullanıcılar nesneleri yeniden boyutlandırarak ve ölçeklendirerek, çizim çizerek ve kontur ve dolgu mürekkepleri veya genişliklerini ekleyerek düzenleme dosyasıyla aynı dosyayı kullanarak raster görüntüleri ve vektör grafikleri ile çalışabilir. Metin veya etiket eklemek ve boyutları biçimlendirmek, ayrıca grafik oluşturmak için bir araç da vardır. Bu program sayesinde kullanıcılar sunumları veya yayınları kullanarak bitmiş projeleri paylaşabilirler.

ACD Sistemleri ACDSee 15

ACD Sistemleri ACDSee 15

   ACD Sistemleri ACDSee 15, Microsoft Windows ve Mac OS X 10.6 (Service Pack 2, Vista, 7 ve 8 ile Windows XP; Mac OS X 10.5, 10.6) için bir resim düzenleyici, görüntüleyici ve RAW / görüntü düzenleyici programı içeren bir fotoğraf yazılımıdır , 10.7 ve Mountain Lion). ACD Systems International, Inc. tarafından geliştirilmiştir. ve orijinal olarak daha sonra 32 bit sürümüyle yükseltilen 16 bitlik bir uygulama olarak dağıtılır. Bu uygulama için bu minimum donanım gereksinimi Intel Pentium III / AMD Athlon işlemci veya 512 MB RAM (310 MB boş sabit sürücü alanı ile), 1024 x 768 çözünürlükte yüksek renkli ekran adaptörü ve CD / DVD yazıcıya eşdeğerdir. ACDSee, video, ses dosyalarını GIF, BMP, JPG, PNG, MP3, PSD, WAV, MPEG ve TIFF gibi biçimlerde yönetir ve destekler. Kullanıcılar çevrimiçi olarak paylaşılabilen fotoğraf ve video koleksiyonlarını görüntüleyebilir, düzenleyebilir, efekt ekleyebilir ve düzenleyebilir. Fotoğraflar kameradan veya başka bir depolama aygıtından içe aktarıldığından fotoğraflar düzenlenebilir. Ayrıca, kullanıcıların GPS özellikli kameralardan görüntülerin konumunu görüntülemelerini sağlayan Harita görünümü ve coğrafi etiketleme desteğine sahiptir. Hızlı göz atma, tarama, düzenleme ve yedekleme seçenekleri gibi özellikler fotoğrafların tarihe ve olaya göre sıralanmasını ve yedek kopyaların CD, DVD ve Blu-Ray'e depolanmasını kolaylaştırır.

PNG dosyası - Taşınabilir Ağ Grafiği biçiminde kaydedilmiş bir raster görüntüsü. Her PNG görüntüsü bir palet içerir - kullanılan bir renk kümesi. Dosya boyutunu küçültmek için Deflate algoritması ile kayıpsız sıkıştırma kullanılır. Öncelikle internette web sayfaları için görüntü olarak kullanılır. Format, eksikliklerine ek olarak, 2004 yılına kadar özgür yazılımlarda kullanım sınırlamalarına sahip olan GIF'in yerini almak için geliştirildi. Yeni PNG formatı bu sorunları çözdü. Özellikle, 8 bitlik alfa kanalı için destek ve 48 bite kadar renk derinlikleri için destek uygular. GIF biçimindeyken yalnızca tam saydamlık mümkündür ve renk paleti yalnızca 256 renkle (8 bit) sınırlıdır. Ancak, selefinin aksine, bu biçim animasyonu desteklemez. Bu amaçla başka bir MNG formatı oluşturuldu. PNG dosyalarında, CMYK paletini kullanmak da imkansızdır, çünkü bu biçim grafiklerle profesyonel çalışma için tasarlanmamıştır. PNG dosyaları herhangi bir tarayıcıda ve görüntüleri görüntülemek ve düzenlemek için hemen hemen her programda açılabilir. Windows'da, PNG uzantılı bir dosya çift tıklamayla açılabilir.

.Png dosya uzantısı bir PNG görüntüsüdür. Raster görüntüyü PNG formatında izlemek ve işlemek aşağıdaki programları kullanarak mümkündür: Microsoft Windows Fotoğrafları, Microsoft Windows Fotoğraf Görüntüleyicisi, Microsoft Paint, Adobe Photoshop CC. Ayrıca, listelenen programlar bu formattaki resimleri, resimleri ve çizimleri dönüştürebilir.

Özel programlarla bir PNG dosyası açılır. Bu biçimi açmak için önerilen programlardan birini indirin.

PNG uzantısı, görüntüleri kalite kaybı olmadan saklamak için kullanılan bir dosya biçimidir. Bu, İnternet'te kullanılmak üzere özel olarak tasarlanmış İnternet'teki en popüler fotoğraf biçimidir.

PNG dosya uzantısına sahip bir dosya bir dosyadır Taşınabilir Ağ Grafikleri. Biçim kayıpsız sıkıştırma kullanır ve genellikle GIF'e alternatif olarak kabul edilir. Ancak GIF'lerin aksine, PNG dosyalarında animasyonlar desteklenmez.

PNG formatında hem gri tonlamalı hem de tam renkli fotoğraflar bulunur, saydam katmanlar desteklenir. PNG sıkıştırması genellikle GIF'lerde kullanılandan daha iyidir. JPG'nin bazen PNG'ye göre daha fazla avantajı vardır, ancak bu tür sıkıştırmadan sonra metin içeren görüntülerde veya yüksek kontrastlı alanların çevresinde oluşabilir.

PNG dosyası nasıl açılır

PNG dosyalarını açmak için herhangi bir İnternet tarayıcısını veya resim düzenleyicisini kullanabilirsiniz. Hem Windows hem de Mac OS platformlarında bu tür görüntüleri izlemek için yerleşik mekanizmalar vardır.

PNG formatı ne için tasarlanmıştır?

Png - Windows Fotoğraflarını Görüntüle varsayılan olarak, genellikle bir Windows sistem programı olduğu için PNG dosyalarını açmak için kullanılır. Ama onları görmenin başka birçok yolu var.

Tüm tarayıcılar (ör. Chrome, Firefox, Internet Explorer  vb.), İnternet'te açtığınız PNG dosyalarına otomatik olarak göz atacaktır; bu, bilgisayarınızda görmek istediğiniz her PNG dosyasını indirmenize gerek olmadığı anlamına gelir. Ctrl + O klavye kısayolunu kullanarak bilgisayarınızda zaten PNG dosyalarını açmak için bir tarayıcı da kullanabilirsiniz. Bu programların çoğu ayrıca sürükle ve bırak özelliğini de destekler, böylece PNG dosyasını açmak için tarayıcıya sürükleyip bırakabilirsiniz.

Bu tür görüntüleri açmak için birkaç bağımsız seçenek de vardır - bunlar özel grafik editörleridir. Bazı popüler olanlar - XnView , irfanview , FastStone Resim Görüntüleyici , Google sürücü , GNOME ve gThumb'ın gözü. PNG dosyalarını düzenlemek için, listelenen programların, uygulamaların neredeyse tamamını kullanabilirsiniz Boya  ve Paint.net, popüler bir yardımcı program olan GIMP'in yanı sıra tanınmış Adobe Photoshop.

PNG dönüşümü

Görüntü dosyaları çeşitli şekillerde dönüştürülebilir, örneğin çeşitli programlar ve çevrimiçi hizmetler kullanılarak png'ye ve PNG'den dönüştürülebilir. Örneğin, bu Png - Photoconverter düzenleyicisini yapmanızı sağlar.

Taşınabilir Ağ Grafiği (PNG) biçiminde depolanan bir görüntü dosyası. Biraz renk matrisi içerir ve .GIF dosyasına yakın kayıpsız sıkıştırma kullanır, ancak kopyalama kısıtlamaları yoktur. Grafikleri web görüntülerinde depolamak için yaygın olarak kullanılır.

PNG formatı (PNG olarak okunur), öncelikle renk desteğini artırmak ve patent lisansı olmayan bir görüntü formatı sağlamak için GIF formatının sınırlamalarına yanıt olarak oluşturulmuştur. Ayrıca, GIF dosyaları yalnızca opak veya tamamen saydam pikselleri desteklerken, PNG görüntüleri renkleri opaktan saydamlığa değiştirmenize izin veren 8 bitlik bir saydam kanal içerebilir.

PNG görüntüleri GIF görüntüleri olarak canlandırılamaz. Ancak ilişkili .MNG formatı canlandırılabilir. PNG görüntüleri profesyonel grafiklerde kullanılmak üzere tasarlanmadığından CMYK desteği sağlamaz. PNG görüntüleri çoğu web tarayıcısı tarafından desteklenir.

Mac OS X 10.4 ve üstü, ekran görüntülerini PNG dosyaları olarak saklar. Ubuntu Linux ayrıca basılı ekran görüntülerini PNG formatında saklar.

MIME türü: resim / png

Format için programı indir PNG

Bu makalede, PNG24'te saydam görüntüler kaydederken kendini gösteren hoş olmayan bir Photoshop özelliği hakkında konuşmak istiyorum. Orijinal görüntüyü alın ve bir parçayı PNG24'e kopyalayın. Bu şekilde yaptım: Çokgen Kement aracını kullanarak bir parça seçtim, kopyaladım ve yeni bir belgeye yapıştırdım ve ardından Web için Kaydet ile kaydettim:

PNG24, 456 Kb

İlk bölümde öğrendiğimiz gibi, PNG24'te görüntü temel olarak iki katmandan oluşur: her pikselin rengiyle ilgili veriler içeren RGB ve saydamlıkları hakkında bilgi içeren bir alfa kanalı.

PNG grafik formatı: işleme ve görüntüleme

Kesinlikle şeffaf alanlarda görüntüyü verimli bir şekilde paketlemek için herhangi bir renk olması gerektiğini varsaymak mantıklıdır. Ancak, Photoshop'un RGB katmanında kaydettiği şey budur (Seashore editörü aracılığıyla gördüm):

Ve çıplak gözle, kesinlikle gereksiz bilgilerin büyük parçaları olduğunu görebilirsiniz:

Diğer düzenleyicileri kullanmak istemiyorsanız (örneğin, Adobe Fireworks uygulamasında böyle bir kusur fark etmedim), bu hatayı Photoshop'ta düzeltmenin basit bir yolunu öneriyorum. Görevimiz, tamamen saydam alanlardaki tüm bilgileri herhangi bir renkle (tercihen siyah, bu alanların bayt cinsinden en az ağırlığa sahip olacağından şüphe etmemek) değiştirmek.

1. Örneği Photoshop'ta açın ve katmandaki görüntüyü seçin: Ctrl + Katmanlar paletinde katmanın küçük görüntüsüne tıklayın.

2. Hızlı maske moduna (Q) gidin.

3. Görüntü → Ayarlamalar → Eşik'i kullanarak, yalnızca maskenin rengi siyah olan pikselleri bırakın. Bunu yapmak için kaydırıcıyı en soldaki konuma sürükleyin.

4. Hızlı maske modundan (Q) çıkın ve seçimi ters çevirin (Seç → Ters veya Ctrl + Üst Karakter + I). Yalnızca tamamen şeffaf pikseller seçili kaldı.

5. Seçilen alanı siyahla doldurun (örneğin, Düzenle → Doldur yoluyla) birçok yol vardır.

6. Seçimi tekrar ters çevirin ve katmana bir maske ekleyin (katmanlar paletindeki bir simge).

7. Şimdi Web için Kaydet'i yapıyoruz ve görüntünün nasıl mucizevi bir şekilde 122 KB.

Tüm eylemlerin Eylemler'e çok uygun bir şekilde kaydedildiğini bir kez daha tekrarlıyorum, daha sonra bir tuş vuruşu ile gerçekleştiriliyor.

Devam edecek.

Çeşitli seminerlerde ve stüdyoda meslektaşlarımla iletişim kurarak, PNG formatının tek avantajının dürüst saydamlığın varlığı olduğu sonucuna vardım. İnternette bu biçim hakkında bilgi için arama yaparsanız, web geliştiricilerinin iki kampa ayrıldığını fark etmek kolaydır. Bu formatın ne kadar harika olduğuna dair ilk yazı, sıradan kodlayıcılar ve tasarımcılar için anlaşılmaz teknik veriler kullanarak (örneğin, LZW üzerindeki sönük sıkıştırma algoritmalarının üstünlüğü hakkında), diğerleri ise PNG'yi işe yaramazlığı hakkında çeşitli derecelerde aptallık hakkında yorumlar bırakıyor, şartnamede tarif edilenlerin özü.

Web için illüstrasyonlar hazırlarken bunları nasıl kullanacağınızı öğrenmek için bu formatın ne gibi avantajlar sağladığını anlamaya çalışalım.

Terminoloji ile başlayalım. Okuyucuların çoğunun Photoshop kullandığını ve orada PNG-8 ve PNG-24 adlarını bulduğunu düşünüyorum. Bunlar iki farklı format değil, aynı PNG'nin sadece varyasyonlarıdır. Biçim üç tür görüntüyü saklamanızı sağlar: gri tonlama (görüntüyü tanımlamak için bir kanal kullanılır - beyaz), dizinlenmiş renk (GIF'de olduğu gibi renk paleti kullanılır) ve gerçek renk (üç kanal kullanılır - RGB).

PNG formatının en önemli avantajı elbette yeni sıkıştırma algoritmalarıdır. Herkes GIF'in yalnızca yatay tek renkli alanları etkili bir şekilde sıkıştırdığını hatırlıyor mu? Şimdi bu kısıtlamayı unutabilirsiniz:

GIF, 2568 bayt

PNG-24, 372 bayt

İkinci önemli avantaj, PNG paketleyicisinin sıkıştırma için çok daha uygun veriler elde edebilmesi sayesinde tarama hattı filtrelemesi veya delta filtreleridir.

Nasıl çalıştıklarına bir örnek bakalım. Yatay bir gradyan ile 5 × 5 piksel bir resim çekin ve bir dosyaya nasıl kaydedilebileceğini şematik olarak gösterin (her sayı benzersiz bir renktir).

Örnekte görebileceğiniz gibi, GIF kodlayıcı yatay olarak zayıf paketlenmiş satırları sıkıştırır (çünkü aynı renkler dikey olarak yayılır). Ve bir PNG kodlayıcı bu verileri nasıl dönüştürebilir:

Her satırın önünde 2 sayısı görünür Bu satıra uygulanan filtredir. Bu durumda, kod çözücüye şunu söyleyen Yukarı filtresidir: "Geçerli piksel için yukarıdaki piksel değerini alın ve geçerli değeri buna ekleyin." Bizim durumumuzda, bu 0'dır, çünkü mevcut ve üst piksellerin renkleri farklı değildir. Ve yeterince büyük bir görüntümüz varsa, bu veriler daha verimli bir şekilde paketlenebilir.

Neden yazdım yapabilmek? Çünkü idealize edilmiş durumumuzda böyle bir plan daha etkili olacaktır:

Burada, kod çözücüye şunu söyleyen Sub adında bir filtre 1 uyguluyoruz: "Geçerli değeri soldaki piksel değerini alın ve mevcut değeri buna ekleyin." Bu durumda, 1.

Filtrelemeden sonra, tüm satırlar (filtre değerleri ile birlikte) tek bir sıra halinde birleştirilir, bu daha sonra deflate algoritmaları ile sıkıştırılır (tartışmaları bu makalenin kapsamı dışındadır).

Filtrelerin çalışmasını kontrol edin:

Özenli bir okuyucu filtrelerin tüm dosyaya değil satırlara uygulandığını fark edebilir.

PNG dosyası - nedir bu?

Bu demektir her biri  dize olabilir onun  Filtre. Tek bir görüntüyü filtrelemenin 5 yolu olabileceği ortaya çıktı. Genel olarak, iyi bir kodlayıcının görevi, dosya boyutunun minimum olacağı bu tür filtre değerlerini seçmektir. Ne yazık ki, Photoshop her zaman işini iyi yapmaz, bu nedenle OptiPNG ve PNGCrush gibi çeşitli yardımcı programlar kurtarmaya gelir, bu da çok sayıda geçişte farklı filtreleme yöntemleri ve veri sıkıştırma stratejileri seçer, böylece bazı karmaşık görüntülerin miktarını önemli ölçüde azaltır. Ancak, bu programların her dosya için hacimde bir azalma garanti etmediğini hatırlamakta fayda var, sadece verileri kodlamanın en iyi yolunu bulmaya çalışıyorlar.

Photoshop için bir başka acı verici çekim, görüntüleri gri tonlama modunda nasıl kaydedeceğini bilmediği için, yani renk derinliğini nasıl düşüreceğini bilmiyor. Burada, yukarıda belirtilen yardımcı programlar bizi tekrar kurtaracak, bu da mümkünse, resmin kalitesinden ödün vermeden renk derinliğini azaltacaktır.

PNG-24 (photoshop → gerçek renk),   8167 bayt

PNG-24 (Photoshop + OptiPNG → gri tonlama),   6132 bayt

Gri tonlamanın gerçek renge göre avantajları açıktır: örneğin, ilk durumda beyaz, 255 sayısı ile ve ikincisi - 16777215 ile kaydedilir (ondalık gösterimde).

Şimdi, PNG verilerini saklama bilgisi ile donanmış, bunları web için görüntüler hazırlarken kullanabiliriz. Bu konuda - aşağıdaki makalelerde.

PNG (Taşınabilir Ağ Grafikleri), "ping" olarak telaffuz edilir, kayıpsız sıkıştırma kullanan grafik bilgilerini depolamak için bir raster biçimidir. PNG, GIF biçimini geliştirmek ve değiştirmek için lisans gerektirmeyen bir grafik biçimiyle değiştirmek için oluşturuldu. PNG uluslararası bir standarttır (ISO IEC 15948: 2003) ve W3C tarafından resmen tavsiye edilir.

PNG formatı, grafik bilgilerini sıkıştırılmış bir biçimde saklar. Ayrıca, bu sıkıştırma, örneğin standart JPEG'den (mümkün olan en yüksek kalite seviyesinde bile) "kayıp" olmadan gerçekleştirilir.

PNG formatı, eski ve daha basit GIF formatını değiştirmek ve ayrıca bir dereceye kadar çok daha karmaşık TIFF formatını değiştirmek için tasarlanmıştır.

Web tasarımı hakkında konuşuyorsak, GIF ile karşılaştırıldığında aşağıdaki ana avantajlara sahiptir:

Gelişmiş sıkıştırma: Çoğu durumda PNG görüntü boyutu, karşılık gelen GIF biçiminden daha küçüktür.
- Görüntüde daha fazla renk: Görüntüde neredeyse sınırsız renk, GIF sınırı 256'dır.
- İsteğe bağlı alfa kanalı desteği: GIF yalnızca ikili saydamlığı desteklerken, PGN alfa kanalı desteği ile sınırsız sayıda saydamlık efekti elde etmenizi sağlar.

Bir dezavantaj elbette GIF'ler gibi animasyonlar için destek eksikliğidir. Tabii ki Çoklu Görüntü Ağ Grafikleri (MNG) olarak adlandırılan animasyon için benzer bir standart olmasına rağmen, yaygın değildir ve buna göre, büyük ölçüde modern tarayıcılar tarafından desteklenmemektedir.