Kayıplı ve Kayıpsız Sıkıştırma: Her İki Format İçin Başlangıç ​​Kılavuzu

Yayınlanan: 2022-01-15

Dijital görüntüler web'in doğal bir parçasıdır ve medya olmadan herhangi bir içerik oluşturmak zordur. Mütevazı hareketsiz görüntü, yazınıza ekstra bağlam sunmanın harika bir yoludur.

Ancak, bir görüntü optimizasyon olmadan dosya boyutunda çok büyük olabilir. Kayıplı ve kayıpsız sıkıştırma ortak bir husustur, çünkü her biri bir görüntünün boyutunu küçültebilir, ancak dikkate alınması gereken kalite ödünleşimleri de vardır.

Neredeyse her zaman bir görüntüye biraz sıkıştırma uygulamanız gerekecektir. Bu, dosya boyutlarını küçük tutarken kaliteyi kabul edilebilir olarak belirttiğiniz bir seviyede tutar. Doğru sıkıştırma seviyesini seçmek, nihai hedeflerinize ve gereksinimlerinize bağlı olacaktır.

Bu gönderi için kayıplı ve kayıpsız sıkıştırmaya bakacağız. Boyunca, bir görüntünün "şekil alması" için gereken süreçten, sıkıştırmanın ne olduğundan ve resimlerinizi optimize etmenin diğer birçok yönünden bahsedeceğiz.

Kayıplı ve Kayıpsız Arasındaki Farklar

Herhangi bir dijital görüntü sıkıştırması söz konusu olduğunda, aralarından seçim yapabileceğiniz birkaç farklı format vardır. Bazen bunların birçok faktöre bağlı olarak başka isimleri olabilir. Ancak, temel düzeyde iki tür bulacaksınız:

  • Kayıplı sıkıştırma: Buradaki amaç, bir görüntü için mümkün olan en küçük dosya boyutunu sağlamaktır. Bu nedenle, görüntü kalitesi genellikle öncelikler listesinin alt sıralarında yer alır.
  • Kayıpsız sıkıştırma: Bu sıkıştırma biçimiyle dosya boyutunda yine de önemli bir azalma göreceksiniz, ancak görüntüde bozulmalar ve diğer sorunlar olmayacaktır.

Çoğu durumda, hangi formatı kullanacağınız konusundaki kararınız nihai hedefinize bağlı olacaktır: Küçük dosyalar mı istiyorsunuz yoksa kaliteyi korumaya mı odaklanıyorsunuz?

Kayıplı sıkıştırma, gereksiz gördüğü verileri görüntüden kalıcı olarak kaldırır. Bunu başarmak için birçok farklı teknik kullanır ve bu da çok daha küçük dosya boyutlarına neden olur.

Kayıpsız sıkıştırma da verileri kaldırır, ancak gerekirse orijinali geri yükleyebilir. Amaç kaliteyi yüksek tutmak, ancak dosya boyutunu küçültmek.

Bunu başarmanın birkaç yolu vardır, ancak sonuç genellikle aynıdır. İhtiyaçlarınız için doğru seçeneği bulmak için önce bir adım geriye gidelim ve genel olarak görüntü ve sıkıştırmanın temellerini gözden geçirelim.

Kayıplı ve kayıpsız sıkıştırma - hangisi resimleriniz için doğru? Tweetlemek için tıklayın

Dijital Görüntünün Unsurları

Yazılım ve web geliştirme gibi, genellikle kameradan web'e görüntü çekmek için bir "yığın" vardır.

Bir görüntü "ham" veri olarak başlar (dolayısıyla RAW adı verilir). Bu, bir uygulamanın koduna benzer: Parçacıklar, çizgiler ve değerler, renk, görüntü yer tutucuları, dinamik öğeler ve daha fazlasıyla arka plana çevrilir.

Bir görüntü için RAW dosyası, kamera üreticisine, düzenleme yazılımına, renk alanı algoritmasına ve daha fazlasına bağlı olarak biraz farklı bir görüntü temsili sunar. Oradan, görüntüyü düzenler ve birkaç dosya biçiminden biri olarak dışa aktarırsınız (daha sonra bunlar hakkında daha fazla bilgi verilecektir):

Capture One'da bir RAW dosyasını düzenlemeye bir örnek, gün batımında bir sahilde duran dalgaların karaya attığı odun bloğunun bir görüntüsüne açık.
Capture One'da bir RAW dosyasını düzenlemeye bir örnek.

Standart bir dijital görüntüyü oluşturan birkaç farklı unsur vardır:

  • Dosya türü: Farklı türler, nihai görüntünüze uyan veya uymayan nitelikler sağlayacaktır. Anahtar, uygulama için en uygun dosya türünü seçmektir.
  • Çözünürlük: Bunun genellikle megapiksel (MP) olarak ifade edildiğini göreceksiniz, ancak aynı zamanda inç başına piksel (PPI) veya inç başına nokta (DPI) kullanacaksınız. Daha yüksek çözünürlükler daha yüksek kalite sunar, ancak aynı zamanda ilk dosya boyutunu da artırır
  • Bit derinliği: Bu özellik, bir görüntüdeki renk bilgisini belirler. Düşük bit derinliği yalnızca birkaç renk oluştururken, yüksek bit derinliği aynı anda milyonlarca renk oluşturabilir. Genel olarak, daha yüksek daha iyidir.
  • Boyutlar: Bu, bir görüntünün kapladığı fiziksel alandır. Örneğin, 1.000 piksel x 500 piksel, bir görüntünün toplam boyutunu tanımlayabilir.
  • Renk uzayı: Bu, renklerin nasıl görüntüleneceğini belirleyen bir algoritmadır. Her renk alanı farklı şekilde kurulur ve genellikle fotoğrafçının tercihine bağlıdır.

Bu öğeler, değişen kalitede nihai bir görüntü sunmak için birleşir. Örneğin, büyük, yüksek çözünürlüklü, yüksek bit derinliğine sahip bir JPEG fotoğraf, üstün kalite ve netlik sunar:

Yüksek renk kontrastı ve nesne tanımı ile günbatımında bir sahilde duran iki dalgaların karaya attığı odun bloğunun önceki ekran görüntüsünde gösterilen görüntünün nihai ürününü gösteren yüksek kaliteli bir görüntü.
Yüksek kalitede bir görüntü.

Buna karşılık, büyük boyutlu ve çok sayıda renk gösterebilen bir görüntü bile düşük çözünürlükte kötü görünebilir:

Bir kumsalda dalgaların karaya attığı odunun aynı görüntüsünü gösteren, ancak daha düşük renk yoğunluğuna ve nesne tanımına sahip, düşük kaliteli bir görüntü.
Düşük kaliteli bir görüntü.

Bu denge, sıkıştırma uygulamadan önce çekirdek görüntüyü nasıl geliştirdiğinizdir. Ancak görüntü için kullandığınız formatın nihai kalitede büyük payı vardır.

Web Görüntü Optimizasyonu Nasıl Çalışır?

Görüntü sıkıştırma, başlık altında genel anlamda aynı olduğundan, web için görüntüleri optimize etme yönteminize standart kurallar uygulayabilirsiniz.

Bu kavramların birçoğunu Kinsta blogunun başka yerlerinde ele alıyoruz, ancak referans olması için kısa bir özet vermeye değer:

  • Web için standart olduğu için 72 PPI çözünürlüğü kullanın. Arşivleme nedenleriyle daha yüksek bir ÜFE/DPI kullanabilirsiniz, ancak web'de yayınladığınızı varsayıyoruz.
  • Görüntünün "uzun kenarını" 2048 piksele ayarlayın, çünkü bu birçok farklı uygulama için idealdir.
  • Seçeneği alırsanız 8 bit renk derinliği kullanın.
  • Yayınlamadan önce bir görüntüyü sıkıştırma ve optimizasyon aracıyla çalıştırın.

