Bazı wordpress temaları ile çalışıyorum 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 fark ettim (aynı format kullanılarak kaydedildi). Kaliteyi düşürmek istemiyorum - dosya boyutunu küçültmenin daha hızlı yüklenmesinin bazı yolları nelerdir?
Şu anda, örneğin, Photoshop kullanıyorum ve görüntü kalitesi kaydırıcısını '8'e (10 üzerinden) ayarlıyorum.
Yanıtlar:
Smashing Magazine PNG Optimizasyonu ve JPG optimizasyonu üzerine 2 harika makale yaptı .
Biçimler ve uygulamaları hakkında bilmediğiniz bazı şeyleri ayrıntılı olarak açıklayan oldukça derinler. Örneğin, JPEG makalesi: "Photoshop'ta Kaliteyi 50'nin altına ayarladığınızda, komşu sekiz pikselli bloklardaki rengin ortalamasını alan 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ırma için 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'ta ince ayar yapmak için katmanlı kaynak dosyalarına sahip olacak kadar şanslı olmadığınız dosyalarda, bu dosyaları sıkmak için daha fazla sıkıştırma var.
ImageOptim adlı bir Mac uygulaması kullanıyorum . Sitelerinden:
ImageOptim, en iyi sıkıştırma parametrelerini bularak ve gereksiz yorumları ve renk profillerini kaldırarak görüntüleri optimize eder - böylece daha az disk alanı kaplar ve daha hızlı yüklenir. PNG, JPEG ve GIF animasyonlarını yönetir. ImageOptim
çeşitli optimizasyon araçları için GUI sağlar: AdvanceCOMP'dan AdvPNG, 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ükemmeldir (Photoshop'ta “Web için Kayıtlı” görüntüleri kolayca küçültür) ve ayrıca Mac ve iPhone uygulamalarını daha küçük yapmak için kullanışlıdır.
Kekin parçası. Resimlerinizi (veya görüntü klasörlerinizi) pencereye sürükleyin, sıkıştırma şemalarını düzenleyen ve gereksiz meta veri ve renk profili bilgilerini (zaten geniş çapta desteklenmeyen) kaldırarak tüm bu araçlardan geçer - kaydetmeden önce renk profillerini düzeltmelisiniz, kaydetme ve yerleştirme).
Bu alıntıda bağlantılı tüm araçların PNGOUT hariç Windows / Linux / Mac sürümleri vardır, ancak neyse ki birileri PNGOUT'u OS X ve linux'a taşıdı çünkü çok düşünceli. ImageOptim'i kullanmayı seçerseniz, .app'ye PNGOUT hariç tümünü dahil eder, bu nedenle PNGOUT bağlantı noktasını alın, / usr / local / bin (veya herhangi bir yere) içine bırakın ve ImageOptim'e nerede olduğunu söyleyin.
Photoshop'un "Web ve Aygıtlar İçin Kaydet" seçeneğinden kaydettikten sonra bile dosya boyutlarının% 30'un üzerine düştüğünü görmek benim için özellikle PNG görüntülerde nadir değildir.
Koru: Optimizasyonu çalıştırdıktan sonra, soldaki simge sütununa göre sıralayın ve (X) simgesine sahip tüm satırları seçin - daha da azaltılmamış dosyalar. Bunları listeden kaldırın ve onay işareti simgesine sahip tüm resimleri yeniden çalıştırın. Hala dosya boyutunu kaybeden resimlere sahip olacağınıza söz verebilirim. Tüm (X) simgelerini alana kadar sıralamayı, seçimi, kaldırılmasını ve yeniden çalıştırılmasını tekrarlayın ve bir gün çağırın.
Photoshop'ta fotoğraf kaydederken kullanmanızı öneririm File > Save for Web and Devices. Sıkıştırma seviyeleri ile oynamanıza ve görsel sonucu gerçek zamanlı olarak görmenize izin verecektir. Fotoğraflarda genellikle seviye 8'den daha düşük kaydedebilir ve yine de harika sonuçlar elde edebilirsiniz.
Yahoo'nun Smush.it'ini kontrol etmek isteyebilirsiniz . Çok iyi çalıştığını gördüm.
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ış) bir logo düşünün. Aslında kullandığı sadece 16 renk olduğunu düşünün.
Görüntünün kalitesini düşürmeden (bu yalnızca belirli türdeki görüntüler 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 birleştirmeyi ve ekranlarını (sprite) kontrol etmek için CSS veya JavaScript kullanmayı da düşünebilirsiniz. Bu, her görüntü için yapılan HTTP isteklerinin sayısını kaydeder.
Diğer formatları deneyin.
Temel olarak, görüntünüzü 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 ve bazen çok daha küçük olduğunu belirtmek gerekir. PNG, örneğin siyah beyaz çizgi çizimleri gibi siyah beyaz görüntüler için çok daha küçüktür.
Bu günlerde verilen tavsiyeler, istekleri azaltarak yükleme sürelerini hızlandırmak için CSS spritelarını kullanmaktır, ancak yine de elde ettiğiniz görüntü boyutuna bakmanız gerekir. Örneğin, birkaç siyah beyaz PNG'yi renkli biriyle birleştirirseniz, CSS sprite görüntüsünün bileşen görüntülerden çok daha büyük olması mümkündür.
Ayrıca tüm EXIF verilerini çıkardığınızdan emin olmak istersiniz - bunların neredeyse tamamı web'deki kullanıcılarla alakasızdır, fotoğrafı çekmek için bir Canon 5D kullandığınızı ve kullandığınız 0,5 saniyede pozlanmış, ISO 160, pozlama eğilimi ve 9 mm odak uzaklığı olan 2,8'lik bir F-Stop?
Tüm bu meta veriler görüntünüze ağırlık katar ve genel olarak çıkarılmalıdır.
Jessegavin belirttiği gibi , çoğu görüntü uygulamaları size sıkıştırma etkilerinin bir önizlemesini gösterecektir - bunları kullanın, çünkü "8" battaniye ayarı nadiren size mümkün olan en iyi ticareti verecektir.
Son olarak, Google Page Speed Firefox / Firebug eklentisi, görüntü boyutlarını ne kadar azaltabileceğiniz konusunda iyi bir fikir verebilir (daha küçük sürümleri görüntülemenize ve kaydetmenize izin vermek dahil).
İstediğiniz kalite düzeyini korurken görüntünüzün olabildiğince küçük olmasını sağlamak için diğer tüm önerileri yaptıktan sonra, web sitenizi en az HTTP üstbilgisi ile görüntüler sunacak ve sunduğunuz üstbilgiler, proxy sunucularını ve web tarayıcılarını önbelleğe alarak görüntülerin uygun şekilde depolanmasını sağlar.
İ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, çerezleri ayarlamayan bir ana bilgisayardan görüntüler, CSS ve diğer statik bileşenler gibi şeyler sunduğunuzdan emin olun (örn. Static.example.com).
Statik görüntüler için, Sona Erme başlığını uzak gelecekte bir tarihe ayarlayın. Bu, web tarayıcısının ve ortadaki önbellek proxy'lerinin görüntüyü olabildiğince uzun tutmasını sağlar. Bunun tek dezavantajı, farklı bir görüntü göstermek istiyorsanız, farklı bir dosya adı kullanmanız ve bunun yerine bağlantı oluşturmanız gerektiğidir. Dosya adındaki sürüm numaralandırma (ör. 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 Süresi Sonu üstbilgisi (erişim artı X saat) ayarlayın ve dosyaları önceden indirmiş olan tarayıcıların hızlı bir şekilde test edebilmesi için Son Değiştirilen üstbilgisini veya eTag üstbilgisini (her ikisini birden değil) ayarladığınızdan emin olun. görüntünün tamamını aşağı çekmek yerine üstbilgileri karşılaştırarak geçerli sürüme sahip olup olmadıklarını.
Bu teknikleri tartışan birçok kaynak olmasına rağmen Yahoo, içerik dağıtımının performansını tek bir yerde iyileştirmek için birçok ipucu getiren harika bir iş çıkardı .