PHP / tinypng.com ile resim optimizasyonu

Belki birilerinin işine yarar, yapmak isteyip de böyle bir hizmetten haberi olmayanlar da olabilir diye böyle bir konu açma ihityacı duydum.

Mesele çok basit, gerek (bildiğim kadarıyla) SEO olsun gerek site performansı açısından olsun kullandığımız resimlerin optimize edilmesi çok gerekli oluyor. Resimleri tek tek elle optimize etmeye çalışmak (Wordpress gibi platformlarda hazır optimizasyon eklentisi var mıdır bilmiyorum açıkçası) sıkıcı da olabilir. İşte bunun için bütün resimlerinizi tek seferde optimize edebileceğiniz tinypng.com un API hizmetini kullanabiliriz.

Nasıl İndirilir?
Öncelikle gerekli olan API dosyalarını indirmekle başlayalım. Eğer bilgisayarınızda composer yüklü ise komut satırından (terminalden) şu komutu vererek;

composer require tinify/tinify


veya kendi Github adresinden gerekli dosyaları indirebilirsiniz. İkinci yol daha az uğraştırıcı elbette.

Nasıl Kullanılır?

Şimdi sistemi kullanmak için elzem olan API KEY imizi almaya geldi sıra,
Bu adrese gidip eposta adresinizle kayıt olarak çok basit bir şekilde yönergeleri izleyip API KEY alabilirsiniz.

Direkt link ile indirdiğinizi varsayıp ona göre anlatacağım. İndirdiğiniz dokümanlardan çıkan lib ve test isimli iki klasörü optimize etmek istediğiniz resimlerin olduğu klasörün içine atın. Daha sonra yine bu klasörün içine index.php veya istediğiniz bir isimde dosya açın ve içeriğini şu şekilde yapın;

ini_set("max_execution_time",0);

require_once("lib/Tinify/Exception.php"); //Gerekli kütüphaneleri dahil ediyoruz
require_once("lib/Tinify/ResultMeta.php");
require_once("lib/Tinify/Result.php");
require_once("lib/Tinify/Source.php");
require_once("lib/Tinify/Client.php");
require_once("lib/Tinify.php");

const API_KEY = 'api_keyinizi_buraya_yazın'; //Api keyiniz

\Tinify\setKey(API_KEY);

$dosyalar = glob("*.jpg"); //farklı resim uzantılarınız varsa .jpg yi ona göre ayarlayın.

foreach ($dosyalar as $item) {
$source = \Tinify\fromFile($item);
$source->toFile($item);
}


En üstte ini_set("max_execution_time",0); yazdık ki bu özelliğin varsayılan değeri aşıldığında işlemimiz sona ermesin. Yine de çok fazla sayıda resim dosyanız varsa garanti olması açısından yarı yarıya bölerek işleminizi yapabilirsiniz.

Composer ile indirmiş olanların index.php içeriği şu şekil olabilir;

ini_set("max_execution_time",0);

require_once("vendor/autoload.php"); //composer için

const API_KEY = 'api_keyinizi_buraya_yazın';

\Tinify\setKey(API_KEY);

$dosyalar = glob("*.jpg");

foreach ($dosyalar as $item) {
$source = \Tinify\fromFile($item);
$source->toFile($item);
}


Tek bir API anahtarının aylık 500 ücretsiz optimizasyon hakkı olduğunu da unutmayın.

Aslında bu sistemin bence daha kullanışlı bir yanı da; projenize dahil ederek resim yükleme işlemlerinde herhangi bir ekstra uğraşı gerektirmeden otomatik olarak optimize edilmesini sağlayabilir.

Daha detaylı bilgi için sitenin kendi dokümantasyon sayfasına bakabilirsiniz.

Wp eklenti kullanıyorum ama yinede dursun bir ara denerim.
Eline emeğine sağlık.

Mobil uygulamaya api ile veri gönderiyorum. Uygulama her açılışta 5 mb yiyor resimlerden dolayı. 1800’e yakın görsel var. Ne yapacağım bilemedim

berkaycatak sanırım cpanelde resim optimizasyonları ile ilgili birşey olması lazım.

Yani sisteminizin işleyişini bilmiyorum ama ben olsam resimleri yüzer, veya ellişer olarak sırayla başka klasöre alıp orda tinypng ile küçültürüm, aynı anda en fazla 13 dosya test ettim açıkçası, max_execution sıfırlama kodu var ama ben yine de garantici olmayı severim, işlemin yarıda kesilme ihtimali olsun istemem . Optimize edilen resimler zaten yine aynı adla kayıt olacak aynı klasöre. Onları alıp yine ana resim klasörüne atardım. Biraz uzun sürerdi ama o şekil sırayla hepsini hallederdim :)

