Best Practices: Práca s obrázkami
Optimalizujte obrázky
Optimalizácia jednoducho znamená zachovanie veľkosti obrázku Small zachovaní kvality obrazu na požadovanej úrovni. Existuje veľa postupov, ktoré raz môžu vykonávať pre optimalizáciu snímok, než sú naložené na serveri pre doručenie. Nástroje, ktoré používame pre tvorbu týchto obrazov (Photoshop, Fireworks, atď) zvyčajne majú nástroje, ktoré umožňujú užívateľom optimalizovať obraz pre webové použitie.
• Skontrolujte, GIF, či sa pomocou palety veľkosti zodpovedajúce počtu farieb v obraze. Keď obraz je pomocou 4 farieb a 256 farebnú paletu, potom obrázok by mohol byť ďalej optimalizovaná
• Prevod GIF je tam, kde je to možné PNG a zistiť, či tam je úspora. Viac často ako ne, tam je. Neváhajte a používanie PNG, pretože sú plne podporuje väčšinu bežne používaných prehliadačov. Očakávajte z animačných schopností PNG môžu robiť, čo robí GIF, vrátane transparentnosti.
• U obrázkov používaných v CSS škriatkov, usporiadať obrázky v škriatka vodorovne, na rozdiel od vertikálne obvykle vyústi v menšej veľkosti súboru. Tiež kombinovať snímky s podobnými farbami v sprite. To vám pomôže udržať farba počet nízky, v ideálnom prípade za 256 farieb tak, aby sa zmestili do PNG8.
• Ak používate favicon.ico, aby to malé, najlepšie pod 1K.
Používajte správne zmenšený / zmení veľkosť obrazu.
Vždy vyskúšať a používať zmenšeniny obrázkov, tj nepoužívajte väčší obrázok ako potrebujete len preto, že si môžete nastaviť šírku a výšku v HTML. Ak potrebujete zobraziť 100px X 100px obrázok na stránke, potom nepoužívajte zmenšenou 200x200px obrazu.
Použitie progresívny obrázky
Webový prehliadač už vykresľuje obrázky postupne. Ak chcete ešte lepšie, jednoducho uložiť GIF alebo PNG obrázky s "prekladaný" možnosť voľby, alebo vaše obrázky vo formáte JPEG s "progresívne" možnosť voľby.
Tam je pokračujúci debata medzi webovými užívateľovi, či použitie progresívneho obrazu je požehnanie alebo prekážkou. Tiež progresívny obraz váži približne o 20% viac než jeho náprotivok non progresívne. Takže, Ak si myslíte, že rozloženie používa obrázky, ktoré nebudú brzdí užívateľská skúsenosť tým, že sú progresívne, neváhajte tak urobiť.
