it-swarm-tr.com

Resimlerimin dosya boyutunu azaltmak için ne yapabilirim?

Bazı wordpress temalarıyla çalışma Bazı görüntü dosyalarını değiştirdim ve düzenlenen sürümlerimin bazen orijinalden 3-4x daha büyük olduğunu farkettim (aynı format kullanılarak kaydedildi). Kaliteyi düşürmek istemiyorum - daha hızlı yüklenebilmesi için dosya boyutunu küçültmenin bazı yolları nelerdir?

Şu anda, örneğin, Photoshop kullanıyorum ve görüntü kalitesi kaydırıcısını '8' olarak ayarlıyorum (10 üzerinden).

15
Ryan Elkins

Smashing Magazine PNG Optimization ve JPG optimizasyon üzerine iki harika makale yaptı.

Oldukça derinlemekte ve formatlar ve uygulamaları hakkında bilmediğiniz bazı şeyleri ayrıntılı olarak açıklıyorlar. Örneğin, JPEG makalesi: "Kaliteyi Photoshop'ta 50'nin altına düşürdüğünüzde, komşu sekiz piksellik bloklardaki rengi ortalayan, renk aşağı örnekleme adı verilen ek bir optimizasyon algoritması çalıştırdığını unutmayın.".

Her iki makale de, dosyalarınızı daha fazla sıkıştırmaya hazırlamak için Photoshop'ta kullanabileceğiniz belirli tekniklere girer. Bir dosya kaydedildikten sonra kullanılan tekniklerden çok daha etkilidir.

Bu dosyaları kaydettikten sonra veya Photoshop'taki Tweak için katmanlı kaynak dosyalara sahip olduğunuz için yeterince şanslı olmadığınız dosyalarda, bu dosyalardan kurtulmak için hala daha fazla sıkıştırma var.

ImageOptim adlı bir Mac uygulaması kullanıyorum. Sitelerinden:

ImageOptim görüntüleri optimize eder - böylece daha az disk alanı kaplar ve daha hızlı yüklenir - en iyi sıkıştırma parametrelerini bularak ve gereksiz yorumları ve renk profillerini kaldırarak. PNG, JPEG ve GIF animasyonlarını yönetir.

ImageOptim, çeşitli optimizasyon araçları için GUI sağlar: AdvPNG AdvanceCOMP'dan, OptiPNG , PngCrush , JpegOptim , libjpeg'den jpegtran, Gifsicle ve isteğe bağlı olarak PNGOUT .

Görüntüleri web'de yayınlamak için mükemmel (Photoshop'ta “Web için Kaydedilen” görüntüleri kolayca küçültür) ve Mac ve iPhone uygulamalarını daha küçük yapmak için de yararlıdır.

Kekin parçası. Görüntülerinizi (veya görüntü klasörlerinizi) pencereye sürükleyin, sıkıştırma araçlarını düzenleyen ve gereksiz meta-veri ve renk profili bilgilerini kaldırarak (yine de yaygın olarak desteklenmeyen - bu renk profillerini kaydetmeden önce sabitlemelisiniz) onları kaydetmemek ve gömmemek).

Bu alıntıya bağlanan tüm araçların PNGOUT hariç Windows/Linux/Mac sürümleri var, ancak çok şükürler yüzünden OS X ve linux'a PNGOUT yerleştirilmiş birileri var. ImageOptim'i kullanmayı seçtiyseniz, PNAPUT dışındakileri .app'a dahil edecektir, bu yüzden PNGOUT portunu alın,/usr/local/bin (ya da her yere) bırakın ve ImageOptim'e nerede olduğunu söyleyin.

Photoshop'un "Web ve Aygıtlar İçin Kaydet" özelliğini kaydettikten sonra bile dosya boyutlarının% 30'un üzerinde düşmesi, özellikle PNG görüntülerinde benim için nadir değildir.

Püf Noktası: Optimizasyonu çalıştırdıktan sonra, soldaki simge sütununa göre sıralayın ve (X) simgesi olan tüm satırları seçin - daha fazla azaltılmamış dosyalar. Bunları listeden kaldırın ve onay işareti simgesi olan tüm resimler üzerinde tekrar çalıştırın. Size neredeyse dosya boyutunu kaybedecek resimleriniz olacağına söz veriyorum. Tüm (X) simgelerini alana kadar sıralama, seçme, kaldırma ve tekrar okuma işlemlerini tekrarlayın ve bir gün arayın.

14
Bryson

Fotoğrafları Photoshop'ta kaydederken File > Save for Web and Devices kullanmanızı öneririz. Sıkıştırma seviyelerinde oynamanıza ve görsel sonucu gerçek zamanlı olarak görmenize olanak sağlar. Fotoğraflarda genellikle seviye 8'den düşük kaydedebilir ve yine de mükemmel sonuçlar alabilirsiniz. alt text

10
jessegavin

Yahoo'nun Smush.it adresini kontrol etmek isteyebilirsin. Çok iyi çalışması için buldum.

4

PNG görüntüleri için renk haritasındaki renk sayısını azaltabilir ve dizine alınmış bir PNG olarak kaydedebilirsiniz. Örneğin, 128x128 piksel (sıkıştırılmamış) olan bir logo düşünün. Gerçekten kullandığı sadece 16 renk olduğunu hayal edin.

  • PNG-32, piksel başına dört bayt - 65 KB
  • PNG-8, piksel başına bir bayt - 16 kB
  • PNG-4, piksel başına dört bit - 8 KB