Teşekkür ederim :)

Bir tane projeme ilk başta bunu eklemiştim. Ama sonra çok ta iyi olmadığını farkettim. Eğer kullanıcının resmi çok büyükse önce resmi sunucuya yükleyip öyle küçültme işi yapıyor. Bu yüzden işlem çok uzun sürüyor. Bunu kaldırıp javascript ile küçültme ekledim. Böylelikle resim sunucuya yüklenmeden tarayıcı üzerinden sıkıştırılıyor. İşlem çok daha hızlı gerçekleşiyor. Linkini de bırakayım.

https://fengyuanchen.github.io/compressorjs/

Aslında birçok yöntem var, yine PHP nin GD kütüphanesini kullanarak da hatrı sayılır küçültme işlemleri yapılıyor. Bu javascript kütüphanesi de güzele benziyor teşekkür ederim, deneyeceğim.

Merhaba teşekkürler paylaşımınız için. Garanti olması için iki kere farklı yerlere optimize ettireceğim. İlk olarak sizin verdiğiniz js kodu ile ikincisi de tinyjpg ile. Bu ikisini birbirine nasıl bağlayacağım hakkında hiçbir fikrim yok... Yardımcı olabilir

Bir başka lokal seçenek de üstte söylediğim GD kütüphanesi, ekstra bir seçenek olarak o da bulunsun burada madem;

const IMAGE_HANDLERS = [
IMAGETYPE_JPEG => [
'load' => 'imagecreatefromjpeg',
'save' => 'imagejpeg',
'quality' => 100
],
IMAGETYPE_PNG => [
'load' => 'imagecreatefrompng',
'save' => 'imagepng',
'quality' => 2
],
IMAGETYPE_GIF => [
'load' => 'imagecreatefromgif',
'save' => 'imagegif',
'quality' => 1
]
];
/**
* @param $src - geçerli bir dosya yeri
* @param $dest - geçerli bir dosya hedefi
* @param $targetWidth - istenen çıktı genişliği
* @param $targetHeight - istediğiniz çıktı yüksekliği veya boş
*/
function optimize($src, $dest, $targetWidth, $targetHeight = null) {
$type = exif_imagetype($src);
if (!$type || !IMAGE_HANDLERS[$type]) {
return null;
}
$image = call_user_func(IMAGE_HANDLERS[$type]['load'], $src);
if (!$image) {
return null;
}
$width = imagesx($image);
$height = imagesy($image);
if ($targetHeight == null) {
$ratio = $width / $height;
if ($width > $height) {
$targetHeight = floor($targetWidth / $ratio);
}
else {
$targetHeight = $targetWidth;
$targetWidth = floor($targetWidth * $ratio);
}
}
$thumbnail = imagecreatetruecolor($targetWidth, $targetHeight);
if ($type == IMAGETYPE_GIF || $type == IMAGETYPE_PNG) {
imagecolortransparent(
$thumbnail,
imagecolorallocate($thumbnail, 0, 0, 0)
);
if ($type == IMAGETYPE_PNG) {
imagealphablending($thumbnail, false);
imagesavealpha($thumbnail, true);
}
}
imagecopyresampled(
$thumbnail,
$image,
0, 0, 0, 0,
$targetWidth, $targetHeight,
$width, $height
);
return call_user_func(
IMAGE_HANDLERS[$type]['save'],
$thumbnail,
$dest,
IMAGE_HANDLERS[$type]['quality']
);
}


Kullanılışı;
optimize('xx.jpg','xx.jpg',300); //ister sadece width değeri belirleyip height değerini otomatik oalrak hesaplasın
//veya
optimize('xx.jpg','xx.jpg',300,300); //ister width ve height değerleri kullanıcı tarafından seçilsin
//Seçilecek dosya konumu fonksiyonun bulunduğu .php dosyasının olduğu klasör konumunu baz alacak şekilde yazılır

En üstte yazan
IMAGETYPE_JPEG => [
'load' => 'imagecreatefromjpeg',
'save' => 'imagejpeg',
'quality' => 100
],

kod parçasındaki 100 değerini küçülterek resmin kalite değerini azaltabilirsiniz.
Bu fonksiyonu çok kullandım, optimize ediyor ama bu kalite değeriyle oynayınca yeni resmin boyutu arasındaki farkların çalışma prensibini hâlâ çözebilmiş değilim.