Görseller Nasıl Sıkıştırılır? Web Sitenizin Hızını Artırın!

Herkese merhabalar. Bugün sizlere web siteleri için oldukça önemli bir konu olan görselleri sıkıştırma hakkında yazacağım.

Bu yazıda yer alan konular:

Web Sitelerinde Kullanılan Görseller Hakkında

Görseller Nasıl Sıkıştırılır?

Görselleri Sıkıştırmanın Bize Kazandırdıkları

Tercih Edilen Görsel Sıkıştırma Araçları

Web Sitelerinde Kullanılan Görseller Hakkında

Web sitelerinin birçoğu (hemen hemen hepsi) görsel kullanır. Görseller sayesinde web sitesi amacını görsel olarak belli etmiş olur. Örneğin logolar, bannerlar vb. web siteleri için vazgeçilmezdir.

Özellikle blog siteleri için görseller hiç kendini eksik etmez. Bloglar hemen hemen her içeriğinde görseller kullanmak durumunda kalır. Bu görseller sayesinde hem yazıları daha kaliteli bir hal alır hem de görsel olarak da bilgi verir.

Peki ya bu görsellerin zararlı bir yanı var mıdır? Evet, vardır. Görseller bir web sitesinin kullandığı depolama alanının yaklaşık %60'ını oluşturabilmektedir. Hele hele bu depo kullanımı blog sitelerinde oldukça artabilmektedir.

Blog görselleri her ne kadar yararlı olsa da işte bu şekilde depoyu çok fazla kullanabilmektedir. Ayrıca bu görseller site açılış hızını oldukça fazla yavaşlatmaktadır. Bu durum yüzünden site SEO açısından zarar görmektedir.

Peki ya biz bu görsellerin hem daha az alan harcamasını hem de daha hızlı yüklenmesini nasıl sağlarız? İşte şimdi bundan bahsedeceğim.

Görseller Nasıl Sıkıştırılır?

Görselleri neden sıkıştırmamız gerektiğini, bunun önemini anlattım. O halde şimdi bu görselleri nasıl optimize edeceğimize bir göz atalım.

Görselleri sıkıştırmak için birkaç yol vardır. Bu yollardan en çok kullanılanları ise resmin boyutlarını küçültmek ve görseli sıkıştırmaktır. Resmin boyutunu düşürmek oldukça basit. Paint ile bile boyutu küçültebilirsiniz. Ancak şu da var ki küçük resim çok daha kalitesizdir.

Bu nedenle bizim yapacağımız işlem görseli sıkıştırmak olacak. Görseli sıkıştırarak görselin kalitesi bir tık düşer ancak bu çok sorun edilemeyecek bir düşmedir. Hatta resmin formatına göre neredeyse hiç kalite bozulması yaşanmaz.

Şimdi sizlere birkaç örnek üzerinden görsel sıkıştırmayı göstereyim. Bu örnekler PNG ve JPG formatı üzerinden olacaktır.

1. PNG Formatında Görseli Sıkıştırmak

PNG görsellerini sıkıştırmak oldukça avantajlı bir durumdur. Çünkü PNG formatında kayıpsız bir sıkıştırma yapılabilmektedir. Hemen bir örnekle göstereyim.

Bu sıkıştırılmamış bir PNG görseli. Peki ya sizce bunun harcadığı boyut ne kadar? Tam 565 KB bir boyuta sahip! Bu bir site görseli için oldukça fazla bir alan.

Şimdi ise bir tane görsel sıkıştırıcı aleti kullanacağız. Bu bir program veya bir site olabilir. Size önerim compressor.io sitesidir. Oldukça kaliteli bir sitedir.

Bu siteye geliyoruz ve görselimizi dosya kısmına sürüklüyoruz. Ve otomatik olarak görseli sıkıştırıyor. Peki ya sonuç nedir? İşte bu:

Gördüğünüz gibi 565 KB boyut bir anda 123 KB boyutuna kadar inmiş durumda. Yani %78'lik bir sıkıştırma söz konusu. Bu oldukça iyi. Peki ya görselimiz sıkıştırıldıktan sonra nasıl gözüküyor? Bir de ona bakalım:

İşte, arada çok az bir fark var. Hatta dikkatli bakılmayınca aradaki fark anlaşılmayacak derecede. PNG formatındaki görselleri sıkıştırmak böyle bir avantaja sahip.

