Autor Zpráva
David Makovský
Profil
Jen takový rychlý dotaz. Z hlediska optimalizace datové velikosti obrázků s cílem zrychlit načítání stránky, se doporučuje používat atributy udávající prostor pro obrázek. Stránka se načte "rychleji", i když to je asi sporné. Ale hlavně neposkakuje při načítání. A tak nějak je to prostě obecně doporučované atributy používat.

Ovšem na druhou stranu, pokud pomocí width a height snížím rozměry obrázku řekněme z 1200px délky na 300px délky, tak obrázek se sice zobrazuje menší, ale datová velikost v kb je stále stejná že? Načítá se přeci stále stejný soubor. Tedy z hlediska optimalizace atributy width a height ano, ale používat obrázek stejných rozměrů. Pravda?

Děkuji za objasnění, David.
SwimX
Profil
David Makovský:
velikost v B bude samozřejmě stejná, obrázek se nezmenší, přenese se k uživateli stejně velký a tam ho prohlížeč vykreslí menší (rozměrově). Takže pokud například web automaticky zmenšuje obrázky na 2 velikosti: náhledy 150*150 a velké obrázky 1024*x a ty potřebuješ na jedné stránce mít náhledy 50*50 ale jinak používáš oněch 150*150, tak si pomůžeš tím width a height, aby se obrázky vykreslily menší, než ve skutečnosti jsou a budeš ignorovat těch několik málo B, které se přenesou navíc (než kdyby existovaly ve veliksoti 50*50)

Co se týče rychlejšího načítání, tak to nevím, ale minimálně stránka neposkauje, přesně tak.

Tedy z hlediska optimalizace atributy width a height ano, ale používat obrázek stejných rozměrů. Pravda?
Můžeš i jiných (menších) nebo uvést jen jeden atribut a druhý se sám dopočítá. Výhoda = stránka neposkakuje, nebo pokud by byl obrázek obří - nebude přelézat přes kraje stránky. Nevýhoda - při jiné než originální velikosti se přenese stejně originální obrázek (velikost B). Při vetší velikosti nebo nezachování proporcí se obrázek deformuje.
Tomáš123
Profil
David Makovský:
Je pravda, že atribúty width a height pomáhajú ku "neskákani" stránky a dopredu určujú kde sa bude obrázok nachádzať resp. aký priestor zaberie, ale nie je vhodné používať veľký obrázok, keď chceš zobraziť malý (ak to nie je v rozpor s tým čo napísal SwimX). V takom prípade si radšej veľký obráz uprav na menší a tak ušetríš aj cenné kilobajty.

ale datová velikost v kb je stále stejná že?
Jasné, že je stále rovnaká, veď načítavaš stále ten istý obrázok.
Chamurappi
Profil
Reaguji na SwimXe:
uvést jen jeden atribut a druhý se sám dopočítá. Výhoda = stránka neposkakuje
Při jednom atributu poskakovat bude, pokud obrázek není čtvercový, protože ten druhý rozměr se může správně dopočítat až v okamžiku, kdy se natáhne hlavička obrázku.
David Makovský
Profil
Díky, dopisuju blog o optimalizaci produktových obrázků, tak jsem si to potřeboval potvrdit u profíků.

A ještě ze zvědavosti, kdysi jsem četl o tom, že se používá nějaký filtr, který přímo snižuje / ovlivňuje kvalitu jpeg obrázků. Bylo to něco ve smyslu add_filter jpeg_quality nebo full_quality, to je php? Nevíte jak to funguje? Nevím zda to máme klientům doporučovat nebo ne. Díky, David.
CZghost
Profil
David Makovský:
Bylo to něco ve smyslu add_filter jpeg_quality nebo full_quality, to je php? Nevíte jak to funguje?
Ano, existují funkce knihovny GD image, které jsou zakomponované v PHP od verze 4. Tady je skript, který natáhne obrázek pomocí URL:
<?php
$if(isset($_GET['obrazek'])) {
    $obrazek = $_GET['obrazek'];   // tímto obcházím vypnuté register_globals
} else {
    exit("<strong>Chyba!</strong> Nebyl předán odkaz na zdrojový obrázek!"); // ukončí skript při neúspěchu
}

$obrazek = urldecode($obrazek);    // zbavím se odporných znaků v URL (předpokládám, že autor používá konvenční názvy: malá písmena bez diakritiky, číslice a povolené speciální znaky - spojovník a podtržítko).
$obr = imagecreatefromjpeg($obrazek); // natáhnu obrázek do paměti
$new = imagecreatetruecolor(150,150); // vytvořím si nový obrázek, kam natáhnu prázdnou bílou plochu
imagecopyresampled($new,$obr,0,0,0,0,150,150,imagesx($obr),imagesy($obr)); // zkopíruju a zmenším obrázek do nového
imagedestroy($obr);  // uvolním paměť
$obr = $new;         // nahradím obsah uvolněné paměti novým obrázkem
header("Content-Type: image/jpeg"); // nastavím hlavičku na JPEG obrázek
imagejpeg($obr,null,60); // vykreslení obrázku JPG do prohlížeče s 60% kvalitou (null označuje, že se obrázek nebude zapisovat do souboru
imagedestroy($obr);      // uvolnění paměti
imagedestroy($new);      // nový obrázek už také není potřeba
?>
yFang
Profil
CZghost:
Používat tohle při každém zobrazování obrázku je šílenost, bude to zbytečně zatěžovat server a zpomalovat web. Určitě to použít jen jednou a miniatury cachovat.
David Makovský
Profil
Článek o optimalizaci obrázků z hlediska rychlosti načítání je dopsán. Díky všem za rady, uplatnil jsem je v odstavci TIP#2 a TIP#3. Ještě jednou díky, David.
Bubák
Profil
David Makovský:
Článek o optimalizaci obrázků z hlediska rychlosti načítání je dopsán.
U Photoshopu jsem nenašel, zda a kde jde nastavit podvzorkování barev. Že by to Photoshop při ukládání pro vb neumožňoval? To se opravdu ptám.
U Photoshopu článek nezmiňuje, jak nastavit metadata, na obrázku je Vše, kromě informací o fotoaparátu. Z Metadat je nejvíce potřena pro EXIF náhled a ten se při takovém nastavení uloží.
U online nástroje Kraken se míše, že „jeho použití je omezeno velikostí obrázku 1mb“, ale jeden milibajt je velice málo a nebude to stačit ani pro pidiobrázky.
David Makovský
Profil
Volba „uložit pro web“ používá vzorkování automaticky. Pro volbu kvality 0 - 50 je to 4:2:0 a pro 51 - 100 je to 4:4:4. A právě druhá varianta, tedy bez vzorkování se může zdát jako plýtvání, ale na druhou stranu nešetrné podvzorkování se vždy projeví na kvalitě obrazu. Tady je nastavení opravdu individuální. No a klasická volba „uložit jako“ a následně jpeg, nabízí možnost Volby obrazu (image options) a to je také nastavení vzorkování. Předpokládám, že „uložit jako“ provádí i další optimalizační kroky, ne jen kódování barev.

Tohle všechno je ale na velmi dlouho diskuzi, a jiné vlákno, možná i jiné forum :)

Nám se u produktové fotografie osvědčilo nastavení 4:2:0, tedy snížení na polovinu v obou směrech. Jen je nutné si dávat pozor na obrazové artefakty. Vysoké podvzorkování se totiž vždy projeví u barevných přechodů.

A díky za feedback, mb opraveno a metadata u PS přidány.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: