Web için PNG dosya boyutu nasıl azaltılır?


16

Saydam arka plana sahip bir PNG-24 dosyam var ve mevcut boyutu 1.5 MB. Boyutu azaltmak veya PNG-8 dosya biçimini kullanmak ve aynı kalitede tutmak nasıl?

resim açıklamasını buraya girin

PNG dosyası buradan: http://www19.zippyshare.com/v/69590430/file.html

Örnek Resim yüklendi Tüm önerileri denedim, ancak iyi bir sonuç yok, lütfen önerin

Teşekkürler


Web İçin Kaydet ... kullanıyor musunuz? Renk derinliği de dahil olmak üzere boyutu küçültmek için seçenekler sunmalıdır.
James P

Örnek görüntü bir JPEG dosyasıdır. İnsanların üzerinde farklı araçlar / yöntemler denemelerini istiyorsanız, bunun yerine PNG dosyanızdan birini sağlamalısınız ...!
Laurent Parenteau

site yükleyici onu jpg'ye dönüştürdü. işte s8.postimage.org/z4apal6z9/cw_Copy.png png dosyası var ... lütfen sahip olduğum diğer dosyalarla çalışmaz gibi posterize kullanmayın ..... teşekkürler
Welliam

1
Bu bağlantı da bir JPEG.
Dan D.

Ben bu sefer emin png www19.zippyshare.com/v/69590430/file.html.......thanks Yardımlarınız için
Welliam

Yanıtlar:


6

PNG kayıpsız bir sıkıştırma biçimidir - dosyadaki kaynak malzemeyi değiştirmeden, sıkıştırmayı varsayılan en üst düzey sıkıştırmanın ötesine yükseltmenin çok az yolu vardır. Boyutu küçültmenin tek gerçek yolu, çözünürlüğü veya renk derinliğini azaltarak görüntüyü değiştirmek ve böylece PNG sıkıştırmasının çalışmak için daha az karmaşıklığa sahip olması olacaktır.

Görüntü için yüksek düzeyde sıkıştırma istiyorsanız ve kayıpsız veri depolama ile ilgilenmiyorsanız JPEG kullanın.


4
Çok az demem. Photoshop'un Web İçin Kaydet özelliği o kadar zayıf ki PNGOUT dosyaları genellikle kayıpsız% 20-40 oranında azaltabilir. Photoshop, bazı görüntüler için% 70 daha küçük olabilen PNG8 + alfa'yı desteklemez.
Kornel

Kanıtlanmış gördüğüm en iyi rakamlar% 8-15 civarındaydı, ancak beni daha iyi verilere bağlamaktan çekinmeyin.
Şubat 13'te mikebabcock

1
Tek bir png dosyasını optimize etmem gerekiyordu ve bunun için tinypng.com'u kullandım. Bana% 50'den fazla yer kazandırdı.

9

RIOT bunu yapabilir ve çok daha fazlasını yapabilir.

Radikal Görüntü Optimizasyonu Aracı (kısaca RIOT), minimum dosya boyutunu korurken sıkıştırma parametrelerini görsel olarak ayarlamanıza izin veren ücretsiz bir görüntü optimizeridir.

Orijinali optimize edilmiş görüntü ile gerçek zamanlı olarak karşılaştırmak ve elde edilen dosya boyutunu anında görmek için yan yana (çift görünüm) veya tek görünüm arayüzü ile birlikte kullanılır.

Görüntü iyileştirici hafif, hızlı ve kullanımı kolaydır, ancak ileri düzey kullanıcılar için güçlüdür. Sıkışmayı, renk sayısını, meta veri ayarlarını ve çok daha fazlasını kontrol edebilecek ve çıktı dosyanız için görüntü formatını (JPEG, GIF veya PNG) seçebileceksiniz.

Başka bir olasılık, burada açıklandığı gibi pngquant, pngout ve pngcrush'un bir kombinasyonunu kullanmaktır , ancak bu komut satırından.

İşte açık kaynak araçlarını (sanırım) pngquant + pngout + pngcrush kullanarak png24 görüntülerini ie6 iyiliği için png8'e dönüştürmek için talimatlar.

1- resmi 256 olarak nicelleştirin (temelde png8′in büyük sprite veya sprite geniş renk aralığına sahip görünüşü).

pngquant 256 some_24_bit.png

2- Bir PNG24 Png8'den Resim Dönüştürme

pngout -c3 -d8 -y -force some_24_bit.png some_8_bit.png

3- Görüntüyü sıkıştır

pngcrush some_8_bit.png -bit_depth 8 -güzel -rem alla -kuzu azalt__8_bit_small.png


6

TinyPNG'yi deneyin

Web sitelerinden:

O nasıl çalışır?

Bir PNG (Taşınabilir Ağ Grafikleri) dosyası yüklediğinizde, görüntünüzdeki benzer renkler birleştirilir. Bu tekniğe “nicemleme” denir. Renk sayısı azaldığından, 24 bit PNG dosyaları çok daha küçük 8 bit dizine alınmış renkli görüntülere dönüştürülebilir. Gereksiz tüm meta veriler de çıkarılır. Sonuç:% 100 şeffaflık desteği olan küçük PNG dosyaları.

İki seçeneği vardır:

  • Görüntüleri web sitelerine sürükleyip bırakın, otomatik olarak işlenir. Ücretsiz servis. (En fazla 20 görüntü. Her biri en fazla 5 MB)
  • Photoshop eklentisi. Bunun maliyeti $.

PS eklentisini denemedim, bu yüzden ne kadar iyi çalıştığı hakkında yorum yapamam.


Bu gerçekten iyi bir ipucuydu, TinyPNG 24 bit PNG dosyamı Photoshop'tan 200k'dan 50k'ye indirdi ve harmanlanmış şeffaflığı korudu! Cevabın için teşekkürler. NOT görüntü kalitesinde neredeyse ayırt edilemezdi.
TripleAntigen

Gerçekten çalışıyor! 1MB PNG görüntüm kaliteden ödün vermeden 253KB oldu!
Bruno Serrano

5

Komut satırına aldırmazsanız , OptiPNG'ye bir göz atın, peşinde olduğunuz şey olabilir.

OptiPNG, görüntü dosyalarını bilgi kaybetmeden daha küçük bir boyuta yeniden sıkıştıran bir PNG optimize edicisidir. Bu program ayrıca harici formatları (BMP, GIF, PNM ve TIFF) optimize edilmiş PNG'ye dönüştürür ve PNG bütünlük kontrolleri ve düzeltmeleri gerçekleştirir.


Teşekkürler ama başarısız değil çok optimizasyon !! Görüntüyü yükledim
Welliam

3

Kombinasyonunu kullanın pngoutvedeflopt . pngoutPNG renklerinizin PNG-8'e uygun olup olmadığını otomatik olarak belirler ve kullanır. defloptzaten optimize edilmiş görüntüden bazı ekstra baytları sıkıştırır - herhangi bir sönük veri ile çalışmak için bir yardımcı programdır ve PNG bunlardan biridir.


teşekkürler ama pngout başarısız birkaç kb azaldı !!
Welliam

1
Sihir bekledin mi? Resminiz açıkça 256'dan fazla renge sahiptir. Önce renk miktarını azaltmak için posterleştirin.
Oleg V.Volkov

Boyutu 970'den 945'e düşürüldüğünde, bu iyi sonuçlar değildir, ayrıca posterize ettiğim diğer PNG'lerle çalışmaz.
Welliam

3

Web sitesi geliştirme bağlamında PNG'yi alfa kanalı ile ele almak için güzel bir fikir , sunucunun sizin için hile yapmasına izin vermek olacaktır: görüntü verilerini sunucudaki alfa kanalından dinamik olarak ayırın, her ikisini ayrı ayrı optimize edin ve canvas öğesi ve tarayıcıdaki bazı JavaScript'ler. Ta-Da! Tüm modern tarayıcılarla çalışır.