Sıkıştırma ve optimizasyon, bu makalenin geri kalanında genişleteceğimiz bir şey olsa da, size tutarlı sonuçlar verebilecek basit bir biçimdir.

Bu amaçla, kayıplı ve kayıpsız sıkıştırmanın yararlarına ve sakıncalarına bakalım.

Görüntü Sıkıştırma Web Resimlerinize Nasıl Yardımcı Olabilir?

Genel anlamda, “sıkıştırma” minimum ve maksimumu birbirine yaklaştırarak sıkıştırır. Örneğin, sıkıştırma, müzikte en düşük sesi yükseltir ve en yüksek sesi azaltır. Bu, ortalama seviyenin kulağa daha yüksek sesle gelmesini sağlar.

Görüntüler için sıkıştırma daha çok indirgeyici bir işlemdir. Bu, kaliteyi olabildiğince yüksek tutarken dosya boyutunu küçültmek için resminizden veri almaya daha fazla önem verildiği anlamına gelir.

Görüntü dosyası boyutlarını azaltmaya yardımcı olacak birçok farklı tescilli algoritma vardır. Çoğu durumda, bunlar belirli bir şirkete aittir. Her biri benzersiz tanımlayıcılara sahip birçok "kayıplı" ve "kayıpsız" sıkıştırma standardı bulacaksınız:

ShortPixel içindeki sıkıştırma seçenekleri, "Kayıplı", "Parlak" veya "Kayıpsız" sıkıştırma düzeyini seçme seçeneklerini gösterir.
ShortPixel içindeki sıkıştırma seçenekleri.

Tüm bunlar, belirli bir formata özel olmayan görüntü sıkıştırması uygulamanın pek çok faydası olduğunu söyledi:

  • Dosya boyutlarını düşük tutabilirsiniz, bu da sitenizin performansını artırır.
  • Ek olarak, sitenizin sunucusunun yapacak daha az işi olacak ve performansı etkileyecektir.
  • Küçük dosya boyutları, sunucu emisyonlarını azaltmaya yardımcı olur. Böylece sürdürülebilir ve etik bir geleceğe katkıda bulunmaya yardımcı olursunuz.
  • Seçtiğiniz algoritma ve sıkıştırma kalitesine bağlı olarak mükemmele yakın ve karşılaştırılabilir kalite görüntüleyebilirsiniz.

Paylaşılabilir bir görüntü oluşturmak gibi, çeşitli sıkıştırma değerleriyle oynamak, belirli bir şirket kullanmak ve doğru algoritmayı seçmek, sizin için işe yarayan sonuçları bulmak için çok önemlidir.

Kayıplı Sıkıştırmanın Artıları ve Eksileri

Kayıplı sıkıştırma, görüntünün dosya boyutunu neredeyse tüm diğer yönleri dışlayacak şekilde küçültür. Algoritmanın çalışma şekli, verileri kalıcı olarak kaldırmaktır. Bu göründüğü kadar yıkıcı olabilir.

Somunlara ve cıvatalara çok fazla girmeyecek olsak da, veri kayıplı sıkıştırmanın kaldırılmasının bir kısmının görüntüde göründüğünü biliyoruz. Buradaki fikir, orijinal, yüksek kaliteli görüntünün en iyi temsilini daha hafif bir ağırlıkta sunmaktır - bu, bazı verilerin kesinti yapmayacağı anlamına gelir.

Genel olarak, kayıplı sıkıştırma kullanmanın birkaç faydası vardır:

  • Dosya boyutları küçük olacaktır - bazı durumlarda 10 kilobaytın (KB) altındadır.
  • Artefaktlara rağmen birçok durumda kalite kaybı kabul edilebilir olacaktır.

Bu, bizi kayıplı sıkıştırma kullanmanın olumsuz yönlerine getirir - görüntü kalitesi herhangi bir sıkıştırma miktarıyla azalır:

Bir JPEG görüntüsü için bir sıkıştırma kaydırıcısı, küçültülmüş dosya boyutuyla (716 KB) birlikte "Format" "JPEG" olarak ayarlanmış ve "Kalite" çubuğu yaklaşık %70 olarak ayarlanmış bir "Dışa Aktar" iletişim kutusunu gösterir.
JPEG görüntüsü için bir sıkıştırma kaydırıcısı.

Renk tonlarının doğru şekilde oluşturulmadığı renk şeritlerini göreceksiniz ve bazı durumlarda kenar netliği kaybı görülebilir. Daha az renkli görüntüler bundan daha azını gösterecek, ancak netlikteki azalma yine de mevcut olacaktır.

Ayrıca görüntü bozulması, sıkıştırma işleminin kalıcı bir özelliğidir. Bu, etkileri daha sonraki bir tarihte tersine çevirmenin bir yolu olmadığı anlamına gelir.

Dezavantajlarına rağmen, kayıplı sıkıştırma web ve sitenizin performansı için mükemmeldir. Küçük dosya boyutları her zaman grenli görüntülerle sonuçlanmaz, ancak (elbette) işleri uç noktalara taşıyabilirsiniz:

Bantlanma, keskin olmayan öğeler ve bozulma gibi bariz aşırı sıkıştırma eserleriyle doldurulmuş bir kedi oyuncağının portresi.
Aşırı sıkıştırılmış bir görüntü örneği.

Ancak, kayıplı tek seçenek değildir. Kayıpsız sıkıştırma, kalite bilincine sahip site sahipleri için bir alternatiftir.

Kayıpsız Sıkıştırmanın Artıları ve Eksileri

Kayıpsız sıkıştırma, etikette yazanı yapar: Görünür kaliteyi etkilemeden bir görüntünün dosya boyutunu olabildiğince sıkıştırır. Bunu, gereksiz yer kaplayabilen görüntü meta verilerini kaldırarak yapar:

Bir ağacın dibinde çimenlerin üzerinde oturan kahverengi bir sincabın görüntüsünü kaplayan, fotoğraf ayrıntılarına sahip bir meta veri paneli.
Bir görüntünün meta verileri.

Kayıpsız sıkıştırma algoritması ayrıca yinelenen piksel dizilerini arar ve ardından bunları görüntülemek için bir kısayol kodlar. Örneğin, “Komut Satırı Arayüzü” alın. Kısaltmasını genellikle bir kez tanımlayacak, ardından ışık hızında referans vermek için “CLI” (veya seçtiğiniz kısaltmayı) kullanacaksınız.

Kayıpsız sıkıştırma aynı şekilde çalışır, çünkü daha az yıkıcıdır. Meta verileri kaldırmak geri döndürülemez olsa da, sıkıştırmanın bir kısmı, onu birçok kullanım için esnek bir algoritma haline getirecektir.

Kayıpsız sıkıştırma kullanmanın avantajları, kaliteyi korumakla ilgilidir:

  • Kayıpsız sıkıştırma, diğer tüm algoritmalara kıyasla bir görüntüdeki en yüksek kaliteyi korur.
  • Kayıpsız, arşivleme amaçları için harikadır. Örneğin, bir fotoğrafçı, depolama kaynaklarını en fazla veriyi koruyan bir görüntüyle dengeleyebilir.
  • Kayıpsız, görsel sanatlar için tercih edilen sıkıştırma algoritmasıdır: fotoğrafçılık, grafik tasarım, dijital sanat ve daha fazlası. Kayıpsız bir algoritmayı uygun derinlik ve çözünürlükle birleştirmek, neredeyse “bire bir” bir kopya elde edebilir.

Ancak kayıpsız sıkıştırmanın belirli nişlere ne kadar iyi hizmet ettiğine dair not edilmesi gereken bir şey var: Uygulama aralığı küçüktür. Bu, genel kullanılabilirliğini azaltır.

