`-elementen die volgende-generatie formaten bevatten die *ook* transparantie ondersteunen - zoals WebP, JPEG 2000 en AVIF - daarbovenop worden gebruikt.
+
+Overweeg op dezelfde manier om geanimeerde WebP's of gedempte, geloopte, autoplaying MP4's bovenop geanimeerde GIF's te stapelen (hoewel het mixen van video's en afbeeldingen gevolgen zal hebben voor de opmaakbenadering en de mediabewerkingsbehoeften).
+
+Er zijn drie aspecten waarmee u rekening moet houden bij het implementeren van formaatwisseling:
+
+- Het browserformaat ondersteunt landschap
+- De mediapijplijn van een site: de processen die het gebruikt om de benodigde media in verschillende formaten te creëren
+- Het implementeren van de opmaak om browsers te vertellen welke formaten worden aangeboden en wanneer ze elk moeten selecteren
+
+Verschillende Dynamic Media Services en Image CDN's kunnen dit aanzienlijk vereenvoudigen door het te automatiseren en te trachten het steeds veranderende ondersteuningslandschap van browserformaten te volgen en er mee te synchroniseren.
+
+Let op: hoewel AVIF wordt ondersteund in Chrome sinds versie 85 (uitgebracht eind augustus 2020), zijn de gegevens voor deze Almanac voornamelijk van vóór deze tijd. Als u echter een ad-hoczoekopdracht uitvoert op recentere gegevens van begin november 2020, worden tienduizenden AVIF-verzoeken weergegeven.
+
+##### Picture: media art direction
+
+De media *art direction*-mogelijkheden die worden geboden door het ``-element stellen ons in staat om het soort geavanceerde viewport-afhankelijke mediamanipulatie te bieden waarvan we al een tijdje genoten bij het ontwerpen van lettertypen en lay-outs.
+
+Bedenk hoe slecht landschapsgeoriënteerde media met zeer brede en korte beeldverhoudingen (zoals banners) werken wanneer ze in smalle, portretgeoriënteerde mobiele lay-outs worden geperst. Het aanpassen van de uitsnede of inhoud van afbeeldingen op basis van mediaquery's is naar onze mening een onderbenutte mogelijkheid.
+
+In dit voorbeeld veranderen we de aspectverhouding van de aangeboden media, van vierkant (1:1) naar 4:3 en uiteindelijk 16:9, afhankelijk van de viewport-breedte, waarbij we proberen de beschikbare ruimte voor onze media zo goed mogelijk te gebruiken:
+
+```html
+
+
+
+
+
+
+```
+
+##### Picture: oriëntatie schakelen
+
+Hoewel uit de gegevens blijkt dat slechts iets minder dan 1% van de pagina's die `` gebruiken, gebruik maakt van oriëntatie, voelt dit als een gebied dat verdere verkenning van website-ontwerpers en -ontwikkelaars rechtvaardigt.
+
+{{ figure_markup(
+ image="picture-usage-of-orientation.png",
+ alt="Picture gebruik van oriëntatie.",
+ caption="`` gebruik van oriëntatie.",
+ description="Staafdiagram dat laat zien dat 0,93% van de desktoppagina's en 0,91% van de mobiele pagina's `` met oriëntatie gebruikt. 0,59% van de gevallen van `` op desktop en 0,60% bij mobiel gebruik.",
+ chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTLNnD9VNqXNxMu60VovxIEp_L6vmNo1oWt8-C18DOetXB3qIkee_-KjZwYYPIkkIM-7So-5wBwQ4QY/pubchart?oid=56906843&format=interactive",
+ sheets_gid="283790776",
+ sql_file="picture_orientation.sql"
+ )
+}}
+
+Mobiele apparaten hebben kleine, vernauwde kijkvensters en kunnen gemakkelijk in de hand worden omgeschakeld van portret- naar landschapsmodus. Er is een interessant, onderbenut potentieel voor het gebruik van de oriëntatiemediaquery.
+
+Voorbeeld syntaxis:
+
+```html
+
+
+
+
+
+```
+
+### Effectief gebruik van beeldformaten
+
+Het gebruik van het juiste afbeeldingsformaat en de mogelijkheden die het formaat biedt, is van cruciaal belang om effectief gebruik te maken van media op webpagina's.
+
+#### MIME-typen versus extensies
+
+We hebben een hoge spreiding van extensies en verschillende spellingen van dezelfde extensie waargenomen (bijv. `Jpg` versus `JPG` versus `jpeg` versus `JPEG`). In sommige gevallen is het MIME-type ook verkeerd opgegeven. Bijvoorbeeld - `image/jpeg` is het juiste en herkende MIME-type voor JPEG-afbeeldingen. We kunnen echter zien dat 0,02% van alle pagina's die JPEG gebruiken het verkeerde MIME-type hebben gespecificeerd. Verder kunnen we zien dat de extensie `pnj` 28.420 keer werd gebruikt (waarschijnlijk een typfout) en dat de MIME-tijd was ingesteld op `image/jpeg`.
+
+{{ figure_markup(
+ image="image-usage-by-extension.png",
+ caption="Afbeeldingsgebruik per extensie.",
+ description="Staafdiagram met beeldgebruik per extensie. `jpg` is het meest gebruikte formaat met 40,26% van mobiel, `png` is de volgende met 26,90%, gevolgd door geen extensie met 17,44%, `gif` met 6,59%, `svg` met 3,13%, `ico` met 1,83 % en `jpeg` op 1,36%. Desktop is vergelijkbaar qua gebruik.",
+ chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTLNnD9VNqXNxMu60VovxIEp_L6vmNo1oWt8-C18DOetXB3qIkee_-KjZwYYPIkkIM-7So-5wBwQ4QY/pubchart?oid=1607248506&format=interactive",
+ sheets_gid="402973893",
+ sql_file="image_mimetype_ext.sql"
+ )
+}}
+
+We hebben verdere inconsistenties gezien tussen extensies en MIME-typen - bijvoorbeeld `.jpg`s geleverd met een MIME-type van `image/webp`, maar het is waarschijnlijk dat sommige hiervan natuurlijke artefacten zijn die worden veroorzaakt door Image CDN-bezorgservices met snelle transformatie- en optimalisatiemogelijkheden.
+
+#### Progressieve JPEG's
+
+Hoe vaak komen progressieve JPEG-bestanden voor? WebPageTest geeft elke pagina een "score", die alle JPEG-bytes die zijn geladen uit progressief gecodeerde JPEG's bij elkaar optelt en deze deelt door het totale aantal JPEG-bytes dat progressief gecodeerd *had* kunnen worden. De meerderheid (57%) van de pagina's vertoonde progressief minder dan 25% van hun JPEG-bytes. Dit vertegenwoordigt een grote kans voor no-downsides compressiebesparingen, die nog moeten worden benut ondanks jarenlange progressieve JPEG's die een best practice zijn en moderne encoders zoals MozJPEG die standaard progressief coderen.
+
+{{ figure_markup(
+ image="progressive-jpeg-score.png",
+ caption="Progressieve JPEG-score.",
+ description="Staafdiagram met progressieve JPEG-score. Desktop- en mobiel gebruik is ongeveer hetzelfde. 13,72% van de mobiele pagina's heeft een score < 0, 57,77% heeft een score van 0-25, 7,53% heeft een score van 25-50, 5,79% heeft een score van 50-75 en 15,19% heeft een score van 75- 100.",
+ chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTLNnD9VNqXNxMu60VovxIEp_L6vmNo1oWt8-C18DOetXB3qIkee_-KjZwYYPIkkIM-7So-5wBwQ4QY/pubchart?oid=1693689151&format=interactive",
+ sheets_gid="1834242483",
+ sql_file="score_progressive_jpeg.sql"
+ )
+}}
+
+### Microbrowsers
+
+Laten we nu eens kijken naar het onderwerp microbrowsers . Ook bekend als "linkontwikkelaars" en "linkuitbreiders", dit zijn de user agents die webpagina's opvragen en stukjes en beetjes van ze pakken om rijke previews samen te stellen wanneer links worden gedeeld in berichten of op sociale media. De *lingua franca* van microbrowsers is het Open Graph-protocol van Facebook, dus we hebben gekeken naar welk percentage webpagina's afbeeldingen en video bevat specifiek gericht op microbrowsers in Open Graph ` `-tags.
+
+{{ figure_markup(
+ image="open-graph-image-and-video-usage.png",
+ caption="Open Graph afbeelding en video gebruik.",
+ description="Staafdiagram toont 33,78% van de desktoppagina's en 32,72% van de mobiele pagina's met Open Graph met afbeeldingen, 0,09% van de desktop en 0,10% van de mobiele pagina's gebruikt Open Graph met afbeeldingen, en het zijn exact dezelfde percentages voor beide.",
+ chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTLNnD9VNqXNxMu60VovxIEp_L6vmNo1oWt8-C18DOetXB3qIkee_-KjZwYYPIkkIM-7So-5wBwQ4QY/pubchart?oid=950603216&format=interactive",
+ sheets_gid="625517121",
+ sql_file="meta_open_graph.sql"
+ )
+}}
+
+Een derde van de webpagina's bevat afbeeldingen, in Open Graph-tags, voor microbrowsers. Maar slechts ongeveer 0,1 procent van de pagina's bevat microbrowser-specifieke video's; zowat elke pagina die een video bevatte, bevatte ook een afbeelding.
+
+Een derde van de onderzochte webpagina's lijkt erg gezond; De kracht van relationele mond-tot-mondreclame in combinatie met rijke previews op maat van een microbrowser is duidelijk de moeite waard om in te investeren.
+
+Aangezien video-inhoud duur is om te produceren en veel minder vaak voorkomt op internet dan afbeeldingen, begrijpen we het relatief lage gebruik. Maar het feit dat video's vaak kunnen worden afgespeeld en zelfs automatisch kunnen worden afgespeeld vanuit de linkvoorbeelden zelf, zonder dat u naar een volledige browser hoeft te gaan, betekent dat dit een grote kans is om de betrokkenheid te vergroten.
+
+{{ figure_markup(
+ image="open-graph-image-type-usage.png",
+ caption="Open Graph afbeeldingstype gebruik.",
+ description="Staafdiagram met het volgende procentuele gebruik van verschillende afbeeldingsindelingen op mobiel: 50,51% voor jpg, 43,82% voor png, 1,60% voor gif, 1,78% voor jpeg, 0,66% voor svg, 0,31% voor pnj, 0,36% voor png:150, 0,28% voor ico en 0,23% voor webp. Desktop heeft zeer vergelijkbare nummers.",
+ chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTLNnD9VNqXNxMu60VovxIEp_L6vmNo1oWt8-C18DOetXB3qIkee_-KjZwYYPIkkIM-7So-5wBwQ4QY/pubchart?oid=475337707&format=interactive",
+ sheets_gid="758253988",
+ sql_file="meta_open_image_types.sql"
+ )
+}}
+
+{{ figure_markup(
+ image="open-graph-video-type-usage.png",
+ caption="Open Graph videotype gebruik.",
+ description="Staafdiagram met 68,55% van de desktoppagina's en 78,57% van de mobiele pagina's gebruikt het mp4-videoformaat, 19,75% van de desktoppagina's en 10,86% van de mobiele pagina's gebruikt het swf-formaat en 2,64% van de desktoppagina's en 2,83% van de mobiele pagina's gebruikt het webm-formaat.",
+ chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTLNnD9VNqXNxMu60VovxIEp_L6vmNo1oWt8-C18DOetXB3qIkee_-KjZwYYPIkkIM-7So-5wBwQ4QY/pubchart?oid=110839067&format=interactive",
+ sheets_gid="353192921",
+ sql_file="meta_open_video_types.sql"
+ )
+}}
+
+Het Open Graph-protocol staat alleen toe dat *één* afbeelding of video-URL wordt opgenomen; er is niets van de context-adaptieve flexibiliteit die wordt geboden door `` en `srcset`. Auteurs zijn dus nogal conservatief bij het kiezen van formaten om naar microbrowsers te sturen. Volledig de helft van alle microbrowser-specifieke afbeeldingen zijn JPEG-bestanden; 45 procent zijn PNG's; net onder 2 procent zijn GIF's. WebP's zijn goed voor slechts 0,2% van de afbeeldingen voor microbrowsers.
+
+Evenzo wordt op het gebied van video de overgrote meerderheid van de bronnen verzonden in het formaat met de kleinste gemene deler: MP4. We weten niet waarom het op één na populairste formaat de nu afgeschreven SWF is, en benieuwd of deze afspeelbaar zijn in een microbrowser.
+
+### Gebruik van `rel=preconnect`
+
+Media-items kunnen lokaal of op een Image CDN worden opgeslagen. De manier waarop activa worden geoptimaliseerd, getransformeerd en aan de eindgebruiker worden geleverd, hangt in hoge mate af van de gebruikte techniek. Bij het opnemen van afbeeldingen van een ander domein, kan het `rel=preconnect`-attribuut worden gebruikt op een ` `-element om browsers de mogelijkheid te geven DNS-verbindingen te initiëren voordat ze nodig zijn. Hoewel dit een relatief goedkope bewerking is, kunnen er situaties zijn waarin de extra CPU-tijd die wordt besteed aan het tot stand brengen van dergelijke verbindingen, ander werk vertraagt.
+
+{{ figure_markup(
+ caption="Mobiele pagina's die preconnect gebruiken.",
+ content="8,19%",
+ classes="big-number",
+ sheets_gid="121764369",
+ sql_file="big_non_custom_metrics.sql"
+)
+}}
+
+Als we de opmaak analyseren, zien we op desktop 7,83% van de pagina's die dit gebruiken en op mobiel 8,19%. Het hoofdstuk [Bronhints](./resource-hints#hints-acceptatie) gebruikte een iets andere methodologie door de DOM te analyseren en kreeg vergelijkbare, maar iets grotere cijfers van respectievelijk 8,15% en 8,65%.
+
+### Gebruik van `data:` URL's
+
+Het gebruik van gegevens-URL's (voorheen bekend als gegevens-URI's) is een techniek waarmee ontwikkelaars een met base64 gecodeerde afbeelding rechtstreeks in HTML kunnen insluiten. Dit zorgt ervoor dat een afbeelding volledig wordt geladen tegen de tijd dat de HTML is geparseerd in een DOM-structuur, en garandeert virtueel dat de afbeelding beschikbaar zal zijn voor de eerste verflaag. Omdat ze echter niet zowel over de draad als binaire bestanden worden gecomprimeerd, wordt het laden van andere - mogelijk belangrijkere bronnen - geblokkeerd en wordt caching gecompliceerder, dus afbeeldingen met base-64 zijn een soort antipatroon .
+
+{{ figure_markup(
+ caption="Mobiele pagina's die gegevens-URI's gebruiken.",
+ content="9,10%",
+ classes="big-number",
+ sheets_gid="206827357",
+ sql_file="big_non_custom_metrics.sql"
+)
+}}
+
+Het gebruik hiervan lijkt niet zo wijdverbreid te zijn: 9% van de pagina's gebruikt gegevens-URL's voor het weergeven van afbeeldingen. Er moet echter worden opgemerkt dat we alleen HTML-ingebedde base64-gecodeerde afbeelding `src`'en hebben onderzocht en geen CSS-ingebedde base-64-gecodeerde afbeeldingen voor achtergrondafbeeldingen en dergelijke hebben opgenomen.
+
+### SEO & Toegankelijkheid
+
+Het associëren van beschrijvende tekst met afbeeldingen helpt niet alleen de toegankelijkheid voor degenen die de afbeeldingen niet kunnen bekijken en schermlezers gebruiken, maar het wordt ook gebruikt door verschillende computer vision-algoritmen om het onderwerp van een afbeelding te begrijpen. Beschrijvende tekst moet zinvol zijn in de context van de pagina en relevant zijn voor de afbeelding die wordt beschreven. Meer informatie over deze onderwerpen is te vinden in de hoofdstukken [SEO](./seo) en [Toegankelijkheid](./accessibility).
+
+#### Gebruik van `alt`-tekst
+
+Het `alt`-attribuut voor afbeeldingen wordt gebruikt om een beschrijving van de afbeelding te geven. Het wordt aangekondigd door schermlezers en wordt ook weergegeven in visuele browsers wanneer de afbeelding niet wordt geladen.
+
+{{ figure_markup(
+ image="image-alt-usage-by-page.png",
+ caption="Afbeelding alt-gebruik per pagina.",
+ description="In een staafdiagram staat 96,26% van de desktoppagina's en 96,04% van de mobiele pagina's met afbeeldingen. 52,5% van de desktoppagina's en 51,0% van de mobiele pagina's mist een alt-attribuut, 60,4% van de desktops en 60,6% van de mobiele pagina's heeft lege alt-attributen, en 83,6% van de desktops en 82,1% van de mobiele pagina's heeft een alt-attribuut.",
+ chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTLNnD9VNqXNxMu60VovxIEp_L6vmNo1oWt8-C18DOetXB3qIkee_-KjZwYYPIkkIM-7So-5wBwQ4QY/pubchart?oid=2144814052&format=interactive",
+ sheets_gid="885941461",
+ sql_file="image_alt.sql"
+ )
+}}
+
+{{ figure_markup(
+ image="image-alt-usage-by-image.png",
+ caption="Afbeelding alt-gebruik per afbeelding.",
+ description="Een staafdiagram toont dat 21,3% van de mobiele afbeeldingen en 21,5% van de desktopafbeeldingen alt-attributen missen, 26,2% van de mobiele en desktopafbeeldingen heeft lege alt-attributen en 52,5% van de mobiele en 52,3% van de desktopafbeeldingen heeft alt-attributen.",
+ chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTLNnD9VNqXNxMu60VovxIEp_L6vmNo1oWt8-C18DOetXB3qIkee_-KjZwYYPIkkIM-7So-5wBwQ4QY/pubchart?oid=71848371&format=interactive",
+ sheets_gid="885941461",
+ sql_file="image_alt.sql"
+ )
+}}
+
+Ongeveer 96% van alle verwerkte pagina's had een ` `-element - 21% van deze afbeeldingen miste een `alt`-attribuut. 52% van de afbeeldingen had een `alt`-attribuut, maar 26% hiervan werd blanco gelaten. Simpel gezegd: slechts ongeveer een kwart van de afbeeldingen op internet heeft een niet-blanco `alt`-attribuut; vermoedelijk zelfs minder dan die hebben een `alt`-tekst die nuttig beschrijvend is.
+
+#### Figure & Figcaption
+
+HTML5 heeft verschillende nieuwe semantische elementen aan de taal toegevoegd. Een voorbeeld van zo'n element is ``, dat optioneel een ``-element als kind kan bevatten. Tekstuele beschrijvingen in de ``s zijn semantisch gegroepeerd met de andere inhoud van de ``.
+
+{{ figure_markup(
+ image="figure-and-figcaption-usage-by-page.png",
+ caption="Gebruik van Figure en Figcaption per pagina.",
+ description="Staafdiagram toont 12,34% van de desktoppagina's en 12,16% van de mobiele pagina's gebruikt Figure, maar slechts 1,06% van de desktoppagina's en 1,13% van de mobiele pagina's gebruikt Figcaption.",
+ chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTLNnD9VNqXNxMu60VovxIEp_L6vmNo1oWt8-C18DOetXB3qIkee_-KjZwYYPIkkIM-7So-5wBwQ4QY/pubchart?oid=605432940&format=interactive",
+ sheets_gid="2037389060",
+ sql_file="big_non_custom_metrics.sql"
+ )
+}}
+
+We kunnen zien dat ongeveer 12% van de pagina's op zowel desktop als mobiel het ``-element gebruikt, maar slechts ongeveer 1% gebruikt `` om een beschrijving toe te voegen.
+
+## Videos
+
+Als "een foto meer zegt dan duizend woorden", moet een minuut video met 30 fps 1,8 miljoen waard zijn!
+
+Video is tegenwoordig een van de krachtigste manieren om met een publiek in contact te komen, maar het toevoegen van video aan een site is geen sinecure. Er is een wirwar van formaten en codecs om doorheen te navigeren, en talloze implementatiedetails om te overwegen. Maar de impact van video - zowel de visuele impact als de impact op de prestaties - kan niet genoeg worden benadrukt.
+
+### Het ``-element
+
+Het ``-element vormt de kern van videolevering op internet en wordt afzonderlijk of in combinatie met JavaScript-spelers gebruikt die het geleidelijk verbeteren om video te leveren.
+
+### Bronnen (of niet) en totaal gebruik
+
+Er zijn twee manieren om een videobron in te sluiten met behulp van het element ``. U kunt ofwel een enkele bron-URL in het `src`-attribuut op het element zelf plakken, of het een willekeurig aantal onderliggende ``-elementen geven, die de browser doorleest totdat het een bron vindt die het denkt te kunnen laden. Onze eerste vraag kijkt naar hoe vaak we elk van deze patronen op alle steekproefpagina's zien.
+
+{{ figure_markup(
+ image="video-usage-of-src-versus-source.png",
+ caption="Videogebruik van Src versus Source.",
+ description="Staafdiagram met 0,59% van de desktoppagina's en 0,49% van de mobiele pagina's dat Src gebruikt voor video, tegenover 1,14% van de desktoppagina's en 0,99% van de mobiele pagina's dat Source gebruikt.",
+ chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTLNnD9VNqXNxMu60VovxIEp_L6vmNo1oWt8-C18DOetXB3qIkee_-KjZwYYPIkkIM-7So-5wBwQ4QY/pubchart?oid=2100955508&format=interactive",
+ sheets_gid="689453572",
+ sql_file="big_non_custom_metrics.sql"
+ )
+}}
+
+Twee keer zoveel ``s hebben `` kinderen, versus een `src`-attribuut. Dit geeft aan dat auteurs de mogelijkheid willen hebben om verschillende bronnen naar verschillende eindgebruikers te sturen, afhankelijk van hun context, in plaats van een enkele bron met de laagste gemene deler naar iedereen te sturen (of, als alternatief, een deel van hun publiek een slechtere, of gebroken, ervaring geven).
+
+Interessant genoeg kunnen we ook zien dat op alle pagina's slechts een procent of twee überhaupt ``-elementen bevatten. Het komt veel minder vaak voor dan ` `!
+
+### JavaScript-spelers
+
+We hebben gezocht naar de aanwezigheid van een paar veelvoorkomende spelers (hls.js, video.js, Shaka Player, JW Player, Brightcove Player en Flowplayer). Pagina's met deze specifieke spelers komen minder dan half zo vaak voor als pagina's die het native ``-element gebruiken.
+
+{{ figure_markup(
+ image="video-element-versus-javascript-player.png",
+ caption="Video-element versus JavaScript-speler.",
+ description="Staafdiagram met 77,88% van de desktoppagina's en 74,77% van de mobiele pagina's met video gebruikt Video Element, 28,06% van de desktoppagina's en 30,57% van de mobiele pagina's met afbeeldingen gebruikt JavaScript Video Player en 5,94% van de desktoppagina's en 5,34% van de mobiele pagina's met afbeelding gebruikt beide.",
+ chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTLNnD9VNqXNxMu60VovxIEp_L6vmNo1oWt8-C18DOetXB3qIkee_-KjZwYYPIkkIM-7So-5wBwQ4QY/pubchart?oid=202644434&format=interactive",
+ sheets_gid="1489710615",
+ sql_file="video_tag_and_js_player.sql"
+ )
+}}
+
+De analyse wordt een beetje gecompliceerd door het feit dat veel spelers - zoals video.js - in-source ``-elementen verbeteren. Slechts 5-6% van de pagina's die de gezochte spelers gebruikten bevatte *ook* een ``-element, maar het bewijs van dit patroon is eigenlijk beter zichtbaar als we kijken naar de waarden van `type`-attributen, binnen `` en `` elementen.
+
+### Type-attributen
+
+{{ figure_markup(
+ image="video-source-types.png",
+ caption="Videobrontypen.",
+ description="Staafdiagram met het volgende gebruik van videoformaten op mobiel: 64,08% voor video/mp4, 19,68% voor video/mp4, 10,08% voor video/webm, 4,74% voor video/ogg, 0,51% voor video/vimeo, 0,37% voor video/ogv, 0,12% voor video/mpeg, 0,09% voor video/mov. Desktop lijkt hier erg op.",
+ chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTLNnD9VNqXNxMu60VovxIEp_L6vmNo1oWt8-C18DOetXB3qIkee_-KjZwYYPIkkIM-7So-5wBwQ4QY/pubchart?oid=203419864&format=interactive",
+ sheets_gid="1459916814",
+ sql_file="video_source_types.sql"
+ )
+}}
+
+Het is niet verwonderlijk dat verreweg de meest voorkomende typewaarde `video/mp4` is. Maar de op een na meest voorkomende - die 15% van alle desktop `type`n uitmaakt en 20% van alle `type`n die naar de mobiele crawler worden gestuurd, is `video/youtube` - wat helemaal geen geregistreerd MIME-type is. Het is eerder een speciale waarde die verschillende spelers (waaronder WordPress) gebruiken bij het insluiten van YouTube-video's. Een paar inkepingen in de lijst zien we een soortgelijk patroon voor Vimeo-insluitingen.
+
+Wat betreft de legitieme MIME-typen; ze vangen *container* formaten; MP4 en WebM zijn de enige twee in alles wat we algemeen gebruik zouden kunnen noemen. Het zou interessant zijn om te weten welke *codecs* in deze containers worden gebruikt, en hoeveel tractie volgende generatie codecs zoals VP8, HVEC en AV1 hebben gekregen. Maar een dergelijke analyse valt helaas buiten het omvang van dit artikel.
+
+### Video preload
+
+{{ figure_markup(
+ image="video-preload-values.png",
+ caption="Video preload waarden.",
+ description="Staafdiagram dat laat zien dat 33% van de desktop- en mobiele pagina's met video heeft `none` als preload, 36% van de desktop- en 27% van de mobiele pagina's met video heeft `auto`, respectievelijk 24% en 33% heeft `metadata` en 4% en 5% hebben deze set niet.",
+ chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTLNnD9VNqXNxMu60VovxIEp_L6vmNo1oWt8-C18DOetXB3qIkee_-KjZwYYPIkkIM-7So-5wBwQ4QY/pubchart?oid=989934821&format=interactive",
+ sheets_gid="1099175973",
+ sql_file="video_preload_values.sql"
+ )
+}}
+
+Het `preload`-attribuut geeft aan of een video moet worden gedownload en het kan drie waarden hebben: `none`, `metadata`, `auto` (merk op dat als het leeg wordt gelaten, de `auto`-waarde wordt aangenomen). We kunnen zien dat 4,81% van de pagina's ``-elementen heeft, en 45,37% hiervan heeft het `preload`-attribuut. De cijfers op mobiel zijn iets anders, met slechts 3,59% van de pagina's met ``-elementen en 43,38% van deze met het `preload`-attribuut.
+
+### Autoplay en muted
+
+{{ figure_markup(
+ image="video-autoplay-and-muted-usage.png",
+ caption="Video autoplay en muted gebruik.",
+ description="Staafdiagram dat 57,22% van de desktoppagina's met video en 53,86% van de mobiele pagina's laat zien dat video's `autoplay` hebben, 56,36% en 53,41% is `muted` en 48,74% van de desktoppagina's en 45,99% van de mobiele pagina's met video zijn beide ingesteld.",
+ chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTLNnD9VNqXNxMu60VovxIEp_L6vmNo1oWt8-C18DOetXB3qIkee_-KjZwYYPIkkIM-7So-5wBwQ4QY/pubchart?oid=1010709511&format=interactive",
+ sheets_gid="1366238292",
+ sql_file="video_autoplay_muted.sql"
+ )
+}}
+
+Als we naar aanvullende informatie over video's kijken, kunnen we zien dat 57,22% van de `` -elementen op desktop het `autoplay`-attribuut hebben, 56,36% van de pagina's met een ``-element op desktop het `gedempt`-attribuut gebruiken en last but not least gebruikt 48,74% van de pagina's zowel `autoplay` als `muted` samen op de desktop. De cijfers zijn vergelijkbaar voor mobiel, waar 53,86% `autoplay` heeft, 53,41% `muted` en 45,99% beide attributen bevat.
+
+## Gevolgtrekking
+
+Het web is een geweldige plek om een visueel verhaal te vertellen. Tijdens ons onderzoek hebben we kunnen zien dat het web echt veel media-elementen gebruikt. Deze diversiteit komt ook tot uiting in het aantal manieren waarop media tegenwoordig op internet worden weergegeven. De meeste basisfuncties voor het weergeven van media worden actief gebruikt, maar met moderne browsers zouden we veel meer kunnen doen. Sommige van de geavanceerde mediafuncties die tegenwoordig worden gebruikt, zijn verbluffend, maar soms worden ze onjuist of in de verkeerde context gebruikt. We willen iedereen aanmoedigen om een niveau dieper te gaan: gebruik alle functies en mogelijkheden van het moderne web om gebruikers meer geweldige visuele ervaringen te bieden.
From d7f3d1e0152c80d2e9e7264228580329e6093d8b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
<41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 14 Mar 2021 09:54:52 +0000
Subject: [PATCH 2/2] Update Timestamps and Generate Ebooks (#2067)
Co-authored-by: bazzadp
---
src/config/last_updated.json | 9 +++++++--
1 file changed, 7 insertions(+), 2 deletions(-)
diff --git a/src/config/last_updated.json b/src/config/last_updated.json
index 8c6afcec2ea..1c09545e4cc 100644
--- a/src/config/last_updated.json
+++ b/src/config/last_updated.json
@@ -282,8 +282,8 @@
},
"en/2020/chapters/media.html": {
"date_published": "2020-12-09T00:00:00.000Z",
- "date_modified": "2021-03-02T00:00:00.000Z",
- "hash": "7a25ba578a6bfa8109d865876e183dc0"
+ "date_modified": "2021-03-14T00:00:00.000Z",
+ "hash": "12db1169d0c33fa7d54cd620805fc222"
},
"en/2020/chapters/mobile-web.html": {
"date_published": "2020-12-09T00:00:00.000Z",
@@ -925,6 +925,11 @@
"date_modified": "2021-03-12T00:00:00.000Z",
"hash": "3b12ce753f6b6111cc85296649b8fb6c"
},
+ "nl/2020/chapters/media.html": {
+ "date_published": "2021-03-14T00:00:00.000Z",
+ "date_modified": "2021-03-14T00:00:00.000Z",
+ "hash": "42fa1934f8261a2a330f47cf9463341f"
+ },
"nl/2020/chapters/mobile-web.html": {
"date_published": "2021-03-12T00:00:00.000Z",
"date_modified": "2021-03-12T00:00:00.000Z",