Web Sitesinde Resim Optimizasyonu Yapma

Web Sitesinde Resim Optimizasyonu Yapma

Web Sitesinde Resim Optimizasyonu Yapma

  6 dakika Okuma Süresi
Resimler web sitesinin olmazsa olmazlarından biri. Hem sadece yazı ile okuyucuyu boğmamak ve yazının görselliğini arttırmak hem de yazıyı desteklemek amacıyla yazı içerisine resimler eklenir. Resimlerde aslında her ne kadar metin dosyaları olsada (base64 gibi decode ederek bi resmi metin haline çevirebilirsiniz) dosya boyutları normal bir metinden çok daha fazla olabiliyor.
Web sitesinde ise bi dosyanın boyutu ne kadar büyükse sunucu tarafında okunup yorumlanması da o derece uzun sürmekte. Bu süre saniyeler hatta çoğu zaman milisaniyelerle ölçülse de sitenizin 1 saniye geç açılması size birçok ziyaretçi kaybettirebilir. Çünkü internette araştırma yapan bir insan aradığı şeyi hemen bulmak ister, özellikle aradığı bilginin kendinde olduğunu iddia eden web sitelerinde ziyaretçinin sayfanın açılması için bekleme süresi en faz 6-7 saniyedir. Sitenin açılması ne kadar uzun sürerse ziyaretçinin yazıyı okuma ve sonrasında diğer yazılara da göz atma ısrar ve isteği o derece azalır.

Resimler her ne kadar web sitesi için önemli olsa da sunucu için ayrı bi yük anlamına gelmektedir, sitenizde ne kadar çok resim varsa sunucunuzun o kadar çok yorumlama yapması gerekmektedir.
Tabi sunucu üzerine binen bu yükü hafifletmek mümkün. Yapılabilecek birkaç işlem ile resimler en küçük dosya boyutlarına düşürülüp daha hızlı yorumlanması sağlanabiliyor.

İlk olarak kendiniz kod ile resim dosyalarını küçültebilirsiniz. Bunun için aşağıdaki kod bloğunu kullanabilirsiniz.
Kod:
$filename = 'resim.jpg';
$img = imagecreatefromjpeg($filename);
$kayit = 'yeniResim.jpg';
imagejpeg($img, $kayit, 100);
Bu 4 satırlık kod sayesinde elinizdeki bir resmi kodlama yardımıyla sıkıştırarak boyutunun küçülmesini sağlayabilirsiniz. Bu kod ile sadece JPG resimleri sıkıştırabilirsiniz. PNG resimleri için imagecreatefromjpeg yerine imagecreatefrompng ve imagejpeg yerine imagepng fonksiyonlarını kullanmanız gerekmektedir.

Sizin yukarıdaki örnekte belirttiğim kod ile yaptığınızdan kat kat daha iyi sıkıştırabilen servisler/siteler mevcut.
Bunlardan bi tanesi de TinyPNG.
TinyPNG sayesinde resim dosyalarınızda %80'lere varan sıkıştırma yapabilirsiniz. Artı bir yanı da API desteği olması. Yani siz TinyPNG web sitesine gidip resim yükleme, sıkıştırma, indirme gibi işlemleri yapmadan direk kodlama ile sıkıştıracağınız resmi TinyPNG sunucusuna gönderip sıkıştırılıp geri alabilirsiniz.
Bunun için öncelikle siteye üye olmalı, API dosyalarını indirmeli ve sunucunuza yüklemeniz gerekmektedir. API dosyalarını buradan indirebilirsiniz.
Şimdi gelelim API'nin kullanımına; Öncelikle API dosyalarımızı çağırıyoruz:
require_once('lib/Tinify.php');
require_once('lib/Tinify/Exception.php');
require_once('lib/Tinify/ResultMeta.php');
require_once('lib/Tinify/Result.php');
require_once('lib/Tinify/Source.php');
require_once('lib/Tinify/Client.php');
Ardından 
\Tinify\setKey('Sizin API Keyiniz');
kod satırı ile API'ye kendi anahtarımızı veriyoruz. Bu sayede API, resmi kimin sıkıştıracağını tanıyor.
$source = \Tinify\fromFile('resim.jpg');
$source->toFile('kucukResim.jpg');
Kod bloğu ile de resim.jpg dosyasını gönderip sıkıştırtıp sonrasında kucukResim.jpg olarak kaydediyoruz.
API'nin bir güzel yanı da tüm resim uzantılarını desteklemesi. Yani örneğin kendiniz PHP ile sıkıştırmak istediğinizde sadece JPG ve PNG oluşturabiliyor ve dosyanın uzantısına göre farklı fonksiyon çağırmanız gerekiyor. Fakat TinyPNG API'de buna gerek yok. Sunucu kendisi tespit edip ona göre işlem yapıyor ve sıkıştırıyor.

