tiny png ile görsel sıkıştırma

Görsel Sıkıştırma

Web Tasarım

Merhaba, izmir web tasarım kategorimizin bu yazısında web sitelerinde kullanmak için görsellerin kolay yoldan nasıl sıkılaştırılacağı hakkında basit bir yol göstermek istiyorum.

Biliyorsunuz ki web sitelerinin hızı seo (arama motoru optimizasyonu) için oldukça büyük bir önem taşımakta. Site içinde kullanılan görsellerin de site hızına doğrudan bir etkisi bulunmakta. Görselleriniz doğru yapılandırılmamışsa sitenizi Google Hız Testi ‘ne soktuğunuzda çoğu zaman görseller ile ilgili uyarılar alırsınız.

google speed page speed insights görsel boyutu

google page speed insights görsel boyutu

Görsellerin kalitesini bozmadan boyutunu nasıl düşürebiliriz?, jpeg boyut küçültme nasıl yapılabilir?, görsel boyutu küçültme, fotoğraf boyutu küçültme programsız, jpg dosya boyutu nasıl küçültülür?, fotoğraf boyutlandırma nasıl yapılır? tüm bu sorulara cevap vermek adına basit bir yöntemden bahsedeceğiz ancak, öncelikle belirtmek isterim ki kullanacağınız görselleri sitenin durumuna göre max büyüklükte ayarlamalısınız. Bu ne demek şöyle açıklayalım, örneğin blog yazınıza bir görsel yerleştireceksiniz ve sitenizde yazı alanı 760px olarak ayarlanmış. Eğer bu görsel sadece bir anlatım amacıyla kullanılıyorsa ve görselin büyük haline ihtiyaç yoksa bu görseli 3000px 4000px gibi devasa boyutlarda yüklemeninde bir anlamı yoktur. Kullanacağınız görseli yerine göre olabilecek maksimum seviyede küçültmelisiniz. Örneğin benim bu makalede konuyu anlatırken kullandığım görüntüler gibi..

Hiç bir programı kullanmayı bilmiyorum görseli nasıl küçültücem derseniz bunun cevabı çok basit. Windows’un paint uygulaması ile bunu hemen yapabilirsiniz. Konuyu yine görseller ile açıklamaya devam edelim..

programsız görsel boyutu düşürme

programsız görsel boyutu düşürme

Bilgisayarıma internetten örnek bir görsel indirdim. Görselin boyutu 1920x1080px ve boyutu 390 KB. Ben bu görseli yazımın içinde kullanmak istiyorum ancak bu boyutlarda olmasına gerek yok ve bunu 800px olarak küçültmek istiyorum. Peki ne yapmalıyım?

Windows Paint ile görsel küçültme

Öncelikle görselin üzerine sağ tık > Düzenle diyoruz..

programsız görsel boyutu düşürme

programsız görsel boyutu düşürme

Ardından sol üst köşeden Yeniden Boyutlandır diyoruz ve Piksel seçip istediğimiz ölçüyü yazıyoruz. Burada dikkat edilmesi gereken En boy oranını koru seçeneğinin işaretli olmasıdır. Bu seçenek işaretli olduğunda verdiğiniz genişlik veya yükseklik ölçüsüne göre diğer ölçüyü otomatik ayarlar. Ardından Tamam diyoruz ve görselimizi kaydediyoruz.

programsız görsel boyutu düşürme

programsız görsel boyutu düşürme

Böylece başta 390 KB olan görseli 155 KB ‘a düşürmüş oldum.

programsız görsel boyutu düşürme

programsız görsel boyutu düşürme

Buradan tasarrufumuzu sağladıktan sonra gelelim asıl göstermek istediğim yönteme. Görsellerin kalitesini bozmadan boyutlarını düşürmek için kullanabileceğiniz online bir araç mevcut. Bu araç ile png formatında arka planı şeffaf olan görsellerinde şeffaf özelliğini kaybetmeden düşürülmesini sağlayabilirsiniz. Bu araç görselin piksel cinsinden boyutunu düşürmek için değildir, KB cinsinden değerini düşürmek içindir buna dikkat edelim.

TinyPNG – Compress PNG images while preserving transparency

TinyPNG ve TinyJPG araçları ile görsellerinizi bozmadan sıkıştırabilirsiniz.

TinyPNG – Compress PNG images while preserving transparency
* https://tinypng.com/
TinyJPG – Compress JPEG images intelligently
* https://tinyjpg.com/

tinypng görsel sıkıştırma

tinypng görsel sıkıştırma

TinyPNG ve TinyJPG online görsel sıkıştırma araçları ücretsiz kullanımda bir seferde 20 adet görsele kadar toplu sıkıştırma işlemi yapmanıza imkan sağlıyor. Sıkıştırılan görselleri tek tek veya toplu şekilde .zip formatında indirme özelliğide var.

tinypng görsel sıkıştırma

tinypng görsel sıkıştırma

Örnekte gördüğünüz gibi görsel TinyPNG aracından geçtikten sonra 159 KB boyutundan 71 KB boyutuna düştü. Yani yazının başından beri yaptıklarımıza bakacak olursak kullanmak istediğimiz görseli bozmadan sitemizde kullanmaya uygun halde küçültmüş olduk. Üstelik başta 390 KB boyutunda olan görseli 71 KB gibi boyutla kullanma imkanı yaratmış olduk. Bu hem sitemizin disk alanını boş yere meşgul etmeyecek, hemde sitemizin çalışma hızına katkı sağlayacak bir hareket oldu.

Umarım faydalı olmuştur. Bir sonraki yazımızda görüşmek üzere hoşçakalın..

, , , ,

İlgili Yazılar

html nedir, html nerelerde kullanılır, html nasıl kullanılır

HTML Nedir?

Web tasarımına yeni başlayanların biraz araştırma yaptıktan hemen sonra ilk tanıştıkları ve en sık karşılaştıkları konu şüphesiz ki HTML‘dir. Buda HTML’in, web tasarımının en temel taşı olmasındandır. Sosyal ağ gruplarında…
Devamını Oku
bootstrap nedir

Bootstrap Nedir?

Profesyonel bir web sitesi yapmak istiyorsak, sitemizin tüm cihazlara (masaüstü, dizüstü, tablet, telefon vb) uyumlu çalışması gerekmektedir. Tüm cihazlara uygun tasarım yapısına responsive design (duyarlı tasarım) denilmektedir. Responsive web tasarımı…
Devamını Oku
javascript nedir

Javascript Nedir?

Temel web tasarım dersleri yazı dizimizin bu bölümünde yine web tasarımında olmazsa olmaz olan bir konuya değineceğiz. Konumuz, JavaScript Yani bir web sayfasına hareket katan, sayfaları eğlenceli hale getiren, bir…
Devamını Oku
hosting nedir

Hosting Nedir?

Bir web sitesi hazırladınız ve sitenizi yayına alarak dünyaya açmak istiyorsunuz. İşte tam olarak bu noktada iki şeye ihtiyacınız var. Bunlardan birisi domain, diğeri ise hosting‘dir. Bir web sitesini bir…
Devamını Oku

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Fill out this field
Fill out this field
Lütfen geçerli bir e-posta adresi girin.
You need to agree with the terms to proceed

Menü