{"id":4377,"date":"2020-11-13T20:36:22","date_gmt":"2020-11-13T19:36:22","guid":{"rendered":"https:\/\/google-deskundige.nl\/?page_id=4377"},"modified":"2020-11-13T20:44:17","modified_gmt":"2020-11-13T19:44:17","slug":"image-source-set-img-srcset","status":"publish","type":"page","link":"https:\/\/google-deskundige.nl\/betekenissen\/image-source-set-img-srcset\/","title":{"rendered":"image source set <img srcset>"},"content":{"rendered":"<h1>Wat is image source set &lt;img srcset&gt;?<\/h1>\n<p><br \/><br \/>\n<strong>Image sourceset &lt;img srcset&gt; is een code die bedoeld is om de afbeeldingen op je website mobiel-vriendelijk te maken.<\/strong><br \/><br \/>\nAndere manieren om je afbeeldingen mobiel-vriendelijk te maken zijn:<\/p>\n<ul>\n<li>Het gebruik van css. Dat kan dan weer op twee manieren:\n<ul>\n<li>Schalen: het vergroten en \/ of verkleinen van je afbeeldingen afhankelijk van de grootte van het scherm.<\/li>\n<li>Het vertonen van andere afbeeldingen bij andere afmetingen van het scherm<\/li>\n<\/ul>\n<\/li>\n<li>Door het gebruik van de <a title=\"Wat is een picture-code?\" href=\"https:\/\/google-deskundige.nl\/betekenissen\/picture-code\/\"> &lt;picture&gt;-code.<\/a><\/li>\n<\/ul>\n<p><br \/><br \/><\/p>\n<h2>Waarom zou je gebruik maken van &lt;img srcset&gt;?<\/h2>\n<br \/>\n<p><a title=\"Wat is mobiel vriendelijk - mobile friendly als je het hebt over een webshop of website?\" href=\"https:\/\/google-deskundige.nl\/betekenissen\/mobile-friendly\">Mobielvriendelijkheid van je website<\/a> is zeer belangrijk voor de positie die je site kan innemen in de zoekmachines. Als je website niet mobiel-vriendelijk is, dan wordt het lastig (-er) om hoog te komen staan wanneer iemand zoekt met een mobiel apparaat. Een lagere positie leidt weer tot minder bezoekers en dat heeft dan ook weer zijn effect op de zoekresultaten wanneer iemand met een desktop zoekt.<br \/>\nDus je website moet mobiel-vriendelijk zijn en daarmee moeten ook je afbeeldingen mobiel-vriendelijk zijn.<br \/>\n<br \/>Om je plaatjes mobiel-vriendelijk te maken kun je ze ook schaalbaar maken, zodat ze groter en kleiner kunnen worden gemaakt.<br \/>\nDe <strong>nadelen van schaalbare afbeeldingen<\/strong> zijn gelijk de redenen waarom je kunt kiezen voor de img scrset en \/ of picture code:<\/p>\n<ul>\n<li>Het laden van plaatjes kost tijd. Tijd is \u00e9\u00e9n van de belangrijkste factoren waarom iemand je site voortijdig verlaat. Door nu voor verschillende scherm-afmetingen verschillende plaatjes aan te leveren, kun je kleinere plaatjes vertonen op kleinere schermen (dus mobiele apparaten). Je pagina wordt daardoor weer sneller.<\/li>\n<li>Het verkleinen van een afbeelding kan ervoor zorgen dat het plaatje te klein wordt om te tonen wat je wilt laten zien. Met de picture code of css heb je dan zelf in de hand wat vertoond wordt.<\/li>\n<\/ul>\n<p><br \/><br \/><\/p>\n<h2>Wanneer kies je voor &lt;picture&gt; of css in plaats van voor &lt;img srcset&gt;?<\/h2>\n<p><strong>Bij de image-source set code maak je verschillende afmetingen van dezelfde afbeelding<\/strong>. De browser bepaalt uiteindelijk welk plaatje vertoond wordt, maar net als bij Google&#8217;s snippets kun je hier ook sterke suggesties meegeven.<br \/><\/p>\n<p>Wil je liever <strong>andere afbeeldingen laten zien op een ander formaat scherm (bijv. een uitsnede van het plaatje), dan kun je dat beter doen via de &lt;picture&gt;-code, of het inrichten via css (@media screen etc)<\/strong>. Op die manier heb je meer kans dat het plaatje dat jij vertoond wilt hebben op een bepaalde schermafmeting, ook dan daadwerkelijk vertoond wordt.<br \/>\nVooral met mobiele apparaten zie je dat een image-source-set wel eens anders reageert dan je zou willen.<br \/><br \/><\/p>\n<h2>Hoe maak je een &lt;img srcset&gt;?<\/h2>\n<br \/>\n<p>Heb je een website gemaakt met <strong>WordPress<\/strong>, dan kun je hiervoor een <strong>plugin<\/strong> gebruiken die het gelijk regelt voor je.<br \/>\nLet wel even op of de maten die worden aangehouden door die plug-in overeenkomen met de maten die jij wilt hebben en als dat niet het geval is of je die erbij kunt maken. Zo&#8217;n plugin maakt gelijk de plaatjes aan voor je source set en afhankelijk van je plugin, zet die plugin de plaatjes ook als &lt;img srcset&gt; op je webpagina. En soms moet je dat alsnog handmatig doen. Dus dat volgt hieronder.<br \/><\/p>\n<p>Wil \/ moet je je afbeeldingen zelf als &lt;img srcset&gt; inregelen, dan kun je dat zo doen:<\/p>\n<ol>\n<li>Maak verschillende plaatjes voor de verschillende afmetingen.<\/li>\n<li>Upload deze naar je pagina.<\/li>\n<li>Gebruik de volgende code op je pagina:<br \/>\n<ul>\n<li>Plaatje: <span style=\"color: #81183d !important;\">&lt;img<\/span><\/li>\n<li>geef aan dat je gebruik maakt van meer afbeeldingen in plaats \u00e9\u00e9n afbeelding: <span style=\"color: #81183d !important;\">srcset=&#8221;<br \/>\n<\/span><\/li>\n<li>Geef de locatie op van de afbeeldingen met achter elke afbeelding de maximale breedte die voor de afbeelding geldt dmv aantal pixels + w:\n<ul><span style=\"color: #81183d !important;\"><\/p>\n<li>plaatje-s.jpg 300w,<\/li>\n<li>plaatje-m.jpg 600w,<\/li>\n<li>plaatje-l.jpg 1200w,<\/li>\n<li>plaatje-xl.jpg 2000w,&#8221;<\/li>\n<p><\/span><\/ul>\n<\/li>\n<li>Op welk breekpunt qua breedte er moet worden overgegaan naar een ander plaatje, voorbeeld:\n<ul><span style=\"color: #81183d !important;\"><\/p>\n<li>sizes=&#8221;(max-width: 300px) 250px,<\/li>\n<li>(max-width: 600px) 550px,<\/li>\n<li>900px&#8221;<\/li>\n<p><\/span><\/ul>\n<\/li>\n<li>Als browser geen image source set ondersteunt laat dan dit plaatje zien: <span style=\"color: #81183d !important;\">src=&#8221;basis-plaatje.jpg&#8221;&gt;<br \/>\n<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p><img decoding=\"async\" srcset=\"https:\/\/google-deskundige.nl\/media\/2020\/11\/image-sourceset-300x157.jpg 300w, https:\/\/google-deskundige.nl\/media\/2020\/11\/image-sourceset-768x402.jpg 768w,\nhttps:\/\/google-deskundige.nl\/media\/2020\/11\/image-sourceset-1024x536.jpg 1024w\" sizes=\"(max-width:300px) 250px,(max-width:600px)550px,900px\" src=\"https:\/\/google-deskundige.nl\/media\/2020\/11\/image-sourceset.jpg\" alt=\"Wat is image source set - img src>&#8220;><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wat is image source set &lt;img srcset&gt;? Image sourceset &lt;img srcset&gt; is een code die bedoeld is om de afbeeldingen op je website mobiel-vriendelijk te maken. Andere manieren om je afbeeldingen mobiel-vriendelijk te maken zijn: Het gebruik van css. Dat kan dan weer op twee manieren: Schalen: het vergroten en \/ of verkleinen van je &hellip; <a href=\"https:\/\/google-deskundige.nl\/betekenissen\/image-source-set-img-srcset\/\" class=\"more-link\">Lees verder <span class=\"screen-reader-text\">image source set <img srcset><\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":90,"featured_media":0,"parent":102,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_joinchat":[]},"yoast_head":"\n<title>Wat is image source set - img srcset? Lees het hier!<\/title>\n<meta name=\"description\" content=\"Alles over image source set - img srcset dat je moet weten. Je leest het in de online marketing woordenlijst van JXR SEM.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/google-deskundige.nl\/betekenissen\/image-source-set-img-srcset\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wat is image source set - img srcset? Lees het hier!\" \/>\n<meta property=\"og:description\" content=\"Alles over image source set - img srcset dat je moet weten. Je leest het in de online marketing woordenlijst van JXR SEM.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/google-deskundige.nl\/betekenissen\/image-source-set-img-srcset\/\" \/>\n<meta property=\"og:site_name\" content=\"JXR SEM\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/googledeskundige\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-13T19:44:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/google-deskundige.nl\/media\/2020\/11\/image-sourceset.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/google-deskundige.nl\/media\/2020\/11\/image-sourceset-twitter.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minuten\" \/>\n","yoast_head_json":{"title":"Wat is image source set - img srcset? Lees het hier!","description":"Alles over image source set - img srcset dat je moet weten. Je leest het in de online marketing woordenlijst van JXR SEM.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/google-deskundige.nl\/betekenissen\/image-source-set-img-srcset\/","og_locale":"nl_NL","og_type":"article","og_title":"Wat is image source set - img srcset? Lees het hier!","og_description":"Alles over image source set - img srcset dat je moet weten. Je leest het in de online marketing woordenlijst van JXR SEM.","og_url":"https:\/\/google-deskundige.nl\/betekenissen\/image-source-set-img-srcset\/","og_site_name":"JXR SEM","article_publisher":"https:\/\/www.facebook.com\/googledeskundige","article_modified_time":"2020-11-13T19:44:17+00:00","og_image":[{"width":"1200","height":"628","url":"https:\/\/google-deskundige.nl\/media\/2020\/11\/image-sourceset.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_image":"https:\/\/google-deskundige.nl\/media\/2020\/11\/image-sourceset-twitter.jpg","twitter_misc":{"Geschatte leestijd":"3 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/google-deskundige.nl\/betekenissen\/image-source-set-img-srcset\/","url":"https:\/\/google-deskundige.nl\/betekenissen\/image-source-set-img-srcset\/","name":"Wat is image source set - img srcset? Lees het hier!","isPartOf":{"@id":"https:\/\/google-deskundige.nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/google-deskundige.nl\/betekenissen\/image-source-set-img-srcset\/#primaryimage"},"image":{"@id":"https:\/\/google-deskundige.nl\/betekenissen\/image-source-set-img-srcset\/#primaryimage"},"thumbnailUrl":"https:\/\/google-deskundige.nl\/media\/2020\/11\/image-sourceset.jpg","datePublished":"2020-11-13T19:36:22+00:00","dateModified":"2020-11-13T19:44:17+00:00","description":"Alles over image source set - img srcset dat je moet weten. Je leest het in de online marketing woordenlijst van JXR SEM.","breadcrumb":{"@id":"https:\/\/google-deskundige.nl\/betekenissen\/image-source-set-img-srcset\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/google-deskundige.nl\/betekenissen\/image-source-set-img-srcset\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/google-deskundige.nl\/betekenissen\/image-source-set-img-srcset\/#primaryimage","url":"https:\/\/google-deskundige.nl\/media\/2020\/11\/image-sourceset.jpg","contentUrl":"https:\/\/google-deskundige.nl\/media\/2020\/11\/image-sourceset.jpg","width":"1200","height":"628","caption":"Wat is image source set - img srcset?"},{"@type":"BreadcrumbList","@id":"https:\/\/google-deskundige.nl\/betekenissen\/image-source-set-img-srcset\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Online Marketing v\/h MKB","item":"https:\/\/google-deskundige.nl\/"},{"@type":"ListItem","position":2,"name":"Betekenissen","item":"https:\/\/google-deskundige.nl\/betekenissen\/"},{"@type":"ListItem","position":3,"name":"image source set"}]},{"@type":"WebSite","@id":"https:\/\/google-deskundige.nl\/#website","url":"https:\/\/google-deskundige.nl\/","name":"JXR SEM","description":"d&eacute; Google deskundige","publisher":{"@id":"https:\/\/google-deskundige.nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/google-deskundige.nl\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/google-deskundige.nl\/#organization","name":"JXR SEM - Online Marketing Bureau","url":"https:\/\/google-deskundige.nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/google-deskundige.nl\/#\/schema\/logo\/image\/","url":"https:\/\/google-deskundige.nl\/media\/2019\/11\/jxrsemlogo.png","contentUrl":"https:\/\/google-deskundige.nl\/media\/2019\/11\/jxrsemlogo.png","width":300,"height":300,"caption":"JXR SEM - Online Marketing Bureau"},"image":{"@id":"https:\/\/google-deskundige.nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/googledeskundige"]}]}},"_links":{"self":[{"href":"https:\/\/google-deskundige.nl\/api-json\/wp\/v2\/pages\/4377"}],"collection":[{"href":"https:\/\/google-deskundige.nl\/api-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/google-deskundige.nl\/api-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/google-deskundige.nl\/api-json\/wp\/v2\/users\/90"}],"replies":[{"embeddable":true,"href":"https:\/\/google-deskundige.nl\/api-json\/wp\/v2\/comments?post=4377"}],"version-history":[{"count":28,"href":"https:\/\/google-deskundige.nl\/api-json\/wp\/v2\/pages\/4377\/revisions"}],"predecessor-version":[{"id":4407,"href":"https:\/\/google-deskundige.nl\/api-json\/wp\/v2\/pages\/4377\/revisions\/4407"}],"up":[{"embeddable":true,"href":"https:\/\/google-deskundige.nl\/api-json\/wp\/v2\/pages\/102"}],"wp:attachment":[{"href":"https:\/\/google-deskundige.nl\/api-json\/wp\/v2\/media?parent=4377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}