Web İçin JPEG Optimizasyonu - Ultimate Guide

Görüntü sıkıştırma, her yerel medya biçiminde bulunur. Ancak, GIF, PNG ve JPEG arasındaki fark Nasıl bilgi sıkıştırılır ve ekranda gösterilir. Web'de yayınlanan harika görsel medyayı oluşturmak için pek çok ipucu var, ancak pek çok tasarımcı hala bazı temelleri anlamıyor.

Bu kılavuzda uygun JPEG sıkıştırması için birkaç fikir paylaşmak istiyorum. Web sayfalarının yüklenme sürelerini azaltmak için resimlerinizi optimize etmek ve aynı zamanda iyi bir kalite düzeyine sahip olmak istersiniz. Her şey dosya boyutları ve ekran gösterimi arasında dengeyi bulmakla ilgili. Tasarımcıların izleyebileceği mükemmel bir çözüm yok. Başlangıçta bazı pratikler gerektirir, ancak bir kez JPEG sıkıştırmasını anladığınızda, gelecekte web siteleri geliştirmek çok daha kolay hale gelir..

% 100 Her Zaman Tasarruftan Kaçının

JPEG görüntülerinizi neredeyse hiç bir zaman% 100 kalitede kaydetmemelisiniz. Bu irade değil en iyisini üret “optimize” görüntüsü. Aslında dosya boyutlarınızı aşırı derecede artıran bir optimizasyon limit formülü ile hesaplar. % 90 veya% 95 kaliteye kıyasla, dosya boyutunda önemli bir düşüş göreceksiniz.

Çoğu zaman, görüntüleri% 90'dan daha düşük kalitede kaydetmeniz önerilir. Photoshop'ta Web için Kaydet iletişim kutusunu açarsanız, aralarından seçim yapabileceğiniz önceden ayarlanmış değerler sunduğunu fark edeceksiniz. Aşağıdaki olası JPEG değerlerini ekledim - doğal adlandırma kurallarına dikkat edin.

Düşük - % 10
Orta - % 30
Yüksek - % 60
Çok yüksek - % 80
Maksimum - 100%

Adobe Photoshop'ta bile% 60 görüntü kalitesi 'yüksek' olarak kabul edilir. Birçok web geliştiricisi% 50 arasında kefil olur -% 70 buna bağlı kalmak için güvenli bir aralıktır.

Ne Kadar Düşük?

Optimizasyon için seçtiğiniz değerler tamamen eldeki projeye bağlıdır. Hangi grafik türlerinin en yüksek dosya boyutlarını vereceğini düşünmeniz gerekir - bunlar gerçekten sıkıştırılması gerekenler.

% 30'un altında, temel resim kalitesini gerçekten düşürdüğünüzü iddia ediyorum. Diğer tasarımcılar% 50 oranında yemin edeceklerdir. “sınır” optimal değeri azaltmak için. Ancak buradaki en iyi tavsiye, yalnızca farklı ayarları denemek ve neyin en iyi göründüğünü görmek! Web için JPEG görüntülerini optimize eden birkaç deneme çalışmasında yanlış gidemezsiniz.

Sıkıştırma Seçenekleri

Öncelikle birbirlerinin tersi olan 'sıkıştırma' ve 'kalite' terimlerini netleştirmeliyiz. Bu,% 40 sıkıştırmayla bir JPEG kaydederseniz% 60 kalite elde edersiniz (sıkıştırma olmadan maksimum% 100 kaliteye kıyasla).

Bunlar, kullanılabilecek en temel seçeneklerdir - ve web için kaydederken yeterli olmalıdır. Genel kullanıcılar çok daha fazla kişiselleştirme yapmazlar. Alt örnekleme, RGB görüntülerini YCbCr'ye dönüştürdüğünüz daha karmaşık sorunlara girer (Parlaklık, Chroma Blue, Chroma Red).

(Resim Kaynağı: Kara Monroe)

parlaklık veya parlaklık ayarı JPEG sıkıştırmasında her zaman mümkün olan en yüksek değerde tutulur. Ayrı bir kanaldaki bu parlaklık değeri ile, Kırmızı ve Mavinin bireysel renk değerlerini optimize etmek daha kolaydır. Bu aynı zamanda kroma örneklemesi. Ellerini kirletmekle ilgilenen tasarımcılar bu sıkıştırma algoritması hakkında biraz daha fazla şey okumayı sevecekler. Özellikle JPEG görüntülere odaklanan kroma örneklemeyle ilgili bu harika blog gönderisine göz atın.

(Resim Kaynağı: Derek Hatfield)

İlginç bir not olarak, Adobe Photoshop her zaman sıkıştırma için alt örneklemeyi kullanmaz. İle kaydedilen tüm görüntüler “Web İçin Kaydet” iletişim kutusu yalnızca% 50 kalite değerinin altında chroma alt örneği kullanır.

Farklı Web Medyası

Web aynı zamanda farklı görüntü medyalarıyla doludur. Fotoğrafları, simgeleri, düğmeleri, rozetleri ve tonlarca başka grafikleri olabilir. Ancak, bir düğme ile fotoğraf arasındaki kalitenin karşılaştırılmasının bir anlamı yoktur..

Fotoğrafları veya ayrıntılı görüntüleri kullanırken, daha az sıkıştırılmış bir JPEG dosyasına bağlanmayı düşünün. Ardından, sitenize küçük sıkıştırma oranı daha yüksek ve daha küçük dosya boyutlarıyla ayarlayabilirsiniz. Tek dezavantajı, bir medya galerisi için iki resim seti sağlamanız gerekmesidir. Bir web sitesi boyunca diktiğiniz birçok grafikten haberdar olun ve her biri için ayrı ayrı optimizasyon teknikleri düşünün.

