Du har hört att webben har blivit mer visuell och bra bilder på din företagswebbplats är viktiga.
Men de här bilderna kan vara svåra för dina besökare på webbplatsen. Bilderna står för 1 MB av den 1,7 MB som den genomsnittliga webbsidan innehåller.
Det här kan inte vara mycket av ett problem för dina besökare på stationära datorer med höghastighetsinternetanslutningar. Men om du ser eller vill se ökad trafik från mobila besökare kan dessa bilder vara ett problem. Bildtunga webbsidor kan ta lång tid att ladda ner. Besökare blir frustrerade och lämnar din webbplats.
$config[code] not foundDu kan ha genomfört en lyhörd webbdesign, som tänker lösa alla dina mobila problem. Och det är sant att en lyhörd webbdesign löser några problem. Det ordnar automatiskt och visar dina sidelement att visas på mindre, smalare mobila skärmar.
Men lyhörd webbdesign är inte svaret på allt. Det löser inte nödvändigtvis problemet med nedladdning av bild. Även med responsiv design, många gånger laddas dessa tungviktiga bilder ändå ändå. Som webbprestationsspecialist Yoav Weiss påpekar kortfattat på opera-webbplatsen:
"Responsive Web Design RWD kombinerar nya webbläsarfunktioner och CSS-tekniker för att skapa webbplatser som anpassar sig till enheten som visar dem och ser perfekt överallt. Det gjorde det möjligt för utvecklare att sluta oroa sig för opålitlig enhetsdetektering och tänka på sina webbplatser när det gäller visningsdimensioner.
Men trots att RWD-webbplatser såg annorlunda ut på varje enhet, under, fortsatte de flesta av dem att hämta samma resurser för alla enheter. "
Den nya
Om du inte vet något om HTML-kod är en icke-teknisk definition: det är ett specialt språk. När det används bakom kulisserna i din webbkod, ger det här språket instruktioner för hur webbläsaren ska visa texten och bilderna. Det nya bildelementet är en typ av HTML-märkningsspråk. Det är skrivet så här (per gruppen Responsive Images Community): Bildelementet handlar om lyhördhet bilder, inte lyhörd design. Till icke-tekniska affärsmän kan den skillnaden verka liten. Men när det gäller webbplatsens prestanda på mobila enheter kan det vara betydande. Enligt en ArsTechnica-rapport hanterar det nya markupelementet problemen som orsakats av bilder som var avsedda att ses på en fullskärmsmonitor - bilder som inte översätter bra till mobila enheter. De
"När webbläsaren möter ett bildelement utvärderar den först de regler som webbutvecklaren kan ange. *** Sedan, efter att ha utvärderat de olika reglerna, väljer webbläsaren den bästa bilden utifrån sina egna kriterier. Det här är en annan bra funktion eftersom webbläsarens kriterier kan innehålla dina inställningar. Till exempel kan framtida webbläsare erbjuda ett alternativ att stoppa högupplösta bilder från att laddas över 3G, oavsett vilket bildelement som helst på sidan kan säga. När webbläsaren vet vilken bild som är det bästa valet laddar det faktiskt och visar den bilden i ett bra gammalt img-element. … vad händer är Picture wraps en img tagg. Om webbläsaren är för gammal för att veta vad man ska göra av a Inte alla utvecklare accepterade det nya bildelementet först. Ars Technicas historia beskriver processen som ledare i webbutvecklingssamhället gick igenom för att komma till den punkt där $config[code] not found Men problemet uppstår nu avgjort, med det nya HTML-elementet som antas. De
Som affärsmän är det viktigt att veta det Genomförandet av Picture HTML-elementet för bilder är något att diskutera med din webbutvecklare. Tekniskt sinnena och de som gör det själv kan gå här för att lära sig hur man använder bildelementet. Det är en utmärkt skrivning av Scott Gilbertson. Känn dig fri att genomföra
Bilder: Shutterstock; RICG Vad är Picture HTML Element?
Viktiga punkter om
