[PHP]zmniejszanie wagi strony. zmniejszanie obrazka z serwera? Opcje

[japolak]

witam

od jakiegos czasu mysle nad optymalizacja mojej stronki ..bo google slono ją traktuje 50% oceną w tej kwestii.

najwiekszym mankamentem jest to iż strona ładuje sobie duzo obrazów. w pełnej rozdzielczości. a pozniej html sobie to skaluje lub css ( w zależności w jakim czasie pisalem dany element strony - stronka ma okolo 4 latka).

i chodzi mi o to czy można za pomocą php lub innego narzędzia z serwera pobierać pomnijeszone pliki na strone.

czyli na serwerze mam np fullhd.. a php w locie przy otwieraniu strony mi przerabia to wszystko na miniaturki 200x150px ?

jak to sie ma do wydajnosci strony. czy nie obciązy to zbytnio serwera? jak to sie ma do wagi strony? czy to rzeczywiście może wpłynąc na wielkość czas ładowania ?

[Beniooo]

Potrzebne biblioteki GD

[PHP] pobierz, plaintext 
$source = "source_image.jpg";
$dest = "resized_image.jpg";
$quality = 100;
$scale = 0.5;
 
$imsize = getimagesize($source);
$x = $scale * $imsize[0];
$y = $scale * $imsize[1];
 
$im = imagecreatefromjpeg($source);
$newim = imagecreatetruecolor($x,$y);
imagecopyresampled($newim, $im, 0, 0, 0, 0, $x, $y, $imsize[0], $imsize[1]);
imagejpeg($newim, $dest, $quality);
[PHP] pobierz, plaintext 

Powyższy skrypt przeskaluje o połowę, jeśli chcesz inne proporcje - zmieniasz zmienną scale

Ten post edytował Beniooo 31.03.2014, 21:47:49

[vonski]

Można skalować "w locie" obrazki, tylko że takie podejście jest trochę bez sensu. Tzn. osiągniesz z pewnością cel zmniejszenia wagi strony, ale po co wykonywać tę samą czynność przy każdym requeście? Chyba lepszym pomysłem jest napisać skrypt, który będzie skalował obrazek i go zapisywał w danej lokalizacji, a potem przy każdym kolejnym żądaniu do danego obrazka będzie go po prostu zaciągał stamtąd, a nie skalował od nowa i od nowa. W ogóle, najlepiej by było po prostu przeskalować te obrazki samemu i już. Nawet jeśli masz ich dużo to raczej skalowanie jest tak powtarzalnym procesem, że można do niego utworzyć akcję w Photoshopie (jest pełno poradników w sieci jak to zrobić), ale pewnie i kilka innych sposobów by się znalazło do "hurtowego" resize-u.
Co do Twojego pytania o wydajność i wagę strony. Wydajność nie ucierpi bardzo, zwłaszcza (albo pod warunkiem, zależy ile tych obrazków masz na każdej podstronie) jak zrobisz to w opisany powyżej sposób - czyli skalujesz, zapisujesz do określonej lokalizacji, a w skrypcie sprawdzasz czy dany obrazek tam istnieje, jeśli tak, to go wyświetlasz, jeśli nie... skalujesz, zapisujesz i wyświetlasz (IMG:style_emoticons/default/smile.gif) W ten sposób, po jakimś czasie "same" się przeskalują. Waga siłą rzeczy pójdzie w dół, natomiast o ile, to już zależy od obrazków i ich ilości. Czy czas ładowania drastycznie się zmniejszy? Tak samo - zależy. Inna rzecz, że na czas ładowania, oprócz wagi, wpływa też ilość żądań do danych zasobów. Jest to dość istotne zwłaszcza przy rozbudowanych stronach. Jeśli używasz np. właściwości CSS background-image do wyświetlania różnych ikon, buttonów i innych tego typu pierdółek, powinieneś połączyć te obrazki w jeden obrazek i wyświetlać je za pomocą kombinacji background-image i background-position (to tzw. CSS sprite). Dlaczego jest to korzystne? Powiedzmy, że masz 4 buttony, każdy ma dwa stany - normalny i hover, dla każdego stanu masz oddzielny obrazek, co w sumie daje 8 różnych obrazków. 8 obrazków = 8 oddzielnych żądań. Łączysz w jeden obrazek i masz jedno żądanie. I mowa tu tylko o 4 głupich przyciskach (IMG:style_emoticons/default/wink.gif) Optymalizacja pod tym kątem powinna zbić czas ładowania o pareset milisekund, też w zależności ile masz obrazków nadających się na sprite'y.