Tüm Kinsta barındırma planları, deneyimli WordPress geliştiricilerimiz ve mühendislerimizden 7/24 destek içerir. Fortune 500 müşterilerimizi destekleyen aynı ekiple sohbet edin. Planlarımıza göz atın!

Göz önünde bulundurulması gereken kayıpsız sıkıştırmanın diğer bazı dezavantajları:

  • Bir web sitesi çok sayıda resim kullanıyorsa, kayıpsız sıkıştırma bunları görüntülemek için ideal olmayabilir. Bunun nedeni, çoğu durumda bu tür durumlarda daha küçük dosya boyutlarına değer vermek istemenizdir.
  • Sıkıştırma dosya boyutlarını azaltsa da kayıpsız algoritmalar görüntü verilerini kayıplı kadar değiştirmez. Bu nedenle, aşırı zayıflama sonuçlarından ziyade boyutta yalnızca marjinal küçülmeler görebilirsiniz.

Ardından, bunu yapmanın en hızlı (ve potansiyel olarak en iyi) yoluna bakacağız.

Kayıplı ve Kayıpsız Arasında Nasıl Seçim Yapılır?

Bu noktada, kayıplı ve kayıpsız sıkıştırma arasındaki farkı anlıyorsunuz. Ancak, sitenizde kullanılacak en iyi algoritmanın hangisi olduğunu hala bilmiyor olabilirsiniz.

Dikkate alınması gereken iki durum vardır:

  1. Web'deki çoğu kullanım durumu için kayıplı sıkıştırmanın kullanılması kabul edilebilir.
  2. Fotoğraf veya fotoğraflanmış sanatı görüntülemek istiyorsanız, kayıpsız sıkıştırma size daha iyi hizmet edecektir.

Bu hususlar, JPEG, PNG veya GIF gibi standart web görüntü biçimlerinden birinin kullanılmasına dayanır. Ancak, sıkıştırma ihtiyaçlarınız HEIC ve WebP gibi daha modern biçimlerde farklılık gösterebilir.

Sitenizde fotoğraf göstermediğiniz sürece, kayıplı sıkıştırmanın varsayılan seçiminiz olması gerektiğini söyleyecek kadar ileri gideriz. WordPress varsayılan olarak görüntüleri sıkıştırır, bu da kayıplı sıkıştırmanın hemen hemen her uygulama için uygun olduğunu göstermek için çok ileri gider.

Resimlerinizi Optimize Etmek İçin Bir Çevrimiçi Sıkıştırma Hizmetini Kullanma

Resimlerinizi sitenizde göstermeden önce sıkıştırmanın birçok yolu vardır. Örneğin, düzenleme aşamasında sıkıştırma uygulamayı seçebilirsiniz. Bu, yine de RAW formatlarından dönüştürmenin bir yan ürünü olabilir.

Ancak, popüler bir seçim birçok çevrimiçi hizmetten biridir. Her biri bir dizi algoritma ve örnek bir kullanıcı arayüzü (UI) sunacak. Dahası, çoğu, en azından taahhütte bulunmadan önce uygulamayı denemek için bazı ücretsiz hizmetlere sahiptir.

Bunlar, bir uygulama programlama arayüzüne (API) bağlanan WordPress'e özgü eklentiler olsa da, görüntü optimizasyonu hakkındaki makalemizde birkaç seçeneği ele alıyoruz. İyi haber şu ki, bu eklentilerin birçoğu çevrimiçi bir arayüz de sağlıyor. Örneğin, ShortPixel'i düşünün:

"Çevrimiçi görüntü sıkıştırma ve optimizasyon: JPG, PNG ve GIF'i çevrimiçi sıkıştır" kelimelerinin üzerinde ShortPixel logosunu gösteren ShortPixel arayüzü.
ShortPixel arayüzü.

Burada, görüntüleri yükleyiciye sürükleyecek, ardından uygulamanın bunları sıkıştırıp işlemesini bekleyeceksiniz. Ancak süreç hemen başlayacağı için önce algoritmayı seçmek isteyeceksiniz.

