Görseller Web İçin Nasıl Optimize Edilir: Daha İyi Site Performansı İçin Adım Adım Kılavuz

Resimlerin dünya çapındaki ağ için paha biçilmez bir varlık olduğuna şüphe yok. Verileri görselleştirmekten metin paragraflarını ayırmaya ve portföy çalışmanızı sergilemeye kadar, fotoğraflar ve grafikler çoğu web sitesi tasarımının önemli bir parçasıdır ve kullanıcıların harika çevrimiçi deneyimler yaşamasına yardımcı olur.

Bununla birlikte, harika görsellere sahip olmak, web sitenize zarar verebilir. Daha yüksek çözünürlüklerle daha büyük dosya boyutları gelir, bu da daha yavaş yükleme süreleri anlamına gelir. AKA, görüntüler genellikle zayıf site performansının nedenidir. Ve unutmayın, web sitenize resim eklemenin tüm amacı, kullanıcılarınız için daha iyi bir deneyim yaratmaktır (hatta belki satışları ve dönüşümleri artırmaktır!), ki bu yavaş bir siteyle yapılması zordur.

Peki, site performansını görsel tasarımla nasıl dengelersiniz?

Resimlerinizi optimize ederek.

Özellikle web sitenizi göz önünde bulundurarak dosya boyutlarını optimize etmek için görüntü oluşturma sürecinde yapabileceğiniz pek çok küçük şey vardır.

Görüntü optimizasyonuna yönelik bu adım adım kılavuzda şunları ele alacağım:

• Görüntü optimizasyonu nedir?
• Görüntü optimizasyonu neden önemlidir?
• Görüntüleri web için optimize etmenin 7 yolu

Görüntü Optimizasyonu Nedir?

