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

Merhaba, tekrar hoş geldiniz!

Bilgi sahibi olanlarla ihtiyaç duyanları buluşturmak, farklı bakış açılarına sahip insanları bir araya getirerek birbirlerini daha iyi anlamalarını sağlamak ve herkesin bilgisini paylaşmasını sağlamak istiyoruz.

ali

Moderator
Katılım
6 Ara 2018
Mesajlar
93
Tepkime puanı
35
Puanları
18
Yaş
35
Konum
Almanya
Web sitesi
webtiryaki.com
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.
 
Harika bir sunum olmuş teşekkür ederim. Bende aklımdakileri yazıyım.

1. Compressor.io

Yüksek kalitede tutulan görüntülerin ve fotoğrafların boyutunu tamamen azaltmak için etkileyici ve kullanışlı bir çevrimiçi araçtır. JPEG, PNG, GIF, SUG olmak üzere dört dosya formatını destekler. Kayıpsız sıkıştırma, ancak, yalnızca PNG ve JPG için çalışır, bu Mac'te bu araçla boyutunun küçültülmesi durumunda JPEG dosyasının kayıp olacağı anlamına gelir. Dahası, Mac'e toplu fotoğraf yüklemenize izin vermez ve tek dosya boyutu 10 MB ile sınırlıdır.

2. JPEGMini

JPEGMini, Mac'te JPEG dosya boyutunu küçültmek için harika bir çevrimiçi araçtır. JPEGMini'yi kullanmak çok basittir. Öncelikle, fotoğrafı pencereye bırakmalı veya “Fotoğrafları Yüklemek İçin Basın” ı tıklayıp birkaç saniye beklemelisiniz. Daha sonra, aşağıdaki gibi bir resim elde edersiniz. Sol taraf orijinal, sağ taraf kompresördür. Bunları karşılaştırmak için mobil fareyi kullanabilirsiniz. Gerekirse, bu JPEG görüntüsünü arkadaşlarınız ve ailenizle paylaşabilirsiniz. Ancak yükleme işlemlerinin yapılması için Compressor.io'dan daha uzun süre bekleyin.

3. JPEGReducer

JPEGReducer, JPEG fotoğraf boyutunu Mac'te 5 türe sıkıştırmak için ilginç bir web sitesi seçeneğidir. Almayı tercih ettiğin kişiyi kurtar. İşlemi de kolaydır, Mac'inizden bir JPEG dosyası yüklemeniz veya bir URL girmeniz gerekir. Maksimum boyut 2 MB'dir. Ardından “Küçült” e bastığınızda, sayfa otomatik olarak atlayacaktır. Ardından, indirgenmiş JPEG resimlerini ve küçük resimlerini Mac'inizde görüntüleyebilirsiniz.

4. JPEG-Optimizer

JPEG-Optimizer, bilgisayarda JPEG görüntü boyutunu yeniden boyutlandırmak ve azaltmak için akıllı ve kompakt bir çevrimiçi araçtır, Mac kullanıcısı da kullanabilir. Mac'inizden optimize etmek istediğiniz bir JPEG dosyası seçmeniz gerekir. Daha sonra “Sıkıştırma Seviyesi 0-99” ve “Piksellerde Yeni Fotoğraf Genişliği” ni tanımlayın. Sonunda, yeni JPEG fotoğrafınızı internette görüntülemek için "Fotoğrafı En İyileştir" i tıklayın. Büyük fotoğrafları sıkıştırmak için birkaç dakika geçmesi gerektiğine dikkat edin.

5. Optimizilla

Tüm ücretsiz çevrimiçi görüntü iyileştiricileri arasında en sevdiğim özellik, dikkat çekici ve akıllı özellikleri nedeniyle Optimizilla'dır. Bu araç, JPEG ve PNG dosyalarını mümkün olan en küçük boyuta daraltabilir. Tek yapmanız gereken, JPEG dosyalarını Mac'ten yüklemek veya bunları araca bırakmak. Bir klibe en fazla 20 görüntü yükleyebildiğiniz için toplu sıkıştırma uygulanabilir. Dosyaları sıkıştırmayı bitirdikten sonra, kalite ayarı için kuyruktaki küçük resimlere basın. Optimizilla'nın muhteşem özelliklerinden biri, JPEG görüntülerin kalitesini ayarlama hakkına sahip olmanızdır. Değeri doğrudan ayarlayabilirsiniz veya kaydırıcıyı Mac'inizde 10-100 arasında hareket ettirirseniz, JPEG dosya boyutu istediğiniz gibi küçültülür.

İkinci Yöntem: Üçüncü Taraf Uygulamasını Kullanma

Mac'te JPEG dosya boyutunu küçültmek için çevrimdışı bir araç düşündünüz mü? Sadece teknik olarak Mac ile uyumlu bir üçüncü taraf programı demek istiyorum. BetterUnarchiver, Mac için sıkıştırılmış dosyaları toplu halde toplamanıza, arşiv dosyalarını tamamen veya kısmen Mac'te açmanıza izin veren bir arşivleyici ve arşivleyicidir. Çevrimiçi redüktörlerin aksine, BetterUnarchiver, Mac'teki sıkıştırılmış dosyalara sıkıştırarak dosya kapasitesini azaltmak için tasarlanmıştır. JPEG dosyalarınızı Mac'te ZIP, TAR ve 7Z formatlarına sıkıştırmak ve bunları korumak için bir şifre oluşturmak için kullanabilirsiniz.
 

Geri
Üst Alt