Photoshop ile Görsellerinizi Sıkıştırarak Web Sayfanızın Açılış Hızını Arttırın

Photoshop’un Save for Web (Web için Kaydet) seçeneği, biz web geliştiricileri için büyük önem taşımaktadır. Makaleyi sonuna kadar okuduktan sonra bir daha Save, Save As gibi menü seçeneklerini kullanmayacağınıza eminim.

Aşağıdaki görsel en basit ayarlar ile Save As ve Save for Web farkını göstermektedir :

Bu kaydetme aracı sayesinde kalite kaybını minimuma indirip dosya boyutunu büyük oranda azaltabiliriz. Web sayfanızdaki görsellerin dosya boyutunu azaltamanız

Sitenizin daha hızlı açılmasına,
Ziyaretçilerin daha az kota harcamasına,
Açılış hızına eşdeğer Google puanınızın artmasına,

ve daha birçok işe yarar sonuç verir.

Photoshop ile görseller nasıl sıkıştırılır?

İlk olarak şunu söylemekte fayda var; kayıt edeceğiniz dosyaların boyutlarına dikkat edin, lüzumsuz bir görseli yüksek boyutlandırmayın.

Save for Web aracının kısayol tuşu Alt+Shift+Ctrl+S şeklindedir. Diğer kısayol tuşlarını öğrenmek için buradaki makaleyi okuyabilirsiniz.

JPG dosyaları

.JPG uzantılı görseller renk geçişlerinin az olduğu ve fazla keskinlik olmayan görseller için kullanılmalı. Örneğin bir okyanus fotoğrafı JPG için fazlasıyla uygundur. Fakat bu okyanusun içinde yüzlerce yelkenli, renk renk gözüküyorsa dosya boyutu artacaktır. JPG için Save for Web ayarları aşağıdaki gibidir.

GIF ve PNG dosyaları

.GIF ve 8-bit .PNG resim dosyaları yakın renklerin olduğu görseller için gayet uygunlar. Fakat renkler arasındaki fark yüksekse (örneğin lacivertten açık yeşile kadar her renk varsa) kalite büyük oranda düşer. Ayrıca bu iki format 256 colors olarak ayarlanabilir.

Özellikle 8-bit halleri JPG’e göre daha kalitesizdir. Küçük fotoğraflar ve ikonlar için kullanılmalı. Yazı efektleri için de kullanılabilir.

Bu iki formatın da transparan desteği olduğunu hatırlatıp karşılaştırmaları görelim.

Alanları Tanıyalım

Preset alanı önceden tanımlı ayarları seçmemize yarıyor. Kolay kullanım için eklenmiş.Hemen altındaki seçim ise dosya formatı. GIF, PNG, JPG gibi seçenekler mevcut.Color bölümü kullanılmasını istediğiniz renk tonu, Dither görseldeki titreşim, Matte ise eklenecek olan matlık ayarıdır.

Bu da ilginizi çekebilir Haftanın Ücretsiz Web Teması #15

Ayarları kurcalayarak, yandaki önizleme penceresinden sonucu görüntüleyebilirsiniz.