Bugün çok sevdiğim ve çok sevdiğim bir konu hakkında konuşacağız: görüntü sıkıştırma! Şaka yapıyorum ama kaliteyi düşürmeden bir görüntü dosyası boyutundan büyük yüzdeler kesmenin garip bir şekilde tatmin edici bir yanı var.

Bu gönderinin ilham kaynağı Beaver Builders Facebook grubundaki çok popüler bir gönderiden geldi. ImageOptim'de Google'ın yeni Guetzli algoritmasının etkinleştirilmesi ve kullanılmasıyla ilgili bir video eğitimi çekmiştim ve daha önce aşina olmadığım tüm diğer seçenekler karşısında şok oldum. Bu makalede, web için görselleri sıkıştırmaya yönelik bazı ipuçları ve araçlardan bahsedeceğiz.

Başlangıç ​​Terminolojisi

Daha derine inmeden önce ortak bir terminoloji oluşturalım.

JPEG, PNG, SVG – Bunlar webdeki en popüler üç resim dosyası türüdür. Bu eğitimde, sıkıştırma ve optimizasyondan en çok yararlandıkları için esas olarak JPEG ve PNG'lere odaklanacağız.

JPEG'ler genellikle fotoğraflar ve web grafikleri gibi şeffaflığı olmayan yüksek kaliteli görüntüler için daha iyidir.

PNG'ler simgeler ve logolar gibi şeyler veya şeffaflık gerektiren herhangi bir şey için mükemmeldir. PNG'ler, Photoshop'tan veya seçtiğiniz grafik düzenleme aracından çıktıktan sonra da önemli ölçüde optimize edilebilir.

Kayıpsız ve Kayıplı – Bunlar sıkıştırma yöntemleridir. Kayıpsız sıkıştırma, görüntünüzün kalitesini kaybetmeyeceği anlamına gelir. Kelimenin tam anlamıyla hiçbiri. Bu, meta verilerin görüntüden veya kaliteyi etkilemeyen herhangi bir şeyden çıkarılmasını içerir.

Kayıplı, sıkıştırma algoritmasının görüntünüzün kalitesini düşüreceği anlamına gelir. Daha iyi sıkıştırma sonuçları elde edersiniz ancak görüntü kalitesinden ödün vermiş olursunuz. Kayıplı sıkıştırma araçlarının çoğu, dosya boyutu yerine kalite dengesini seçebilmeniz için bir yüzde kaydırıcısı sağlar.

İpucu: Büyük resimli arka planlar için, genellikle resmi biraz bulanıklaştıracağım veya fotoğrafın üzerine opak bir renk katmanı ekleyeceğim. Ayrıntıyı azaltmak ve/veya rengi normalleştirmek, dosya boyutunu önemli ölçüde azaltan hoş bir estetik stil seçimidir. Bunu işler sayfamızda çalışırken görebilirsiniz.

Görselleri Ne Kadar Sıkıştırmalıyım?

Görüntü sıkıştırmanın amacı, kaliteden çok fazla ödün vermeden dosya boyutunu mümkün olduğunca küçültmektir. Bu bir bilimden çok bir sanattır ve “kabul edilebilir kalite” düzeyi duruma göre değişecektir.

Bir fotoğraf stüdyosu muhtemelen çalışmalarını en yüksek kalitede öne çıkarmak isteyecekken, bir emlak web sitesi sayfada daha fazla görsel gösterme karşılığında kaliteden ödün vermeye istekli olabilir.

Çoğu görüntü düzenleme yazılımı, görüntüleri değişen kalitede dışa aktarmanıza olanak tanır. Bununla birlikte, özel bir görüntü sıkıştırma aracı kullanıyorsanız, bazen bu yazılımı mümkün olan en iyi kaliteyle beslemek ve sıkıştırma algoritmalarının oradan çalışmasına izin vermek en iyisidir.

Görüntü Sıkıştırma Aracı Seçenekleri

Yakın zamanda keşfettiğim gibi, görüntü sıkıştırmaya yönelik araçlar ve hizmetler söz konusu olduğunda seçenek sıkıntısı yaşanmıyor.

ImageOptim

ImageOptim ile başladım ve hala tercih ediyorum. ImageOptim yalnızca OSX'te mevcuttur ancak hem JPEG hem de PNG dosyaları için kayıplı ve kayıpsız sıkıştırmayı destekler. Ayrıca Google'ın nispeten yeni sıkıştırma algoritması Guetzli'yi kullanacak şekilde de yapılandırılabilir. Guetzli ortalama olarak dosya boyutlarını diğer algoritmalara göre %20-30 daha fazla küçültebilmektedir.