Not: Bu görsel normalde çok büyük boyuta sahip. Normalde 123 KB bile fazladır. Ancak güzel bir örnek vermek amacı ile bu görseli seçtim. Ayrıca normalde %30 - %40 civarında sıkıştırılma sağlanır.

2. JPG Formatında Görseli Sıkıştırmak

JPG formatında olan görseller PNG formatına göre daha iyi sıkıştırılabilmektedir. PNG ile JPG arasındaki en büyük fark JPG'nin daha iyi sıkıştırma sağlayarak görselleri oldukça az bir boyutta tutmasıdır.

Ancak yine de JPG formatında resimler büyük alan kaplayabilmektedir. Bu nedenle JPG görsellerini optimize etmek görsellerin boyutunu düşürecektir. Bunu bir örnekle göstereyim.

Örneğin bu JPG formatında ki görsel yaklaşık 90 KB boyutundadır. Bu PNG'ye göre az gözükse de bir web sitesi için biraz büyük olabilmektedir. Şimdi bunu yine compressor.io ile sıkıştıralım.

Görseli dosya kısmına sürüklüyoruz veya görseli seçiyoruz. Sonra görsel sıkıştırılıyor ve sonuç aşağıdaki gibi:

Gördüğünüz gibi bu görselin boyutu 47 KB'ye düştü. Bu yaklaşık %50 sıkıştırma demek. Bu oldukça iyi. Ama bu sıkıştırma sonucunda görselde değişiklikler olur. Bir de bu görselin sıkıştırılmış haline bakalım:

Evet göründüğü üzere belli bir bozulma hissi veriyor. Ancak yine de görsel iyi bir durumda ve en iyisi artık daha hızlı yükleniyor ve daha az alan kaplıyor. JPG sıkıştırma da böyle birşey.

Görselleri Sıkıştırmanın Bize Kazandırdıkları

Evet, görselleri sıkıştırdık. Peki ya bu bize ne gibi kazançlar sağladı. Bu görselleri sıkıştırmanın bize kazandırdıklarına bir göz atalım.

1. Görseller daha az alan kapladı. Bu sayede özellikle çok az alana sahip hostinglerde alanı idareli kullanabildik.
2. Görsellerin boyutunun azalması ile görsellerin kullanıldığı sayfalar daha hızlı bir hale geldi. Bu sayede site hızımıza olumlu yansıdı.
3. Site hızı arttığı için bu SEO'ya olumlu etki yaptı. Bu sayede sitemiz daha sağlam hale geldi.

İşte bu tarz bize yararları oldu. Bu sayede her türlü açıdan kazançlı çıktık. Tek zararı belki azıcıkta olsa kalite düşüşü oldu ancak bu çok etki etmez diye düşünüyorum.

Not : Ayrıca görselleri sıkıştırmanın bir sonucu olarak EXİF bilgileri silinebiliyor. Bu sizin için önemli ise dikkat ediniz.

Tercih Edilen Görsel Sıkıştırma Araçları

Şimdi son olarakta 2 tane görsel sıkıştırma aracı önerisi vermek istiyorum. Bu üçünden dilediğinizi seçebilir ve kullanabilirsiniz.

1. compressor.io

Evet, bu araç görselleri çok hızlı bir şekilde sıkıştırabiliyor. Ayrıca arayüzü oldukça basit ve kullanışlı. Bu araç sayesinde şu formatlardaki görselleri sıkıştırabiliyorsunuz:

• PNG
• JPEG
• JPG
• SVG
• GIF
• WebP

Bunun gibi formatlarda sıkıştırma yapabilmektedir. Oldukça kaliteli bir araçtır.

compressor.io

2. websiteplanet.com

websiteplanet'e ait görsel sıkıştırma aracı oldukça kaliteli. Bu araç ile PNG, JPEG ve JPG formatındaki görselleri hızlı bir şekilde sıkıştırabiliyorsunuz.

websiteplanet.com

Ayrıca bu aracın ek ayarlar kısmı bana bir tık daha kullanışlı gibi geldi. Bu nedenle 2. olarak bu aracı öneriyorum.

---

Evet, bu yazı bu kadardı. Umarım yardımcı olabilmişimdir. Eğer yazıyı beğendiyseniz bu sayfayı paylaşabilirsiniz :)

Bir sonra ki yazıda görüşmek üzere...

Görseller Nasıl Sıkıştırılır? Web Sitenizin Hızını Artırın! | RaBlogin