v2.5.2
Giriş yap

APIDEN GELEN RESMIN BOYUTUNU KÜÇÜLTME

emirhankayabas
562 defa görüntülendi

Herkese iyi günler. Bir api üzerinden bana resimler gelmekte ve sayısı oldukça fazla. 1080p çözünürükte ve 3-5 mb büyüklüğünde. Her sayfada 20 tane olacak şekilde listeliyorum lakin scroll yaparken kasmalar oluyor. Bilgisayardan kaynaklı sandım ilk başta lakin sonradan başka sitelerde kasmadığını gördüm. Büyük ihtimal bu resimler yüzünden. Bu resimlerin boyutlarını nasıl makul bir seviyeye getirebilirim acaba? Resimlerin kalite kaybına uğramasında sorun olmaz çamur gibi olmadığı sürece. Resimleri ben yüklemediğim için boyutlandırmasını ayarlayamıyorum. PHP ile bunu yapmamın bir yolu var mıdır acaba?

ebykdrms
930 gün önce

PHP ile yapmanız mümkün.
stackoverflow.com'da şöyle bir başlık var:
url'den gelen bir görseli nasıl boyutlandırabilirim ve küçük boyutlu bir görsel yapabilirim?
Gelen cevapta şöyle söylenmiş:
PHP'nin imagecopyresamled işlevini kullanabilirsiniz. php.net'ten basit bir örnek:

<?php
// Dosya ve yeni boyut oranı
$dosya = 'https://www.gravatar.com/avatar/81b67dbba3bd3f9317db992d098d3fc0?s=80&d=mp&r=g';
$oran = 0.5;

// İçerik türü
header('Content-type: image/jpeg');

// Yeni resmin boyutları
list($genislik, $yukseklik) = getimagesize($dosya);
$yeniGenislik = $genislik * $oran;
$yeniYukseklik = $yukseklik * $oran;

// Görüntüleri yükleyelim
$hedef = imagecreatetruecolor($yeniGenislik, $yeniYukseklik);
$kaynak = imagecreatefromjpeg($dosya);

// Görüntüyü örnekleyelim
imagecopyresampled($hedef, $kaynak, 0, 0, 0, 0, $yeniGenislik, $yeniYukseklik, $genislik, $yukseklik);

// Görüntüyü çıktılayalım
imagejpeg($hedef, null, 100);
?>

Yani PHP tarafında API üzerinden aldığınız görselleri bu yöntemle yeniden boyutlandırabiliyorsunuz. Tabi burada tek bir görselin çıktısı basılmış ve bu php dosyasının jpeg dosyası gibi davranması için header atanmış.
Bu sayfaya url verisini GET parametresi olarak iletirseniz size görseliin %50 küçültülmüş halini jpeg formatında dönecektir. Yani kodları şöyle düzenleyebiliriz:
kucult.php

<?php

if(!isset($_GET["url"])) exit();

// Dosya ve yeni boyut oranı
$dosya = $_GET["url"];
$oran = 0.5;

// İçerik türü
header('Content-type: image/jpeg');

// Yeni resmin boyutları
list($genislik, $yukseklik) = getimagesize($dosya);
$yeniGenislik = $genislik * $oran;
$yeniYukseklik = $yukseklik * $oran;

// Görüntüleri yükleyelim
$hedef = imagecreatetruecolor($yeniGenislik, $yeniYukseklik);
$kaynak = imagecreatefromjpeg($dosya);

// Görüntüyü örnekleyelim
imagecopyresampled($hedef, $kaynak, 0, 0, 0, 0, $yeniGenislik, $yeniYukseklik, $genislik, $yukseklik);

// Görüntüyü çıktılayalım
imagejpeg($hedef, null, 100);
?>

Böylece bize, url'si verilen bir görseli %50 küçülten kendimize ait bir url'miz var.
Diyelim ki siz görsellerinizi şu şekilde gösteriyordunuz:

<img src="https://www.gravatar.com/avatar/81b67dbba3bd3f9317db992d098d3fc0?s=80&d=mp&r=g" />
<img src="https://www.gravatar.com/avatar/150c62d1d24332b2d2d39ac57ae902a0?s=80&d=mp&r=g" />

Artık böyle göstermesiniz:

<img src="kucult.php?url=https://www.gravatar.com/avatar/81b67dbba3bd3f9317db992d098d3fc0?s=80&d=mp&r=g" />
<img src="kucult.php?url=https://www.gravatar.com/avatar/150c62d1d24332b2d2d39ac57ae902a0?s=80&d=mp&r=g" />

Yani görselinizin url'sini, kucult.php sayfanıza url key'i ile get parametresi olarak göndermelisiniz.

Bu yöntem çok da kullanışlı olmayacaktır. Çok sayıda görsel için PHP'yi (yani sunucuyu) her seferinde yormuş olacaksınız.

Eğer bu görsellerin boyutlandırılmış hallerini sunucunuza kaydetme imkânınız varsa daha performanslı bir işlem yapmış olursunuz.

Aslında bu işi front-end tarafında çözmeniz çok daha verimli olacaktır. Görsellere bir lazyload işlemi uygulamalısınız. Görsel ekranda görünmüyorsa html'inizden (DOM'dan) kalkmalı ve böylece tarayıcı o görseli konumlandırmakla uğraşmamalı. Front-end tarafında hangi teknolojiyi (JQuery, React, Vue, Svelte, Angular...) kullandığınızı bilemiyorum ama hepsinde bir lazyload modülü/plugin'i bulabilirsiniz.
JQuery için lazyload örneği olarak Google'da arama yaptığımda karşıma şöyle bir örnek çıktı:
JQuery ile Lazy Load Kullanarak Image Yükleme