Görüntünün kalitesini düşürmeden (bu yalnızca belirli görüntü türleri için geçerlidir) boyutu önemli ölçüde azaltabileceğinizi görebilirsiniz.

Düğmeler ve site simgeleri için, bunları tek bir görüntüde toplamayı ve ekranlarını kontrol etmek için CSS veya JavaScript kullanarak düşünebilirsiniz (sprite). Bu, her görüntü için yapılan HTTP isteklerinin sayısını korur.

4
dmsnell

Diğer biçimleri deneyin.

  • Alfa ve/veya gölgeli fotoğrafçılık için PNG
  • Küçük renk paleti olan görüntüler için GIF (siyah/beyaz veya sarı simge veya başka bir şey)
3
Aaron

Temel olarak, resminizi farklı formatlarda kaydetmeyi deneyin ve ardından dosya boyutuna bakın.

JPEG kullanıyorsanız, Paint.net gibi bir grafik düzenleyicide görüntünün kalitesini yukarı ve aşağı ayarlayabilmeniz gerekir. % 50 görüntü kalitesi genellikle web için yeterince iyidir ve görüntüyü çok daha küçük yapar.

PNG ile bunu yapamazsınız ancak bazen PNG'nin JPEG'den çok daha büyük, bazen çok daha küçük olduğunu belirtmek önemlidir. PNG, siyah beyaz resimler için, örneğin siyah beyaz çizgi çizimleri gibi daha küçüktür.

Bugünlerde verilen tavsiyeler, talepleri azaltarak yükleme sürelerini hızlandırmak için CSS sprite kullanmaktır, ancak yine de elde ettiğiniz görüntü boyutuna bakmanız gerekir. Örneğin, birkaç siyah beyaz PNG'yi renkli bir renkle birleştirirseniz, CSS Sprite görüntüsünün bileşen görüntülerinden çok daha büyük olması olasıdır.

2
delete

Ayrıca, tüm EXIF ​​verilerini çıkardığınızdan emin olmak istersiniz; bunların neredeyse tamamı web'deki kullanıcılar ile alakasızdır, gerçekten fotoğraf çekmek için bir Canon 5D kullandığınızı ve kullandığınızı bilmeleri gerekir mi? 0,5 saniyeye maruz kalan, ISO değeri 160 olan, pozlama yanlılığı olmayan ve 9mm odak uzaklığı olan 2,8 F-Durdurma?

Bu meta verilerin tümü görüntünüze ağırlık kazandırır ve genel olarak çıkarılmalıdır.

jessegavin işaret ettiği gibi, çoğu resim uygulaması size sıkıştırmanın etkilerinin bir önizlemesini gösterecektir - bunları kullanın, çünkü "8" battaniye ayarı nadiren mümkün olan en iyi işlemi sağlayacak.

Son olarak, Google Sayfa Hızı Firefox/ Firebug eklentisi, resim boyutlarını ne kadar küçültebileceğiniz konusunda iyi bir fikir verebilir (daha küçük sürümleri görüntülemenize ve kaydetmenize izin vermek dahil) .

2
1
adamcodes

İstediğiniz kalite seviyesini koruyarak resminizin mümkün olduğu kadar küçük olmasını sağlamak için diğer tüm önerileri yaptıktan sonra, web sitenizi, en az HTTP başlıklı görüntülere hizmet edecek şekilde yapılandırmak ve Sunmakta olduğunuz başlıklar, proxy sunucularını ve web tarayıcılarını önbelleğe alarak görüntülerin uygun şekilde depolanmasına izin verir.

İsteklerin boyutunu azaltmak için, web sunucunuzun X-Powered-By gibi gereksiz başlıklar göndermeyecek şekilde yapılandırıldığından emin olun. Ayrıca, çerezler ayarlamayan bir Host cihazından görüntüler, CSS ve diğer statik bileşenler gibi şeyler sunduğunuzdan emin olun (örneğin, static.example.com).

Statik olan görüntüler için, Süre Sonu başlığını çok ileri bir tarihe ayarlayın. Bu, web tarayıcısının ve ortadaki herhangi bir önbellek proxy'nin mümkün olduğu kadar uzun süre görüntüde kalmasını sağlar. Bunun tek dezavantajı, farklı bir resim göstermek istiyorsanız farklı bir dosya adı kullanmanız ve bunun yerine buna bağlantı kurmanız gerekmesidir. Dosya adındaki sürüm numaralandırma (örneğin, myimage_1.png veya /images/3/logo.png) bunu yapmanın etkili bir yolu olabilir. Daha az statik sayfalar için, gerçekçi bir Sona Erme başlığı belirleyin (erişim artı X saat) ve daha önce indirilen tarayıcıların hızlı bir şekilde test edebilmeleri için Son Değiştirme Tarihi başlığını veya eTag başlığını (her ikisini de değil) ayarladığınızdan emin olun. Tüm görüntüyü aşağı çekmek yerine başlıkları karşılaştırarak geçerli sürüme sahip olup olmadıkları.

Bu teknikleri tartışan pek çok kaynak olmasına rağmen, Yahoo bir araya gelerek içerik dağıtımının performansını iyileştirme için birçok ipucu getirerek harika bir iş çıkardı.

1
JasonBirch