Autor | Zpráva | ||
---|---|---|---|
David Makovský Profil |
#1 · Zasláno: 8. 5. 2014, 17:20:41
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 |
#2 · Zasláno: 8. 5. 2014, 17:30:20
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 |
#4 · Zasláno: 8. 5. 2014, 18:14:45
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 |
#5 · Zasláno: 9. 5. 2014, 15:53:33
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 |
#6 · Zasláno: 9. 5. 2014, 16:26:44
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 |
#7 · Zasláno: 9. 5. 2014, 21:29:21
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. |
||
Časová prodleva: 5 dní
|
|||
David Makovský Profil |
#8 · Zasláno: 15. 5. 2014, 00:33:55
Č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 |
#9 · Zasláno: 15. 5. 2014, 04:43:10
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. |
||
Časová prodleva: 4 dny
|
|||
David Makovský Profil |
#10 · Zasláno: 18. 5. 2014, 19:22:53
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. |
||
Časová prodleva: 11 let
|
0