Počuli ste, že web sa stal vizuálnym a skvelé obrázky vo vašom firemnom webe sú dôležité.
Ale tieto obrázky môžu byť metlou vašich návštevníkov webových stránok. Obrázky predstavujú 1 MB z priemernej webovej stránky 1,7 MB.
To nemusí byť veľkým problémom pre návštevníkov v stolových počítačoch s vysokorýchlostným pripojením na Internet. Ak však vidíte alebo chcete zvýšiť návštevnosť návštevníkov mobilných zariadení, mohli by tieto obrázky predstavovať problém. Webové stránky s vysokým rozlíšením môžu trvať dlhší čas na stiahnutie. Návštevníci sú frustrovaní a opúšťajú vaše stránky.
$config[code] not foundMožno ste zaviedli zodpovedajúci dizajn webu a mysleli si, že rieši všetky mobilné problémy. A je pravda, že zodpovedný dizajn webových stránok rieši niektoré problémy. Automaticky usporiada a zobrazí prvky vášho webu, ktoré sa dajú zobraziť na menších a užších mobilných obrazovkách.
Ale zodpovedný dizajn webových stránok nie je odpoveďou na všetko. Nevyhnutné riešenie problému sťahovania obrázka. Dokonca aj s citlivým dizajnom sa mnohýkrát tieto ťažké obrázky stále preberajú. Ako odborník na webový výkon Yoav Weiss stručne poukazuje na webovú stránku opery:
"Reagujúci dizajn webových stránok RWD kombinoval nové možnosti prehliadača a technológie CSS na vytvorenie webových stránok, ktoré sa prispôsobia zariadeniu, ktoré ich zobrazuje, a vyzerajú ideálne všade. To umožnilo vývojárom zastaviť starosti o nespoľahlivú detekciu zariadení a myslieť na ich webové stránky z hľadiska rozmerov výrezu.
Ale aj keď stránky RWD vyzerali inak na každom zariadení, väčšina z nich naďalej sťahovala tie isté zdroje pre všetky zariadenia. "
Nové
Ak neviete nič o kóde HTML, netechnická definícia je: je to špeciálny jazyk. Pri použití v zákulisí vo vašom kóde webových stránok tento jazyk poskytuje pokyny, ako by mal prehliadač zobrazovať text a obrázky. Nový prvok Obrázok je typ HTML značkovacieho jazyka. Je to napísané takto (v skupine Responsive Images Community Group): Prvok obrazu je ohľaduplný snímky, nereaguje dizajn. Pre netechnických podnikateľov sa tento rozdiel môže zdať malý. Ale pokiaľ ide o výkon vašich stránok v mobilných zariadeniach, môže to byť významné. Podľa správy spoločnosti ArsTechnica sa nový značkovací prvok zaoberá problémami spôsobenými obrazmi, ktoré boli určené na zobrazenie na plnohodnotnom monitore - obrázky, ktoré sa prekladajú do mobilných zariadení.
"Keď sa prehliadač stretne s prvkom Picture, najprv vyhodnotí akékoľvek pravidlá, ktoré môže webový vývojár špecifikovať. *** Potom, po vyhodnotení rôznych pravidiel, prehliadač vyberá najlepší obraz na základe vlastných kritérií. Toto je ďalšia pekná funkcia, pretože kritériá prehliadača môžu obsahovať vaše nastavenia. Napríklad budúce prehliadače môžu ponúkať možnosť zastaviť obrázky s vysokým rozlíšením pri nahrávaní cez 3G, bez ohľadu na to, čo by mohol obsahovať nejaký prvok Picture na stránke. Akonáhle prehliadač vie, ktorý obraz je najlepšou voľbou, skutočne načíta a zobrazí tento obrázok v starom starom img prvku. … čo sa stane, obrázok obalí značku img. Ak je prehliadač príliš starý, aby vedel, čo má robiť Nie všetci vývojári najskôr prijali nový prvok Obraz. Príbeh spoločnosti Ars Technica načrtáva proces, ktorý lídri v komunite vývoja webu prešli, aby sa dostali až k bodu, kde $config[code] not found Problém sa však teraz objavuje, keď sa prijme nový prvok HTML obrázka.
Ako podnikatelia je dôležité vedieť to Implementácia prvku HTML obrázka pre obrázky je niečo, čo sa s vaším webovým vývojárom prediskutuje. Technicky zmýšľajúci a do-it-yourselfers môžu ísť sem, aby sa naučili používať prvok Picture. Je to skvelý zápis Scottom Gilbertsonom. Neváhajte a implementujte
Obrázky: Shutterstock; RICG Čo je element HTML obrázka?
Kľúčové body o