Genel olarak konuşursak, görüntü optimizasyonu, kaliteyi kaybetmeden dosya boyutunu küçültme eylemidir. Görüntülerinizi oluşturma aşamasında (Photoshop'ta doğru "Dışa Aktar" seçeneklerini kullanarak) veya doğrudan web sitenizde (sitenizdeki medyayı görüntülemek için tembel yüklemeyi kullanarak) optimize edebilirsiniz. Amaç, bir kullanıcının indirmesi gereken veri miktarını azaltmak ve böylece kaliteden ödün vermeden aradıkları içeriği daha hızlı alabilmelerini sağlamaktır.

Görüntü Optimizasyonu Neden Önemlidir?

Web söz konusu olduğunda insanların dikkat süreleri kısadır, bu nedenle web sitenizin iki saniye veya daha kısa sürede yüklenmesi önemlidir. Sitenizi yavaşlatan en yaygın faktörlerden biri de resimlerinizdir. (Web siteniz, yönetilen bir WordPress sunucusunda olduğu gibi en iyi sunucularda çalışıyor olsa bile, görüntüler performansın düşmesine neden olabilir.)

Görüntü optimizasyonu en iyi uygulamalarından yararlanarak, dosya boyutunuzu küçük ve yükleme sürenizi hızlı tutarak site ziyaretçileriniz için daha iyi bir deneyim oluşturacaksınız.

Görüntü optimizasyonunun önemli olmasının başka bir nedeni daha vardır, ancak bu neden doğrudan işletmenizin kârlılığına bağlıdır. Web sitenizi yavaşlatmanın ötesinde, resimler sitenize güç sağlayan sunucuda disk alanı kaplar. Çoğu barındırma sağlayıcısı, plan başına bir bant genişliği sınırı uygular, yani sınırsız kaynağınız olmaz ve resimleriniz bu alanı hızla kaplar.

Bu sınırı aşmanız dünyanın sonu olmasa da, sizden bir limit aşımı ücreti alınabilir veya daha kötüsü web siteniz kapatılabilir.

Resimlerinizi optimize ederek, site depolama alanınızdan en iyi şekilde yararlanabilecek ve bu bant genişliği sınırından kaçınabileceksiniz.

Artık görüntü optimizasyonunun ne kadar önemli olduğunu bildiğinize göre, bunu nasıl yapacağınızdan bahsedelim! Bu adım adım kılavuz, Photoshop ipuçlarından geliştirme uygulamalarına kadar her şeyi kapsayacaktır.

Görselleri Web İçin Optimize Etme

Bu adım adım kılavuz, Photoshop'ta başlayıp sitenizde son bulan görüntüleri optimize etmek için yapabileceğiniz her şeyi kapsayacaktır.

Daha iyi site performansı için resimlerinizi optimize etmek üzere şu adımları izleyin:

1. Mevcut site hızınızı kıyaslayın.
2. En iyi görüntü dosyası türünü nasıl seçeceğinizi bilin.
3. Dışa aktarmadan önce resimlerinizi yeniden boyutlandırın.
4. Dosya boyutunu azaltmak için görüntüleri sıkıştırın.
5. Bir WordPress eklentisi ile görüntü optimizasyonunu otomatikleştirin.
6. Önce Düşük Kaliteli Görüntü yüklemek için "bulanıklaştırma" tekniğini kullanın.
7. Yavaş yüklemeyi kullanın.

1. Mevcut Site Hızınızı Kıyaslayın

Resimlerinizi optimize etmek için tüm bu çalışmaları yapmadan önce, sitenizde bir hız testi yaparak başlayın! Sonunda, yarattığınız etkiyi görebileceksiniz (ayrıca bunu ekstra takdir için ekibinizle veya patronunuzla paylaşabilirsiniz). Bazı popüler hız testi araçları şunlardır:

• Google Sayfa Hızı Analizleri
• Pingdom Araçları
• GTMetrix
• Web Sayfası Testi

Bu tarayıcı tabanlı araçların hepsi birbirine oldukça benzer şekilde çalışır: Bağlantıyı açın, ardından sitenizin hızı ve performansı hakkında hızlı bir rapor almak için URL'nizi girin.

2. En İyi Görüntü Dosyası Türünü Nasıl Seçeceğinizi Bilin

Görüntü oluşturmayı (kameranızdan kaydetme veya Photoshop gibi bir araçtan dışa aktarma) tamamladığınızda, dosya türünü belirleme seçeneğiniz olur. Web'de kullanım için en yaygın dosya türleri JPEG'ler, PNG'ler ve GIF'lerdir. Tahmin edebileceğiniz gibi, web sitenize yerleştirildiklerinde hepsinin kendi artıları, eksileri ve en iyi uygulamaları var.

JPEG'ler

JPEG görüntüleri, daha küçük dosya boyutuyla daha yüksek kaliteli bir görüntü sağladığından, sitenizdeki karmaşık renkli fotoğrafları göstermek için en iyi sonucu verir. Bu dosya türü, büyük bir istisna dışında, sitenizde kullanmak istediğiniz resimlerin çoğu için muhtemelen işe yarayacaktır: saydam arka plana sahip resimler. (Bunlar için PNG'lerle ilgili bir sonraki bölüme bakın!)

Web siteniz için bir JPEG görüntüsü kullanırken, onu "Aşamalı" olarak dışa aktarmayı düşünün. Bu, tarayıcının tam çözünürlüğü siteye tam olarak yüklemeden önce görüntünün basit bir sürümünü anında yüklemesine olanak tanır.

Photoshop'ta çalışıyorsanız, "Web için Kaydet" olarak dışa aktardığınızda bu ayarı bulacaksınız.

PNG'ler

Görüntünüzde tonlarca renk yoksa (düz çizimler veya simgeler gibi) veya şeffaf bir arka plana sahip olmasını istiyorsanız PNG olarak dışa aktarmanızı öneririm. Doğru görüntü boyutlarına sahip olduğunuzdan emin olun ve PNG-24 (veya kalite kaybı yoksa 8) olarak kaydetme seçeneğini arayın.

GIF'ler

Web için üçüncü en yaygın görüntü formatı GIF'lerdir. Yalnızca 256 rengi desteklerler, bu nedenle bu dosya türünde seçici olmanız gerekir!

Web siteniz için GIF'leri optimize etmek için ne kadar süre dayanacaklarını, döngüye girmeleri gerekip gerekmediğini ve belirli bir sayfada veya sitede gerçekten kaç tanesine ihtiyacınız olduğunu eleştirel bir şekilde düşünün.

3. Yüklemeden Önce Resimlerinizi Yeniden Boyutlandırın

Resimleri web için optimize etmenin en kolay yollarından biri, onları sitenize yüklemeden önce yeniden boyutlandırmaktır. Özellikle bir DSLR fotoğraf makinesinden alınan ham görüntülerle çalışıyorsanız, boyutlar genellikle ihtiyaç duyduğunuzdan çok daha büyüktür.

Örneğin, sitenizdeki bir blog makalesine resim eklediğinizi varsayalım. WordPress temanız resimleri 500 x 500'de gösteriyorsa ancak 1024 x 1024 çözünürlüklü resimler yüklüyorsanız, tüm bu ekstra pikseller gerçek bir fayda sağlamadan dosya boyutunu artırıyor ve site hızını düşürüyor.

Yüklemeden önce resimlerinizi kırparak veya yeniden boyutlandırarak dosya boyutunu küçültürsünüz , bu da sitenizin biraz daha hızlı yüklenmesine yardımcı olur ve daha fazla resim için disk alanınızdan tasarruf sağlar.

Görüntünüzü yeniden boyutlandırmak için, tercih ettiğiniz görüntü düzenleme yazılımınızı açmanız yeterlidir. Photoshop iyi çalışıyor veya Önizleme (Mac'ler için), Paint (Windows için) veya Canva (bir tarayıcı aracı) gibi daha basit araçları da kullanabilirsiniz.

4. Dosya Boyutunu Küçültmek İçin Görüntüleri Sıkıştırın

Son görüntünüzü doğru biçimde kaydettikten ve uygun bir boyuta kırptıktan sonra, sitenize yüklemeden önce optimize etmek için atabileceğiniz bir adım daha var: sıkıştırmak.

Bu işlem, gözle görülür görüntü kalitesini kaybetmeden dosya boyutunu küçültmenize yardımcı olacaktır. İki ana sıkıştırma türü vardır: kayıplı ve kayıpsız.

Kayıpsız sıkıştırma, sıkıştırmadan önce ve sonra aynı kalite seviyesini koruyacaktır. Kayıplı sıkıştırma, fotoğrafın bazı öğelerini atacaktır, ancak genellikle insan gözünün fark etmeyeceği bir şekilde. Bu sıkıştırma türleri hakkında daha fazla bilgi edinmek için Imagify'dan bu kılavuzu tavsiye ederim.

Sitenizde belirli bir görüntünün yüklendiğini ve yavaş yavaş görüntülenmeye başladığını görürseniz, bu, görüntünün sıkıştırılması, yeniden boyutlandırılması veya her ikisinin birden yapılması gerektiğinin bir işareti olabilir.

Resimlerinizi sıkıştırmak için ihtiyacınız olan tek şey bir resim sıkıştırma aracıdır. Favorilerim şunları içerir:

• TinyPNG: PNG ve JPEG resimlerini sıkıştırmak için tarayıcı tabanlı ücretsiz bir araç.
• ImageOptim: Görüntüleri sıkıştırmak için ücretsiz bir açık kaynaklı uygulama.
• JPEGmini: Mac ve Windows için bir fotoğraf yeniden sıkıştırma uygulaması.
• RIOT: Görüntüleri optimize etmek için ücretsiz bir Windows uygulaması.
• Image Optimizer: Yerel için ücretsiz bir Eklenti.

küçük png

Bu tarayıcı tabanlı araç, kullanılan renk sayısını azaltarak dosya boyutunu küçülterek akıllı kayıplı sıkıştırma kullanarak görüntüleri optimize eder. (Ama merak etmeyin, fark etmeyeceksiniz bile!) Ücretsizdir ve PNG'ler ve JPEG'ler için kullanımı hızlıdır.

Görüntü Optimizasyonu

Bu, mümkün olduğu kadar çok görüntü kalitesini korurken gereksiz şişkinliği gidererek görüntüleri sıkıştıran ücretsiz bir Mac uygulamasıdır.

JPEG mini

JPEGmini, hem kaliteyi hem de formatı korurken dosya boyutunu küçültmenize yardımcı olan güçlü, ücretli bir seçenektir. Ücretsiz bir deneme sürümü var, bu yüzden satın almadan önce bir deneme çalıştırması yapabilirsiniz.

İSYAN

Radical Image Optimization Tool (RIOT), görüntü dosyası boyutunu küçültmek için ücretsiz bir Windows uygulamasıdır. Yan yana bir görünüme sahiptir, böylece görüntü kalitesini sıkıştırmadan önce ve sonra karşılaştırabilirsiniz.

Image Optimizer, Yerel için ücretsiz bir Eklenti

Yerel geliştirme ortamınız olarak Yerel kullanıyorsanız, görüntüleri çevrimdışı olarak otomatik olarak sıkıştırmak için Görüntü İyileştirici Eklentisini kullanabilirsiniz. Sitenizi tüm resim dosyaları için tarar, size bunları ayrı ayrı sıkıştırma zamanından kazandırır ve bu süreçte sitenizi hızlandırır.

5. Bir WordPress Eklentisi ile Görüntü Optimizasyonunu Otomatikleştirin

Bu noktada, görüntü optimizasyonunun çok iş olduğunu düşünmeye başlıyor olabilirsiniz ve öyle de olabilir! Ancak, bu adımlardan birkaçını basitleştirmenin kolay bir yolu da var ve bu, WordPress sitenize bir görüntü optimizasyon eklentisi yüklemektir.

Birkaç tavsiyem var ve her birinin kendine has özellikleri var. Ancak genel olarak, bir resim optimizasyon eklentisi, WordPress sitenize yüklediğinizde resimlerinizi sıkıştırır ve yeniden boyutlandırır. Bu, bu adımları manuel olarak yapmak yerine atlayabileceğiniz anlamına gelir, bu da büyük bir zaman tasarrufu sağlar.

Müşteriler için siteler oluşturuyorsanız, bu yöntem de güzeldir. Görüntü optimizasyon sürecinin her adımını hatırlamaya çalışmak, son kullanıcı ve içerik oluşturucular için büyük bir baskıdır. İşin çoğunu onların yerine yapacak bir eklenti yükleyerek, oluşturduğunuz siteyi teslim ettiğinizde hız ve performans sağlamaya yardımcı olacaksınız.

Bir WordPress sitesindeki görüntüleri optimize etmek için şu eklentileri öneririm:

• EWWW Görüntü Optimize Edici Bulut
• küçük png
• Kracken.io
• hayal et

EWWW Görüntü Optimize Edici Bulut

Bu WordPress eklentisi, resimlerinizi sitenize yüklediğinizde otomatik olarak optimize eder veya geçmişte yüklediğiniz resimleri de optimize edebilir. Bu, optimize edilmemiş görüntülere sahip mevcut bir siteyle çalışıyorsanız, onu inanılmaz derecede faydalı kılar.

küçük png

TinyPNG ekibinin bu WordPress eklentisi, yükleme sırasında JPEG ve PNG resimlerini optimize edebilir. Tarayıcı tabanlı aracın hayranıysanız, ücretsiz eklentileriyle süreci kolaylaştırın!

Kracken.io

Kracken.io eklentisi, WordPress sitenizdeki hem yeni hem de mevcut resimleri optimize edebilir. Ayrıca, hem kayıpsız hem de kayıplı sıkıştırma modlarını destekleyerek nihai sonuç üzerinde çok fazla kontrol sahibi olmanızı sağlar.

hayal et

Bu WordPress eklentisi, resimlerinizi kaliteden ödün vermeden optimize etmenize yardımcı olacaktır. Bu eklentileri kullanıyorsanız, WooCommerce ve NextGen Gallery ile de uyumludur.

Not: Bir eklenti seçmeden önce, nasıl çalıştıklarına baktığınızdan emin olun. Bazıları sitenizde sorunlara neden olabilecek sunucu vergilendirme işlemlerini kullanırken, diğerleri web sunucunuzdaki yükün üstesinden gelmek için FTP seçeneklerini kullanır.

6. Önce Daha Düşük Kaliteli Bir Görüntü Yüklemek İçin "Bulanıklaştırma" Tekniği'ni kullanın

Önceki tüm optimizasyon adımlarından sonra bile, bir sayfada hala büyük dosya boyutlarıyla veya çok sayıda resimle çalışıp sitenizin hızını yavaşlatıyor olabileceğiniz durumlar olabilir. Bu gibi durumlarda, bazen yalnızca görüntüleri optimize etmek değil, aynı zamanda site ziyaretçilerinin medya dosyalarınızın gerçekte olduğundan daha hızlı yüklendiğini düşünmeleri için yükleme deneyimini optimize etmek de yararlı olabilir.

Sonraki iki adımın amacı da bu; daha hızlı yüklenen görseller görünümü vermek, böylece kullanıcılar dosyalarınız yüklenirken boş bir sayfaya bakmıyor.

Bunu yapmanın bir yolu, önce Düşük Kaliteli Görüntü (LQI) yüklemektir. Resmin tam boyutunu yüklemeden önce daha küçük bir sürümünü yükleyerek, kullanıcıya tüm ayrıntıları beklerken bakabileceği bir şey verir. Bu, teknik olarak her şey aynı oranda yükleniyor olsa bile daha hızlı yükleme süresi algısı verir.

Bunu yapmanın popüler bir yolu, bu CSS-Tricks öğreticisiyle nasıl uygulayacağınızı öğrenebileceğiniz "bulanıklaştırma" tekniğidir.

7. Site Resimlerinizi Yavaş Yükleyin

"Bulanıklaştırma" tekniğine benzer şekilde, daha hızlı yüklenen görseller görünümü vermenize yardımcı olacak bir numara daha var: Yavaş yükleme.

Birisi sitenize geldiğinde, sayfanın en üstünden başlar. Özellikle meşgullerse, tüm sayfayı kaydırmaları muhtemelen biraz zaman alacaktır. Tembel yükleme, tüm görüntüleri aynı anda yüklemeye çalışmak yerine, kullanıcıların görebildikleri içeriği en çok önemsediği varsayımıyla hareket eder. Bu nedenle, önce tarayıcı görünümündeki resimler tam olarak yüklenirken, kullanıcı sayfanın o bölümüne gidene kadar önce diğer resimler bir yer tutucu yükler.

Yavaş yükleme, kendi başına harika bir tekniktir ve bu diğer görüntü optimizasyon ipuçlarıyla birlikte kullanıldığında daha da güçlüdür! Ve Smush eklentisi sayesinde bunu bir WordPress sitesinde yapmak çok kolay.

Resimleri optimize ederek daha iyi site performansı için adım adım açıklamalı kılavuzumuz burada sona eriyor! Bunun sitenizde yarattığı etkiyi görmek için başka bir hız testi yapın. Nasıl yapardın?

Doğru görüntü optimizasyon araçlarıyla, kısa sürede daha iyi site hızı ve performansı görebileceksiniz!