De nieuwe HTML-code voor afbeeldingen kan ervoor zorgen dat uw website sneller wordt geladen

Inhoudsopgave:

Anonim

U hebt gehoord dat het web meer visueel is geworden en dat fantastische afbeeldingen op uw bedrijfswebsite belangrijk zijn.

Maar die afbeeldingen kunnen de plaag van de bezoekers van uw website zijn. Afbeeldingen zijn goed voor 1 MB van de 1.7 MB die de gemiddelde webpagina bevat.

Dit is misschien geen probleem voor uw bezoekers op desktopcomputers die gebruikmaken van high-speed internetverbindingen. Als u echter meer verkeer van mobiele bezoekers ziet of wilt zien, kunnen die afbeeldingen een probleem vormen. Webpagina's met veel afbeeldingen kunnen lang duren om te downloaden. Bezoekers raken gefrustreerd en verlaten uw site.

$config[code] not found

Mogelijk hebt u een responsief webontwerp geïmplementeerd, omdat u denkt dat dit al uw mobiele problemen oplost. En het is waar dat een responsief webontwerp enkele problemen oplost. Het zorgt ervoor dat uw site-elementen automatisch worden gerangschikt en weergegeven voor weergave op kleinere, smallere mobiele schermen.

Maar responsief webontwerp is niet het antwoord op alles. Dit lost het probleem met het downloaden van afbeeldingen niet noodzakelijk op. Zelfs met een responsief ontwerp worden deze zware beelden vaak nog steeds gedownload. Als webspecialist wijst Yoav Weiss kort op de website van Opera:

"Responsive Web Design RWD combineerde nieuwe browsermogelijkheden en CSS-technieken om websites te maken die zich aanpassen aan het apparaat dat ze weergeeft, en zien er overal perfect uit. Dat stelde ontwikkelaars in staat zich niet langer zorgen te maken over onbetrouwbare apparaatdetectie en dacht aan hun websites in termen van viewport-dimensies.

Maar hoewel RWD-sites er op elk apparaat anders uitzagen, bleven de meeste van hen dezelfde bronnen downloaden voor alle apparaten. "

De nieuwe HTML-code-element kan dat veranderen.

Wat is The Picture HTML Element?

Als u niets weet over HTML-code, is een niet-technische definitie: het is een speciale taal. Wanneer deze taal achter de schermen in uw websitecode wordt gebruikt, geeft deze instructies hoe de browser de tekst en afbeeldingen moet weergeven.

Het nieuwe element Afbeelding is een HTML-opmaaktaal. Het is zo geschreven (per de Responsive Images Community Group):

Het Picture-element gaat over responsief afbeeldingen, niet ontvankelijk ontwerp.

Voor niet-technische zakenmensen lijkt dit onderscheid misschien klein. Maar als het gaat om de prestaties van uw site op mobiele apparaten, kan dit aanzienlijk zijn.

Volgens een ArsTechnica-rapport behandelt het nieuwe markup-element de problemen veroorzaakt door afbeeldingen die bedoeld waren om te worden gezien op een monitor op ware grootte - afbeeldingen die niet goed vertalen naar mobiele apparaten. De opmaakcode vertelt webbrowsers zoals Firefox om de juiste (lees: kleinere) afbeeldingen te laden en weer te geven:

"Wanneer de browser een illustratie-element tegenkomt, evalueert het eerst eventuele regels die de webontwikkelaar zou kunnen specificeren. *** Vervolgens, na het evalueren van de verschillende regels, kiest de browser de beste afbeelding op basis van zijn eigen criteria. Dit is een andere leuke functie omdat de criteria van de browser je instellingen kunnen bevatten. Toekomstige browsers bieden bijvoorbeeld een optie om te voorkomen dat afbeeldingen met hoge resolutie worden geladen via 3G, ongeacht wat een element van Picture op de pagina zou kunnen zeggen. Zodra de browser weet welke afbeelding de beste keuze is, wordt deze afbeelding daadwerkelijk geladen en weergegeven in een goed oud img-element.

… wat er gebeurt, is de afbeelding die een img-tag omhult. Als de browser te oud is om te weten wat te doen van een element, dan laadt het de fallback img tag. Alle toegankelijkheidsvoordelen blijven bestaan ​​omdat het alt-attribuut nog steeds op het img-element staat. "

Niet alle ontwikkelaars accepteerden aanvankelijk het nieuwe element Picture. Het verhaal van Ars Technica schetst het proces dat leiders in de webontwikkelingsgemeenschap hebben doorlopen om het punt te bereiken waar het element staat vandaag. Onderweg was er zelfs een succesvolle crowdfundingcampagne op Indiegogo met een gitaarspel van Weiss.

$config[code] not found

Maar het probleem lijkt nu opgelost, waarbij het nieuwe HTML-beeldelement wordt overgenomen.

Belangrijke punten over het Element

De opmaakelement komt binnenkort in een browser bij u in de buurt. Tegen het einde van 2014 wordt de ondersteuning ervan naar verwachting standaard ingeschakeld in de Chrome- en Firefox-browsers. Opera is ook onderweg. En de nieuwste versie van de Safari-browser van Apple lijkt ook in de maak. Microsoft overweegt het voor Internet Explorer, volgens ArsTechnica.

Als zakenmensen is een belangrijk ding om te weten dat markup kan uw website versnellen, vooral op mobiele apparaten. Dat zou goed zijn voor uw sitebezoekers.

Het implementeren van het HTML-beeldelement voor afbeeldingen is iets dat moet worden besproken met uw webontwikkelaar. De technisch ingestelde en de doe-het-zelvers kunnen hierheen gaan om te leren hoe het beeldelement te gebruiken. Het is een uitstekend artikel van Scott Gilbertson.

Voel je vrij om te implementeren markup in uw websitecode nu. Zelfs als een browserprogramma de nieuwe markup niet begrijpt, is er een terugvalopdracht om standaard HTML-afbeeldingstags te gebruiken, schrijft Gilbertson.

Afbeeldingen: Shutterstock; RICG

9 Opmerkingen ▼