Grafik Modelini Planlama

Organize bir dosya sistemine sahip olmak istemeniz kolay. Bazı web yöneticileri, fotoğraflarını Flickr veya Picasa gibi web’de başka bir yerde barındırmayı seçecektir. Yine de, görüntü boyutlarını küçültmek için bir sıkıştırma aracı kullanmak isteyeceksiniz, ancak bunları sitenizde nasıl göstereceğiniz değişecektir. Bu, özellikle internete erişimi olan mobil cihazların popüler yükselişinde geçerlidir..

Ön kodunuzda olacak olan JavaScript JPEG kodlamasını tartışan ilginç bir makale buldum. Yüksek kaliteli resim galerilerine pek bir faydası yoktur, ancak mobil ziyaretçileriniz için yükleme sürelerini azaltabilir. Ayrıca, görüntüleri hotlink yaparken veya küçük resimleri dinamik olarak yeniden kırparken de yararlı bir teknik olacaktır..

Kontrol etmek için başka bir süslü araç Yahoo! Smush.it. Bir resim yükleyebileceğiniz tarayıcı tabanlı bir web uygulamasıdır ve Smush.it, dosya boyutunu optimize etmek için gereksiz tüm baytları kaldıracaktır. % 100 kayıpsızdır, yani görüntü kalitesi hiç bozulmaz. Daha da iyisi, web sitenize veya bir üçüncü taraf sunucusuna ev sahipliği yaptıysanız, doğrudan URL’lerden toplu görüntü yükleyebilirsiniz..

Ek Aletler

Görüntü manipülasyonu konusunda denemek için bir sürü yazılım var. Her dosyanın boyutunu kaldırabileceğiniz fazladan baytlar çok önemlidir. Dışarıda çok fazla yazılım yok, ancak mevcut seçenekler şaşırtıcı.

IrfanView

Bu ücretsiz Windows yazılımı, herhangi bir büyük resim grubunu görüntülemenizi ve optimize etmenizi sağlar. Özellikle bu yazılımı seviyorum, çünkü çoklu dizinlerdeki görüntülerden toplu dönüştürme yapılmasını destekliyor. Aynı işlevleri yüzlerce JPEG görüntüsünün üzerine otomatik olarak uygulayabilirsiniz..

Daha da iyisi, 3. parti geliştiricilerin eklenti desteği. Böyle bir örnek RIOT'tur (Radikal Görüntü Optimizasyon Aracı). Bu eklenti, GIMP gibi diğer benzer açık kaynaklı grafik editörleri için çalışıyor. Resimlerinizin her biri için sıkıştırma parametrelerini manuel olarak ayarlayabileceğiniz çift görüntülü bir görünüm sunar.

Yazılım desteği harika ve RIOT özelliklerinin kullanımı çok kolay. Görüntü sıkıştırma ile birlikte, EXIF ve Adobe XMP gibi ek meta verilerin kaldırılmasına da erişebilirsiniz. Bu ekstra veri bitleri yalnızca toplam dosya boyutunuza ekleyebilir ve nadiren ihtiyaç duyulur.

Mac için ImageOptim

OS X kullanıyorsanız ve güçlü bir sıkıştırma uygulamasına ihtiyacınız varsa, daha fazla bakmanıza gerek yok. ImageOptim, web’deki görüntüleri sıkıştırmak için kullanabileceğiniz güçlü bir araçtır..

Tüm uygulama sürükle ve bırak işlevini destekler, böylece büyük resim kümelerini optimize etmek kolaydır. Benzer şekilde komutları doğrudan Terminal içinden çalıştırabilir ve kabuk komut dosyalarını düzenleyebilirsiniz. Daha fazla bilgi ve teknik destek için Google kod sayfasına göz atın.

Opera’da pikselli JPEG görüntüler elde etmede en son 1.3.3 kararlı sürümle ilgili bazı küçük sorunlar var. Tüm optimize edilmiş görüntülerinizi 4 ana tarayıcıda (Chrome, Safari, Firefox ve Opera (ve belki IE) kontrol etmeyi deneyin. Eğer herhangi bir şey çarpık görünüyorsa, biraz daha temiz olan ImageOptim 1.3.0 indirmeyi deneyebilirsiniz.

Faydalı Kaynaklar

JPEG 101: JPEG Üzerine Bir Crash Course Guide
WordPress için JPG görüntüleri kaydetmek için doğru sıkıştırma ayarları
Akıllı JPEG Optimizasyon Teknikleri
Web siteleri için JPEG görüntüleri nasıl optimize edilir
Görüntü Sıkıştırma Hakkında Bilmeniz Gereken Her Şey

Sonuç

JPEG sıkıştırması zordur, çünkü kalite ile madde arasındaki uygun dengeyi bulmanız gerekir. Modern İnternet bağlantı hızlarımız arttıkça, web sayfalarının boyutunu azaltmaya hala ihtiyaç vardır. JQuery ve Typekit gibi yeni çerçeveler, iyi optimize edilmiş bir tasarımda bile yüzlerce kilobayt ile başa çıkabilir..

Yine de Adobe Photoshop'u prömiyer görüntü düzenleme yazılımım olarak önermek zorundayım. JPEG optimizasyon işlemi için muhtemelen daha iyi başka örnekler de var. Ancak web tasarımcıları, daha az bilinen açık kaynaklı çözümlerle bile geçebilir. JPEG sıkıştırmasında benzer püf noktalarınız veya fikirleriniz varsa lütfen aşağıdaki tartışma alanını bizimle paylaşın.