Seçim basit: Kayıplı sıkıştırmanın iki biçimi (“Kayıplı” ve “Parlak”) ve kayıpsız bir seçenek. ShortPixel'in arayüzü, her algoritma arasındaki farkı açıklamak için iyi bir iş çıkarıyor ve görüntüleri saniyeler içinde indirebilirsiniz.

Her ikisi de taleplerinizi karşılayabilse de, Imagify arayüzü ShortPixel'inkinden daha kaygan ve daha profesyonel görünüyor. Burada ayrıca üç "sıkıştırma düzeyi" vardır - Normal, Agresif ve Ultra:

Sağda büyük bir "Yükle" kutusu ve solda "Sıkıştırma Düzeyi" ve yeniden boyutlandırma gibi diğer "Çıktı Seçenekleri" için seçimler dahil seçenekler gösteren Imagify arayüzü.
Imagify arayüzü.

Buradaki küçük fark, Imagify'ın kayıpsız sıkıştırma ile başlaması ve ağır artefaktlarla kayıplı bir algoritmaya doğru ilerlemesidir. Ancak, diğer çözümlerde bulamayacağınız birkaç seçenek daha var.

Yeni başlayanlar için, resminiz için EXIF ​​verilerini olduğu gibi tutabilir ve hatta dönüştürmeden sonra yeniden boyutlandırabilirsiniz. Bu, özellikle EXIF ​​verilerini kaldırabilecek veya bir görüntüyü nasıl yeniden boyutlandıracağınızı sınırlayabilecek bir sıkıştırma düzeyi uygulamak istiyorsanız, bazen çok değerlidir.

Efsanevi adaşı gibi, Kraken de resimlerinizi değiştirebilir ve çeşitli sıkıştırma türleri uygulayabilir. Çoğu kullanıcı Kayıplı veya Kayıpsız türleri seçer.

İkincisinde "Kayıplı" ve "Kayıpsız" seçenekleri içeren, bir resmi yüklemek için sıralı bir adım listesi gösteren Kraken arayüzü.
Kraken arayüzü.

Bununla birlikte, bir Uzman modu da vardır:

Resmi yeniden boyutlandırma, meta verilerini koruma ve yönünü değiştirme seçeneklerini gösteren "Uzman" sekmesi altındaki Kraken Uzman modu seçenekleri.
Kraken Expert modu seçenekleri.

Bu, diğer seçeneklerin yanı sıra sıkıştırmayı kendi ihtiyaçlarınıza göre ayarlamanıza olanak tanır. Örneğin, hem JPEG hem de PNG sıkıştırma düzeylerini ayarlayabilir, görüntüden meta verileri korumayı seçebilir ve hatta renkleri daha fazla değiştirmek için kroma alt örnekleme ile çalışabilirsiniz.

Özet

Görüntüler sitenizin basit bir yönü gibi görünebilir: Bir dosya alırsınız, WordPress'e yüklersiniz ve ardından görüntülemek için bir Görüntü Bloğu eklersiniz.

Ancak, web için bir görüntü hazırlama sürecinde sizin fark edebileceğinizden çok daha fazlası vardır. Seçtiğiniz sıkıştırma formatı dosya boyutunu, görüntü kalitesini ve daha fazlasını etkileyebilir.

Bu gönderi kayıplı ve kayıpsız sıkıştırmaya baktı ve hangisini seçmeniz gerektiğini özetledi. Kalite ve boyut arasında bir ipte yürümesine rağmen, kayıplı sıkıştırma, web'deki çoğu kullanım durumu için mükemmeldir. Fotoğrafçılar veya görüntülerin kalitesinde değişiklik yapmaktan endişe duyanlar, dosya boyutuyla ilgili daha az fayda olmasına rağmen kayıpsız sıkıştırma kullanmak isteyeceklerdir.

Kayıplı ve kayıpsız sıkıştırma arasındaki savaşta hangi taraftasınız? Aşağıdaki yorumlar bölümünde düşüncelerinizi bize bildirin!