Son olarak API kodlarını toplu hâlde bi yazayım;
require_once('lib/Tinify.php'); 
require_once('lib/Tinify/Exception.php');
require_once('lib/Tinify/ResultMeta.php');
require_once('lib/Tinify/Result.php'); require_once('lib/Tinify/Source.php');
require_once('lib/Tinify/Client.php');
\Tinify\setKey('Sizin API Keyiniz'); 
$source = \Tinify\fromFile('resim.jpg'); 
$source->toFile('kucukResim.jpg');
Evet hepsi bu kadar.
Bu bahsettiğimiz 2 farklı kodlama ile resimlerinizi sıkıştırabilir ve sitenizin açılış hızını ciddi oranda arttırabilirsiniz.

Resim optimizasyonu sadece resimleri sıkıştırmak demek değil tabiki.
Yazı içerisinde veya ana sayfadaki yazıları sıraladığınız alanda kullandığınız resimlerin boyutlarını sabit yaparak da resim optimizasyonu sağlayabilirsiniz. Yani ana sayfadaki yazı resimlerinin birini 300x300 diğerini 500x400 bi diğerini 600x500 yapmak gayet mantıksızdır. Çünkü ana sayfadaki yazıların hepsinin değeri ve önem sırası aynıdır. Ayrıca tasarımın kaymaması için özellikle resimleri sabit yapmanız daha olumlu olacaktır.
Henüz yazıyı yazarken kullanacağınız resimleri boyutlandırmalı ve boyutlandırılmış hallerini sunucunuza yüklemelisiniz.

Tabi bunu Paint gibi uygulamalarla da yapabiliyorken biz yine kolaya kaçıp kodlama ile yapacağız. Yani biz resimleri seçeceğiz, Yükle dediğimizde resimlerin hepsini istediğimiz boyutlara getirecek ve o şekilde yükleme yapacak. Kim uğraşır Paint ile :)
Bunun için de daha önce bahsettiğim imagecreatefromjpeg ve imagecreatefrompng fonksiyonların faydalanacağız. Boyutlandırma için gerekli olan kodlarımız şu şekilde;
$dosya = 'resim.jpg';
$yukseklik = 300;
$genislik = 250; 
list($mevcutGenislik, $mevcutYukseklik) = getimagesize($dosya);
$hedef = imagecreatetruecolor($genislik, $yukseklik);
$kaynak = imagecreatefromjpeg($dosya); 
imagecopyresampled($hedef, $kaynak, 0, 0, 0, 0, $genislik, $yukseklik, $mevcutGenislik, $mevcutYukseklik); 
imagejpeg($hedef, $dosya);
Bu kod bloğu ile resim.jpg dosyamızı 300x250 boyutuna getirip kaydediyoruz.
Bu kod ile sadece JPG dosyalarını boyutlandırabilirsiniz. PNG dosyaları için imagecreatefromjpeg yerine imagecreatefrompng, imagjpeg yerine imagepng fonksiyonlarını kullanmanız gerekmektedir.

Genel olarak resim optimizasyonu yapmak bu şekilde oluyor. Hem kodlama hemde SEO bilgimizi kullanarak resimleri optimize ettik ve web sitemizin açılış hızını da ciddi oranda arttırmış olduk.

Bu yazımın da sonuna geldik, diğer yazılarım için takipte kalabilir, sormak istediğiniz sorularınız olursa yazı altından sorabilirsiniz. Herkese hayırlı günler..


  • İçeriği Paylaş:

İÇERİĞİ DEĞERLENDİR

Toplam Değerlendirme Sayısı: 0
Toplam Değerlendirme: 0 / 5

Cevap Yaz