İşte nasıl yapıldığını açıklıyor:

http://headers-already-sent.com/artikel/shrinkimage-1/

PHP betiği ve jQuery eklentisi ile birlikte eksiksiz bir ZIP paketi de bulacaksınız. Bu konuda ne düşündüğünüzü bize bildirin.


1

Bir görüntüyü gerçekten küçültmeniz gerekiyorsa ve tüm kolay öneriler işe yaramazsa, son cevap görüntüyü sıkıştırılabilir parçalara ayırmak ve bunları komut dosyası ile istemcide yeniden birleştirmektir.

Sorudaki görüntü, dikey çizgiler ve bazı lekeler / gürültü içeren bir renk gradyanına benziyor. Bunu aşağıdaki katmanlara ayırın:

  1. Çizgi veya gürültü içermeyen renk gradyanı. Bu PNG'de iyi ve JPEG'de çok iyi sıkıştırır. Daha da iyisi, istemcide renk gradyanı oluşturmak için JavaScript'i kullanın. Muhtemelen 200 bayttan daha az JS'de yapabilirsiniz.
  2. Renk veya gürültü olmayan dikey çizgiler. Bunu tek bir 4 bit kanala (alfa veya gri) sıkıştırabilirsiniz. Yalnızca uzatabileceğiniz 1 piksel uzunluğunda bir resme ihtiyacınız var. Bu PNG'de çok iyi sıkıştırır.
  3. Gürültü. Yine, tek ihtiyacınız olan tek bir 4 bit kanal (alfa veya gri). Renk veya çizgi olmadan, bu PNG veya JPEG'de çok iyi sıkıştırılmalıdır.

Katmanları JavaScript ile tek bir resimde birleştirdiğinizde, tüm "resminiz" 15 KB veya daha az olabilir.

Bu tür çalışmalar on yıllardır Oyunlar'da endüstri standardıydı ve hala da öyle. Harika olan şey, görüntünüzü profesyonel gibi oluşturduysanız Photoshop'un zaten tüm bu ayrı katmanlara sahip olmasıdır.


1

Standart PNG dosyaları, kullanabileceğiniz en sıkıştırılmış görüntü formatıdır, bu nedenle PNG dosyaları, özellikle tasarım amaçları için web sitelerindeki görüntüler için neden bu kadar çok kullanılır?

Ama yine de PNG dosyalarını daha da sıkıştırmanın bir yolu var; görüntüde kullanılan renk sayısını azaltarak. Bu genellikle dosya boyutunu% 70 veya daha yüksek bir boyuta düşürebilir.

Bunun için bulunan yüksek genel sıkıştırma yüzdesine sahip iyi otomatik özgür yazılım FileOptimizer mümkün en küçük boyuta görüntüyü sıkıştırmak için birden motorları (yani. PngOptimizer, PNGOUT, pngwolf vb) kullanır.

İyi sonuçlarla bulduğum başka bir çevrimiçi araç şudur: http://www.giftofspeed.com/png-compressor/


1

Beni tanıtayım FileOptimizer . Görüntü optimizasyonu için çeşitli yöntemleri bir araya getirir (birkaç ekstra bayt tasarrufu için EXIF ​​kaldırma dahil - kapatılabilir).

Test sonuçları ve diğer çözümlerle karşılaştırılması.

resim açıklamasını buraya girin


0

ScriptPNG http://css-ig.net/scriptpng

size kayıplı dahil yaklaşık 10 farklı seçenek sunar! Bir demet denedim ve bu windows toplu iş dosyası (.exes demetiyle) harika

Ben şahsen 8bit kayıplı sıkıştırmak için kullanın. Nasıl çalıştığından emin değilim ama ekran resimlerim aynı görünüyor. Ekran görüntülerini sıkıştırmak için kullanıyorum. Yaklaşık 2GB png vardı, şimdi sadece 700mb

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.