Web Tasarımcılar için JPEG Optimizasyon Kılavuzu

Başlatan ali, Tem 31, 2019, 02:05 ös

« önceki - sonraki »
Görüntü sıkıştırma, her yerel medya biçiminde bulunur. Bununla birlikte, GIF, PNG ve JPEG arasındaki fark , bilgilerin nasıl sıkıştırıldığı ve ekranda görüntülenme şeklidir.

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 bir denge 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 tasarruf etmekten kaçının

JPEG görüntülerinizi neredeyse hiç bir zaman% 100 kalitede kaydetmemelisiniz. Bu olacak değil en olası "optimize" imajını üretirler. 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 kupon alacaktır -% 70, 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, optimum değeri düşürmek için% 50 oranında "limit" olarak yemin edecektir.

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ırma oranında bir JPEG kaydederseniz% 60 kalite elde edersiniz (sıkıştırma olmadan maksimum% 100 kalite ile karşılaştırıldığında).

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 (Parlaklık, Chroma Mavisi, Chroma Kırmızısı) dönüştürdüğünüzde daha karmaşık konulara girer.

Işıklılık veya parlaklık ayarı daima JPEG sıkıştırması 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 örnekleme olarak da bilinir . Ellerini kirletmekle ilgilenen tasarımcılar bu sıkıştırma algoritması hakkında biraz daha fazla şey okumayı çok sevecekler.

Özellikle JPEG görüntülere odaklanan kroma örneklemeyle ilgili bu harika blog gönderisine göz atın.

İlginç bir not olarak, Adobe Photoshop her zaman sıkıştırma için alt örneklemeyi kullanmaz. "Web İçin Kaydet" iletişim kutusuyla kaydedilen herhangi bir görüntü yalnızca% 50 kalite değerinin altında kroma alt örnekleme kullanır.

Farklı web medyası
Web aynı zamanda farklı görüntü medyalarıyla doludur. Fotoğraf, simge, düğme, rozet ve diğer grafiklere sahip olabilirsiniz. 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 oranları ve daha küçük dosya boyutlarıyla küçük resimler 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.

Sıkıştırma Aracını Kullanma
Sitenizde kolayca dolaşabileceğiniz resim dosyalarını organize etmiş olabilirsiniz. Ayrıca, fotoğraflarını Amazon S3 , Google Cloud Storage gibi bir Bulut hizmetinde veya görüntü için daha hızlı teslimat yapacak bir CDN üzerinden de barındırabilirsiniz . Yine de, görüntü boyutlarını küçültmek için bir sıkıştırma aracı kullanmak isteyeceksiniz. Her dosyanın boyutunu kaldırabileceğiniz fazladan baytlar çok önemlidir. Ve işte kontrol etmek istediğiniz araçlardan bazıları:

TinyJPG
TinyJPG , bir resim yükleyebileceğiniz ve dosya boyutunu optimize etmek için gereksiz tüm baytlar yükleyebileceğiniz tarayıcı tabanlı bir web uygulamasıdır. % 100 kayıpsızdır, yani görüntü kalitesi hiç bozulmaz. Aynı anda 5Mb ile 20 görüntüye kadar yükleyebilirsiniz.

Siteniz için WordPress kullanıyorsanız. Resmi eklentisini kullanabilirsiniz, JPEG ve PNG resimlerini sıkıştır . Bu eklenti ayrıca PNG formatındaki görüntüleri optimize etmenize izin veren kardeş sitesi TinyPNG'ye de bağlanır .

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ı fonksiyonları 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 (Radikal Görüntü Optimizasyon Aracı) ' dır . Bu eklenti, GIMP gibi diğer benzer açık kaynaklı grafik editörleri için çalışıyor.

Yazılım desteği harika ve RIOT özelliklerinin kullanımı çok kolay. Görüntü sıkıştırmayla 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.

Sonuç
Modern İnternet bağlantı hızlarımız 4G ve yaklaşmakta olan 5G ile artmasına rağmen, web sayfalarımızın boyutunu azaltmamız gerekecek. Her bayt sonunda kullanıcılarınız için bir servete mal olacak ve bazı ülkelerde bu maliyet oldukça önemli olabilir.

Bu makalede, web sayfasındaki görüntü boyutunu azaltmak için görüntülerin nasıl sıkıştırılacağını gördük. Sıkıştırma görüntüsü aldatıcıydı çünkü kalite ile madde arasındaki uygun dengeyi bulmanız gerekiyor. Ayrıca, aralarından seçim yapabileceğiniz çok sayıda araç yoktu, ancak şimdi seçenekler daha gelişmiş ve kullanımı kolaydır.

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.

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.