Bir web sitesinin görsel dosyalarını sıkıştırmak, o sitenin kullanıcılar için daha hızlı yüklenmesini sağlamanın en hızlı ve en kolay yollarından biridir. SEO (arama motoru optimizasyonu) için site hızının önemi çok fazladır. Sıkıştırma işlemini her zamankinden daha etkili ve erişilebilir hale getirebilecek yeni bir aracı keşfedelim: Squoosh.app . Daha fazlasını öğrenmek ister misiniz?
Squoosh nedir?
“Squoosh, çeşitli görüntü sıkıştırma yöntemleri ile gelişmiş seçeneklere ulaşmanızı sağlayan bir görüntü sıkıştırma web uygulamasıdır.”
Squoosh görüntü sıkıştırma özelliklerinin kullanılması web sitenize çok büyük fayda sağlar. Çeşitli görüntü işleme ayarları ile internet tarayıcı pencerenizde çalışan ve farklı sıkıştırma eylemlerinin etkilerini gerçek zamanlı olarak ön izlemenize olanak tanıyan, gelişmiş, kullanımı kolay bir standart sunar. Tarayıcınıza web adresini yazarak ( https://squoosh.app ) büyük web tarayıcılarından herhangi birinde Squoosh’u kullanabilirsiniz.
Squoosh, GitHub’daki GoogleChromeLabs ekibi tarafından yürütülen açık kaynaklı bir geliştirme projesidir.
Görüntü dosyalarınızı sıkıştırmak için Squoosh nasıl kullanılır?
Görüntü dosyalarını Squoosh’ta sıkıştırmak son derece hızlı ve kolay ya da son derece kapsamlı ve hassas olabilir. Bu işlem, Squoosh ayarlarıyla ne kadar zaman harcayacağınıza bağlıdır. Squoosh web sayfasını kullanırken şu yolu izlemelisiniz:
Görüntü dosyalarını sürükleyip bırakın veya bilgisayarınızdan bir görüntü seçmenizi sağlayan bağlantıya tıklayın. Bir görüntü dosyası seçin ve tercih ettiğiniz iki yöntemden birini kullanarak yükleyin.
Ekranın ortasında sola ve sağa sürüklenebilen bir kaydırıcı vardır. Bu, görüntünün sıkıştırmadan önce ve sonra nasıl göründüğünü karşılaştırmak içindir. Yani, onu tamamen sola sürükleyecek olsaydık, resmin tamamının sıkıştırmadan sonra nasıl görüneceğini görürdük; ve tam olarak sağa sürükleseydik orijinal görüntüyü görürdük.
Kaydırıcının solunda ve sağında gösterilen görünüm, sıkıştırma ayarları sol alt ve sağ altta ayarlanarak gerçek zamanlı olarak değiştirilebilir. Ayrıca soldaki orijinal görüntü görünümünü başka bir sıkıştırma türüyle değiştirebiliriz, bu da hangi ayarların kullanılacağına karar vermede çok yardımcı olur. Görüntünün renk paletini 256’dan 2’ye düşürmek için sağ taraftaki sıkıştırma ayarlarını kullanabiliriz:
Ve soldaki orijinal görüntüyü maksimuma sıkıştırmak için başka bir sıkıştırma seti ile değiştirdiğimizde şunlar olur:
Bu görsel web sitemizde kullanılacaksa, daha düşük sıkıştırma ayarları kullanmanız gerektiğini unutmayın. Resimlerimiz arasındaki farkları belirginleştirmek ve birden fazla ayar ve ön izleme ile nasıl oynayabileceğinizi göstermek için burada yüksek çözünürlüklü örnekler kullanıyoruz.
Bu ekran görüntülerinin alt köşelerine doğru, Squoosh’un seçtiğiniz ayarlara bağlı olarak sıkıştırılmış görüntü dosyanızın ne kadar büyük olacağını, gerçek zamanlı olarak ölçtüğünü fark etmiş olmalısınız. Sadece bu değil, aynı zamanda görüntü değişkenleriniz arasındaki % boyut farkını da gösterir.
Sıkıştırma ayarlarını değiştirirken bu istatistiklere dikkat edin, çünkü bu, resmin kendisi üzerinde çok fazla olumsuz etkiye neden olmadan görüntü dosya boyutunuzu mümkün olduğunca küçültmenize yardımcı olacaktır. Farkı yakından görmek için görüntüyü istediğiniz zaman yakınlaştırabilirsiniz. Birkaç basit ince ayar yaparak test imajımızı 2.79 MB’dan 134 kB’ye (%95’lik bir düşüş) indirdik:
Evet, keskinlikte bir fark var, büyük ölçüde sıkıştırılmış olmasına rağmen, görüntü kalitesi hala kullanılabilir.
Görselin izin verdiği kadar kalitesinden memnun olduktan sonra, ekranın ilgili alt köşesindeki indirme simgesini tıklayın.
Squoosh’un sıkıştırma ayarlarını keşfetme
Görüntü kalitesinin dosya boyutuna mümkün olan en iyi oranını elde etmek için, Squoosh’un birkaç gelişmiş ayarına bakmanızı öneririz.
Her şeyden önce, söz konusu görüntü için en iyi sıkıştırma türünü seçtiniz mi? Bu üç seçeneği çok faydalı buluyoruz.
- OptiPNG – PNG, BMP GIF, PNM ve TIFF’yi optimize edilmiş PNG’ye dönüştürür.
- MozJPEG – JPG, TARGA, BMP ve PPM’yi optimize edilmiş JPEG’e dönüştürür.
- WebP – bir görüntüyü oluşturmak için gereken kod miktarını azaltarak tahmini kodlama kullanan yeni nesil bir görüntü biçimi olan optimize edilmiş WebP’ye dönüştürür. PageSpeed Insights üzerinden web sitenizi kontrol ederseniz “Resimleri yeni nesil biçimlerde yayınlayın” uyarısını göreceksiniz. (Bu makalenin sonunda bu resim biçimi hakkında söyleyecek daha çok şeyimiz var, çünkü biraz özel bir durum!)
Her sıkıştırma türü ve görüntü biçiminin, görüntüden görüntüye farklı şekilde oynatılacak güçlü ve zayıf yönleri vardır. Sahip olduğunuz resim türü, çevrimiçi olarak bu resim için en iyi biçimi belirleyecektir. Grafik ve çizgi resim tipi çizimler genellikle PNG veya GIF formatları kullanılarak en iyi şekilde sıkıştırılır ve fotoğrafların aksine, görüntüyü kabul edilebilir bir şekilde oluşturmak için binlerce renge ihtiyaç duymadıkları için renk sayısını azaltmaya daha iyi yanıt verir. Yüksek çözünürlüklü fotoğraf görüntüleri en iyi şekilde Moz JPEG sıkıştırma biçimi kullanılarak sıkıştırılır ve sıkıştırma kaydırıcısı kullanılarak ayarlanır.
Ayarlamaya değer diğer Squoosh ayarları şunlar:
- Paleti azalt – resminiz daha az renkle yapabilir mi? Genellikle bu, iyi görüntülenmesi için binlerce renk gerektirmeyen bir grafik veya illüstrasyonda kolay bir kazançtır. Fotoğrafik görüntülerdeki renk paletini azaltmak çok az fark yaratır, bu yüzden bunu sadece birkaç renk kullanan resimler için kaydetmeye çalışın.
- Yeniden boyutlandır – Fiziksel boyutlarını azaltarak görüntünüzü ve dosyanızı önemli ölçüde küçültün. Görüntü boyutları gözle görülür şekilde küçülür, ancak KB veya MB cinsinden kapladığı dijital depolama alanı da küçülür. Resimlerinizi çevrimiçi kullanacağınız boyutlara göre yeniden boyutlandırmayı deneyin. Sitenizdeki görüntünüz için yalnızca 1800 piksel genişlik görüntüleniyorsa 3000 piksel genişliğinde bir resme ihtiyacınız yoktur. Sığdırmak için kırpın. (Lütfen dikkat: bazı web siteleri ayarında yüksek çözünürlüklü bir resim yüklersiniz ve sizin için yeniden boyutlandırmayı yapar, bu yüzden nasıl çalıştığınızdan emin değilseniz, web geliştiricinizle konuşun ve değişiklik yapmaya başlamadan önce öğrenin!)
- Kalite – veri kesmenin en basit yolu. Göz bölgeleri, dişler ve parmaklar gibi ince ayrıntılara sahip alanlara yakından bakın, çünkü bunlar genellikle ilk önce aşırı sıkıştırma bozulmasının belirtilerini gösterecek yerlerdir. Çoğu fotoğraf görüntüsünün % 80 sıkıştırmada harika çalıştığını gördük, ancak bazı görüntüler çok daha düşük olabilir. Test edin ve nelerin işe yaradığını bulun.
Görüntü dosyalarını sıkıştırmanın amacı nedir?
Herkes hızlı bir şekilde açılan web sitelerini ziyaret etmeyi sever – ama ne yazık ki bu her zaman elde ettiğimiz deneyim değildir.
İnternet bağlantınızın iyi olduğunu varsayarsak, bir web sitesinin yavaş yüklenmesinin en olası nedeni, sitenin cihazınızın hızlı bir şekilde işleyebileceğinden daha fazla veriden oluşmasıdır. Bu veriler, kopya, JavaScript ve evet resimler dahil olmak üzere web sitesini oluşturan her şeyi içerir.
Bugün web sitelerinin içerik ve işlevsellik bakımından zengin olma eğilimi var, ancak bu hem veri kullanımı hem de kötü oluşu, yükleme hızı açısından bir maliyete sahiptir. Speedcurve.com’a göre ortalama Web sayfası dosya boyutları, 2011’e göre ortalama toplam sayfa boyutu tahmini olarak 2019 yılına kadar 2011 yılında % 16 oranında artmaktadır. Kullanıcı deneyiminde yalnızca sayfa boyutundan çok daha fazla olmasına rağmen, sayfanızın indirmesi gereken veri miktarı ne kadar büyük olursa, daha yavaş mobil ağ veri bağlantıları kullanan bir mobil cihazda o kadar yavaş olacaktır. Bu nedenle, sitelerinizin en büyük kitlesi olma olasılığı yüksek mobil kullanıcılar için daha iyi performans sunmak üzere sayfa boyutu büyüme trendinin kaldırılmasını öneriyoruz.
Çoğu yavaş yüklenen sitede, ağır görüntüler veri fazlasının büyük bir kısmını oluşturur. Görüntü sıkıştırma bu noktada yardımcı olabilir.
Bir görüntü dosyasındaki veri miktarını azaltarak, sıkıştırılmış bir web sayfasını oluşturmak için gereken veri miktarını azaltabilir. Bu, daha küçük web sayfaları, daha yüksek yükleme hızları, daha mutlu ziyaretçiler ve arama sonuçlarında daha iyi görünürlük sağlar (Google’ın sayfa hızını arama sıralamalarına nasıl kattığı hakkında bilgi edinin).
Kinsta tarafından yapılan araştırma, insanların % 74’ünün 5 saniye içinde yüklenmezse bir web sitesinden ayrılacağını gösteriyor. Resim dosyalarınızı sıkıştırmak, sitenizin böyle bir duruma yakın bir yere ulaşmasını önlemenin en kesin ve basit yollarından biridir.
Squoosh’un önemli artıları ve eksileri
Squoosh hiçbir şekilde mevcut olan tek ücretsiz görüntü sıkıştırıcı değildir, ancak deneyimlerimize dayanarak, en iyilerinden biridir. İşte bu konuda en sevdiğimiz şeyler:
- Kullanıcı arayüzü. Ön izleme kaydırıcısını kullanarak farklı sıkıştırma türlerini yan yana karşılaştırmak, düşük dosya boyutu ile yeterli görüntü kalitesi arasındaki noktayı bulmanıza yardımcı olur.
- Gizliliğe saygı duyar. Sunucuya geri gönderilen tek veri, sıkıştırmadan önceki ve sonraki temel ziyaret verileri ve görüntü dosyası boyutlarıdır. Kapalı kaynaklı bir uygulamadan bahsediyorsak, kullanımdan sonra görüntülere ve verilere ne olduğunu söylemek daha zor olurdu.
- İnce ayarların etkisini gerçek zamanlı olarak görme. Bir düzenleyicinin orijinal boyuta karşı düzenlenmiş boyuta ve yüzdelik bir sıkıştırma ölçüsüne sahip olması son derece kullanışlıdır.
- Kaybedecek hiçbir şeyin yok! Squoosh tamamen ücretsizdir, o zaman neden denemiyorsunuz?
Anlayabileceğiniz gibi, biz Squoosh’un büyük hayranlarıyız. Ancak, büyük bir dezavantajı vardır, çünkü bir seferde sadece bir görüntü işleyebilir.
Squoosh aracılığıyla görüntüleri tek tek işlemek, sitelerine mütevazı bir hızda görüntü ekleyen web yöneticileri için yönetilebilir – ancak büyük e-ticaret siteleri gibi günlük olarak çok sayıda resim yüklemesi gerekenler için çok kullanışlı değildir.
Google neden Squoosh’u ücretsiz, açık kaynaklı bir proje olarak geliştirdi?
Google’ın web sitelerinin hızlı yüklenmesini sevdiği bir sır değil. Aslında, site hızı (bir web sitesinin sayfalarının bir örneğinden alınan ortalama yükleme hızı), bir web sitesinin Google arama sonuçlarında ne kadar görünürlük alacağını belirleyicidir.
Dizine eklenmiş siteler temel olarak Google’ın ortalama web kullanıcısı perspektifinden gelen ürünüdür – bu nedenle elbette sundukları içeriğin mümkün olduğunca iyi çalışmasını isteyeceklerdir.
Squoosh, web yöneticilerinin sitelerinin kendileri, ziyaretçileri ve elbette Google için harika bir deneyim sunmasını sağlamanın yeni bir yoludur.
Kayıplı ve Kayıpsız sıkıştırmayı anlama
Bu noktada, dosya sıkıştırmaya yönelik iki farklı yaklaşımı keşfetmemize değer. Kayıplı ve Kayıpsız sıkıştırma. Farklı dosya biçimleri, görüntü boyutlarınızı azaltmaya yönelik biraz farklı yaklaşımlardan yararlanır.
Kayıplı sıkıştırma, web tabanlı görüntü formatlarının çoğunun birlikte çalıştığı formattır. Dosya boyutu küçültülür ve dosyadaki insan gözü tarafından gözle görülmesi gerekmeyen ek bilgiler kaldırılarak görüntü sıkıştırılır. Bu, görüntüde görüntülenen renklerin sayısı ile ilgili bilgi olabilir veya görüntüdeki benzer şekilde gölgeli alanlara uygulanabilir. Bir bavul benzetmesi yaparsak, birkaç küçük ve gereksiz eşyayı çıkartırsak daha fazla alan kazanırsınız. Belki de gezinizin her günü için tamamen ayrı kıyafetler yerine, yeni görünümler oluşturmak için birbirleriyle değiştirilebilecek birkaç kıyafet tercih etmek. Kayıplı formatta sıkıştırılmış bir görüntü aşırı sıkıştırıldığında, görüntüdeki ayrıntılar parçalanmaya ve biraz dağınık görünmeye başladığında elbette bu bilgilerin kaybını fark edeceksiniz. Jpeg ve GIF resim dosyası biçimlerinin her ikisi de kayıp görüntü biçimlerine örnektir.
Kayıpsız görüntü sıkıştırma, dosya boyutunu görüntülemek için gereken bilgilerin nasıl düzenlendiğine daha fazla odaklanarak, daha az yer kaplaması için dosya boyutunu akıllı yollarla azaltır. Kayıpsız bir sıkıştırma biçiminde, görüntüyle ilgili tüm orijinal bilgiler dosya içinde tutulur, ancak daha verimli bir şekilde saklanır, bu nedenle fazla yer kaplamaz.
Kayıpsız görüntü sıkıştırma nasıl çalışır?
Görüntüler çok miktarda veri kaplar. Kullanılan renk grafiğinin türüne bağlı olarak, bir görüntü dosyasının her bir pikselin rengini tanımlamak için 24 bit kullanması normaldir. Bunu, çalışma ortamı görüntü boyutu (örneğin, 900 x 900) ile çarpın, elimizde ağır bir dosya olacağı kesin.
Görüntü kompresörleri, bir görüntünün daha az bilgi ile temsil edilebilecek yönlerini belirleyerek bundan yararlanır. Örneğin, aynı renk bir görüntünün piksellerinin çoğunda tekrarlanırsa, bir sıkıştırma uygulaması bu rengi temsil etmek için kullanılan 8 bitlik kodu daha kısa bir ikili kodla değiştirebilir.
Bu, görüntüleri sıkıştırmanın mükemmel bir yolu gibi görünse de, önemli bir dezavantajı vardır. Çoğu durumda, üretilen görüntü dosyaları hala Jpeg veya GIF gibi kayıplı bir formatta eşdeğerlerinden çok daha büyük olacaktır. Çok daha fazla alana sahip olursunuz ancak sonuçta istediğiniz her şeyi yanınıza alabilirsiniz. PNG, TIFF ve RAW görüntü formatları kayıpsız görüntü dosyası formatlarına örnektir.
WebP- neredeyse mükemmel melez
WebP, online ortamdaki görüntüler için Google tarafından geliştirilen yeni bir görüntü sıkıştırma dosya biçimidir. WebP ile ilgili özel olan şey, daha önce gelen görüntü dosyası formatlarının aksine, hem kayıplı hem de kayıpsız görüntü sıkıştırmayı kullanabilmesidir. Sonuç olarak, genellikle daha küçük dosya boyutları bile üretebilir. Google, ‘WebP kayıpsız resimlerin PNG’lere kıyasla boyut olarak % 26 daha küçük olduğunu belirtiyor. WebP kayıplı görüntüler, eşdeğer SSIM kalite dizinindeki karşılaştırılabilir JPEG görüntülerden % 25-34 daha küçüktür. ‘ Google Developers, 2018. WebP, Jpeg biçiminin aksine, daha yaratıcı web sitesi düzenlerinden yararlanmak için mükemmel olan bir resimdeki saydamlığı ve animasyonları da destekler.
Hız açısından harika bir format için küçük bir aksaklık… Tüm büyük tarayıcılar henüz bu dosya formatını desteklemiyor. Mevcut web tarayıcıların şuan % 70’inin bu yeni dosya biçimini destekleme planları var.
Ekim 2018’de Microsoft Edge dosya biçimini desteklemeye başladı ve Mozilla, Firefox’ta dosya biçimi için destek verme üzerinde çalıştıklarını açıkladı. Bu formatı kullanmak için HTML’nizin güvenli bir PNG veya JPEG şeklinde ayarlanması gerekir; böylece eski tarayıcılarda veya henüz bu yeni dosya standardını desteklemeyen tarayıcılarda sorunsuz görüntülenebilir.
Bilgisayar bilimci Guillermo Sapiro, bu video eğitim serisinde görüntü işlemenin arkasındaki teoriyi büyüleyici ayrıntılarıyla açıklıyor. Şimdi görsellerimizi Squoohs ile optimize etmeye başlayabiliriz.