ImageOptim, Mac'inizin Dock'unda yaşayan bir programdır ve görüntüleri program simgesinin üzerine sürükleyip bırakabilirsiniz; program onları sıkıştıracaktır. Aynı anda bir veya iki görüntüyü optimize etme eğilimindeyim, bu nedenle bu çözüm benim için harika çalışıyor. Ancak çok sayıda görsel veya büyük dosya boyutlarına sahip görseller üzerinde çalışıyorsanız, diğer seçeneklerden bazıları büyük işler için daha iyi bir seçim olabilir.

WPMU Dev'den Smush

Smush, WPMU Dev'in ücretsiz bir WordPress eklentisidir ve WordPress kurulumunuzdaki ve/veya WordPress'e yüklerken mevcut görselleri optimize edecek şekilde yapılandırılabilir. Smush harika çünkü ağır işler WPMU Dev'in sunucuları tarafından yapılıyor ve görüntüleri hem optimize ediyor hem de yeniden boyutlandırıyorlar.

Müşteriler için web siteleri oluşturuyorsanız (özellikle dijital kameralarından çoklu megabaytlık görüntüler yüklemeyi sevenler için) Smush, ayarlamak ve unutmak için harika bir seçenektir.

TinyPNG

TinyPNG web tabanlı bir görüntü sıkıştırıcıdır. Resimlerinizi (5bm'ye kadar) yükleyebilir ve sıkıştırılmış versiyonunu indirebilirsiniz. Bu, bant genişliğini tüketeceğinden, yavaş veya ücretli bir internet bağlantısına sahipseniz en iyi seçenek olmayabilir. JPEG ve PNG dosya türlerini destekler. Ücretsizdir. Sıkıştırmanın kalite düzeyi üzerinde herhangi bir kontrol sunmuyor gibi görünüyor.

TinyPNG ile oynadıktan sonra hala ImageOptim'i tercih ettiğimi düşünüyorum, ancak Windows kullanıcıları, hızlı tek seferlik işler veya özellikle web tabanlı bir kompresör arayan kullanıcılar için harika bir seçenek olacaktır. Veya işlemeyi yerel makinenize değil buluta aktarmaya çalışıyorsanız.

Hayal et

Imagify, görselleri yüklerken veya doğrudan WordPress yönetici alanından optimize etmek ve yeniden boyutlandırmak için özel bir WordPress eklentisi sağlayan başka bir web tabanlı SASS seçeneğidir. Imagify WordPress eklentisi, etkileyici bir 4,5 yıldızlı ortalama incelemeye sahiptir ve birçok inceleme, Imagify ile elde edilen görüntü kalitesinin alternatiflerden daha iyi olduğunu belirtmektedir.

Imagify'ın 2 MB'ın altındaki görselleri yüklemenize ve optimize etmenize olanak tanıyan ücretsiz bir planı vardır. Görsellerin optimize edilmiş versiyonu 24 saat boyunca sunucularından indirilmeye hazır kalacaktır.

JPEGMini

JPEGMini, güçlü bir çözüm arayan kişilere hitap edecek bir SASS hizmetidir. Bir e-Ticaret mağazası için on binlerce yüksek çözünürlüklü ürün görselini optimize etmekle görevlendirildiğinizi hayal edin. JPEGMini, tüm bu işlemleri muhtemelen hızlı ve optimize edilmiş bulut sunucularına aktarmanıza olanak tanır.

Kısa Piksel

ShortPixel başka bir web tabanlı SASS'tır. Görüntü sıkıştırmayı bir bulut sunucusuna aktarmak istiyorsanız, bu harika bir seçenektir. Ücretsiz planları ayda 100'e kadar görüntüyü optimize etmenize olanak tanır ve daha fazlası için ayda 5 ABD dolarından başlayan premium planları vardır. ShortPixel'in ayrıca bir WordPress eklentisi var ve BB ekibinin geri kalanı arasında favoriler arasında yer alıyor.

Hayal et

En sevdiğin şey ne?

Bu yazıya ilham veren orijinal Facebook konusunu ziyaret ederseniz, çeşitli nedenlerden dolayı diğer seçenekleri ve birini veya diğerini tercih eden kişileri göreceksiniz. En sevdiğinizi özlüyor muyuz? Ne olduğunu ve neden beğendiğinizi yorumlarda bize bildirin.

Ayrıca, performans sergileyen, uyuyan ve nefes alan biriyseniz, Jon Brown ile modern performansın en iyi uygulamaları hakkındaki bu röportaj muhtemelen ilginizi çekecektir.