{"id":123639,"date":"2025-03-03T08:20:27","date_gmt":"2025-03-03T06:20:27","guid":{"rendered":"https:\/\/elementor.com\/blog\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\/"},"modified":"2026-01-09T16:52:17","modified_gmt":"2026-01-09T14:52:17","slug":"hoe-je-een-afbeelding-kunt-schalen-in-css-html","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/nl\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\/","title":{"rendered":"Hoe je een afbeelding kunt schalen in CSS & HTML"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Daar komt het schalen van afbeeldingen met CSS om de hoek kijken. Met CSS<\/a> (Cascading Style Sheets) heb je krachtige tools om te bepalen hoe afbeeldingen op je website verschijnen, zodat ze er op hun best uitzien zonder de laadtijden te be\u00efnvloeden.<\/span><\/p>\n

Deze gids geeft je alles wat je nodig hebt om als een pro afbeeldingen te schalen met CSS. Of je nu een persoonlijke blog, een strakke webshop of een complexe webapplicatie bouwt, je leert hoe je je afbeeldingen kunt laten schitteren. <\/span><\/p>\n

De basis van afbeeldingen schalen begrijpen <\/span><\/h2>\n

Afbeeldingsafmetingen en resolutie<\/span><\/h3>\n

Voordat we de CSS-technieken verkennen, laten we beginnen met het begrijpen van de kernconcepten van afbeeldingsafmetingen en resolutie.<\/span><\/p>\n

    \n
  • Pixels:<\/b> Afbeeldingen op het web bestaan uit kleine vierkantjes die pixels worden genoemd. Elke pixel bevat kleurinformatie. Hoe meer pixels een afbeelding heeft, hoe hoger de resolutie en hoe meer detail deze kan weergeven.<\/span><\/li>\n
  • Afbeeldingsafmetingen:<\/b> Afbeeldingsafmetingen worden uitgedrukt in breedte en hoogte, gemeten in pixels (bijv. 1200px x 800px). Deze afmetingen bepalen de fysieke ruimte die een afbeelding inneemt op een webpagina.<\/span><\/li>\n
  • Beeldverhouding:<\/b> De beeldverhouding is de proportionele relatie tussen de breedte en hoogte van een afbeelding (bijv. 16:9, 4:3). Het behouden van de beeldverhouding is cruciaal bij het schalen van afbeeldingen om vervorming te voorkomen.<\/span><\/li>\n<\/ul>\n

    Bestandsformaten voor afbeeldingen<\/span><\/h3>\n

    Het web ondersteunt verschillende bestandsformaten voor afbeeldingen, elk met zijn eigen sterke punten en ideale toepassingen. Laten we kort de meest voorkomende verkennen die je zult tegenkomen:<\/span><\/p>\n

      \n
    1. JPEG (JPG):<\/b> Dit formaat is het beste voor foto’s en afbeeldingen met complexe kleuren en verlopen. Het ondersteunt aanpasbare compressie om kwaliteit en bestandsgrootte in balans te brengen.<\/span><\/li>\n
    2. PNG: <\/b>is ideaal voor logo’s, afbeeldingen en plaatjes waar transparantie nodig is. Het ondersteunt verliesvrije compressie (geen kwaliteitsverlies).<\/span><\/li>\n
    3. GIF:<\/b> Voornamelijk gebruikt voor eenvoudige animaties en afbeeldingen. Beperkt kleurenpalet.<\/span><\/li>\n
    4. SVG: <\/b>is een vectorgebaseerd formaat perfect voor logo’s, iconen en illustraties. Het is oneindig schaalbaar zonder kwaliteitsverlies.<\/span><\/li>\n<\/ol>\n

      Het begrijpen van deze bestandsformaten is belangrijk omdat het kiezen van de juiste een aanzienlijke impact kan hebben op de grootte van je webafbeeldingen en hun laadtijden. En onthoud, Elementor ondersteunt al deze bestandstypen naadloos, waardoor je de perfecte afbeelding voor elke situatie op je website kunt gebruiken.<\/span><\/p>\n

      Impact op webprestaties<\/span><\/h3>\n

      Waarom is al dit gepraat over pixels, afbeeldingsformaten en schalen belangrijk? Het komt neer op webprestaties. Grote, niet-geoptimaliseerde afbeeldingen zijn een belangrijke boosdoener achter trage websites. Dit is waarom:<\/span><\/p>\n

        \n
      • Bandbreedteverbruik:<\/b> Grote afbeeldingsbestanden vereisen meer gegevensoverdracht van de server naar de browser van de bezoeker, wat waardevolle bandbreedte verbruikt.<\/span><\/li>\n
      • Verhoogde laadtijden:<\/b> De browser heeft tijd nodig om grote afbeeldingsbestanden te downloaden en te verwerken, wat de weergave van de hele pagina vertraagt en leidt tot een frustrerende gebruikerservaring.<\/span><\/li>\n
      • Negatieve SEO-impact:<\/b> Zoekmachines zoals Google beschouwen de snelheid van een site als een rankingfactor. Trage websites kunnen worden bestraft in zoekresultaten.<\/span><\/li>\n
      • Slechte gebruikerservaring (UX):<\/b> Niet-geoptimaliseerde afbeeldingen, vooral op mobiele apparaten met tragere verbindingen, kunnen de gebruikerservaring verpesten en ervoor zorgen dat bezoekers je website verlaten voordat deze volledig is geladen.<\/span><\/li>\n<\/ul>\n

        Daarom is het schalen van afbeeldingen, samen met andere optimalisatietechnieken, een hoeksteen van het bouwen van snelle, boeiende websites – vooral als je van plan bent om een visueel rijke ervaring te bieden!<\/span><\/p>\n

        CSS-technieken voor het schalen van afbeeldingen<\/span><\/h2>\n

        width en height eigenschappen<\/span><\/h3>\n

        De meest fundamentele manier om afbeeldingen te schalen in CSS is door gebruik te maken van de <\/span>width<\/span> en <\/span>height<\/span> eigenschappen. Je kunt de weergegeven grootte van een afbeelding direct bepalen door deze eigenschappen in te stellen met verschillende waarden:<\/span><\/p>\n

          \n
        1. Pixels (px):<\/b> Dit geeft je de meest nauwkeurige controle over afbeeldingsafmetingen (bijv. breedte: 300px; hoogte: 200px).<\/span><\/li>\n
        2. Percentages (%):<\/b> Dit maakt afbeeldingen responsief door ze te laten aanpassen aan hun oudercontainer (bijv. breedte: 50%; hoogte: auto, om een afbeelding de helft van de breedte van zijn container te laten innemen).<\/span><\/li>\n<\/ol>\n

          Voorbeeldcode<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t\t\t\t
          \n\t\t\t
          \n\t\t\t\t\n\t\t\t\t\tHTML\r\n<img decoding=\"async\" src=\"my-image.jpg\" alt=\"A beautiful landscape\" style=\"width: 400px; height: 300px;\">\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-23408f6 elementor-widget elementor-widget-text-editor\" data-id=\"23408f6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Belangrijke opmerking:<\/b><span style=\"font-weight: 400;\"> Denk altijd aan responsief ontwerp bij het gebruik van <\/span><span style=\"font-weight: 400;\">width<\/span><span style=\"font-weight: 400;\"> en <\/span><span style=\"font-weight: 400;\">height<\/span><span style=\"font-weight: 400;\">. Met Elementor heb je intu\u00eftieve visuele controls om afbeeldingsformaten aan te passen voor verschillende schermformaten, zodat je afbeeldingen er perfect uitzien op elk apparaat.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">max-width en max-height eigenschappen<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Terwijl <\/span><span style=\"font-weight: 400;\">width<\/span><span style=\"font-weight: 400;\"> en <\/span><span style=\"font-weight: 400;\">height<\/span><span style=\"font-weight: 400;\"> expliciete afmetingen instellen, zijn de <\/span><span style=\"font-weight: 400;\">max-width<\/span><span style=\"font-weight: 400;\"> en <\/span><span style=\"font-weight: 400;\">max-height<\/span><span style=\"font-weight: 400;\"> eigenschappen ongelooflijk handig voor het instellen van formaatgrenzen terwijl de responsiviteit behouden blijft.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Zo werken ze:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>max-width:<\/b><span style=\"font-weight: 400;\"> Voorkomt dat een afbeelding een bepaalde breedte overschrijdt, waardoor deze indien nodig kleiner kan worden (bijv. <\/span><span style=\"font-weight: 400;\">max-width: 100%;<\/span><span style=\"font-weight: 400;\"> zorgt ervoor dat de afbeelding nooit meer dan 100% van de breedte van zijn container inneemt).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>max-height:<\/b><span style=\"font-weight: 400;\"> Werkt vergelijkbaar, zet een limiet op de hoogte van een afbeelding (bijv. <\/span><span style=\"font-weight: 400;\">max-height: 400px;<\/span><span style=\"font-weight: 400;\"> zou voorkomen dat de afbeelding hoger wordt dan 400 pixels).<\/span><\/li>\n<\/ul>\n<p><b>Waarom deze gebruiken?<\/b><span style=\"font-weight: 400;\">  Ze zijn een belangrijke tool om te voorkomen dat afbeeldingen uit hun containers breken en je lay-out verstoren, vooral in responsieve ontwerpen.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Voorbeeldcode<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13b72f0 elementor-widget elementor-widget-code-highlight\" data-id=\"13b72f0\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<img decoding=\"async\" src=\"my-image.jpg\" alt=\"A beautiful landscape\" style=\"max-width: 100%; height: auto;\"> \r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd04060 elementor-widget elementor-widget-text-editor\" data-id=\"dd04060\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Pro tip:<\/b><span style=\"font-weight: 400;\"> Vaak is het instellen van <\/span><span style=\"font-weight: 400;\">max-width: 100%;<\/span><span style=\"font-weight: 400;\"> met <\/span><span style=\"font-weight: 400;\">height: auto;<\/span><span style=\"font-weight: 400;\"> je beste keuze voor responsief aanpassen van afbeeldingen, maar we zullen de redenen waarom in de volgende subtitel verkennen!<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Beeldverhouding behouden met &#8216;auto&#8217;<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Weet je die beeldverhoudingen nog waar we het eerder over hadden? Het behouden ervan tijdens het aanpassen van het formaat is cruciaal om te voorkomen dat je afbeeldingen er platgedrukt, uitgerekt of vervormd uitzien. Hier komt de  <\/span><span style=\"font-weight: 400;\">auto<\/span><span style=\"font-weight: 400;\"> waarde te hulp:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>\u00c9\u00e9n dimensie instellen, de andere &#8216;auto&#8217;:<\/b><span style=\"font-weight: 400;\"> Wanneer je ofwel <\/span><span style=\"font-weight: 400;\">width<\/span><span style=\"font-weight: 400;\"> of <\/span><span style=\"font-weight: 400;\">height<\/span><span style=\"font-weight: 400;\"> op een specifieke waarde instelt (pixels of percentage) en de tegenovergestelde dimensie op <\/span><span style=\"font-weight: 400;\">auto<\/span><span style=\"font-weight: 400;\">, berekent de browser automatisch de ontbrekende dimensie om de beeldverhouding te behouden.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Waarom dit belangrijk is<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Visuele integriteit:<\/b><span style=\"font-weight: 400;\"> Zorgt ervoor dat je afbeeldingen er op hun best uitzien en zoals bedoeld.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Lay-out harmonie:<\/b><span style=\"font-weight: 400;\"> Voorkomt dat afbeeldingen het ontwerp van je website verstoren.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Professionaliteit:<\/b><span style=\"font-weight: 400;\"> Vervormde afbeeldingen kunnen een onprofessionele indruk geven.<\/span><\/li>\n<\/ol>\n<h4><span style=\"font-weight: 400;\">Voorbeeldcode<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c9a0b08 elementor-widget elementor-widget-code-highlight\" data-id=\"c9a0b08\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<img decoding=\"async\" src=\"my-image.jpg\" alt=\"A beautiful landscape\" style=\"width: 100%; height: auto;\">\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1e1ee92 elementor-widget elementor-widget-text-editor\" data-id=\"1e1ee92\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Elementor tip:<\/b><span style=\"font-weight: 400;\"> Elementor&#8217;s visuele editor maakt het ongelooflijk gemakkelijk om afbeeldingen aan te passen terwijl automatisch de beeldverhoudingen worden behouden, wat je een perfecte balans tussen controle en gemak geeft.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Achtergrondafbeeldingen en background-size<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">In plaats van de <\/span><span style=\"font-weight: 400;\">&lt;img&gt;<\/span><span style=\"font-weight: 400;\">  tag te gebruiken, laat CSS je toe om afbeeldingen als achtergronden van verschillende elementen in te stellen. Dit ontgrendelt creatieve ontwerpmogelijkheden en krachtige aanpassingstechnieken met behulp van de  <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\"> eigenschap.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Hier zijn de belangrijkste waarden voor <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\">:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>bevatten:<\/b><span style=\"font-weight: 400;\">  De afbeelding schaalt om volledig in de container te passen terwijl de beeldverhouding behouden blijft. Sommige gebieden van de achtergrond kunnen leeg blijven als de beeldverhouding van de afbeelding niet overeenkomt met die van de container.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>omslag:<\/b><span style=\"font-weight: 400;\">  De afbeelding schaalt om de container volledig te bedekken terwijl de beeldverhouding behouden blijft. Dit kan ertoe leiden dat delen van de afbeelding worden bijgesneden als de beeldverhoudingen niet overeenkomen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>100% 100%:<\/b><span style=\"font-weight: 400;\"> Dwingt de afbeelding om uit te rekken om de volledige breedte en hoogte van de container te vullen, wat mogelijk de beeldverhouding vervormt.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Aangepaste waarden:<\/b><span style=\"font-weight: 400;\"> Je kunt ook specifieke pixel- of percentagewaarden instellen voor <\/span><span style=\"font-weight: 400;\">background size (bijv. background-size: 500px 300px)<\/span><span style=\"font-weight: 400;\">.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Voorbeeldcode<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-90bf6ea elementor-widget elementor-widget-code-highlight\" data-id=\"90bf6ea\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n.my-element {\r\n  background-image: url(\"my-image.jpg\");\r\n  background-size: cover; \r\n} \r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a9b8899 elementor-widget elementor-widget-text-editor\" data-id=\"a9b8899\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Gebruikscases<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Hero-secties:<\/b><span style=\"font-weight: 400;\"> Maak visueel opvallende hero-gebieden met grote achtergrondafbeeldingen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tekstoverlays:<\/b><span style=\"font-weight: 400;\"> Combineer achtergrondafbeeldingen met tekst voor boeiende effecten.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Patronen:<\/b><span style=\"font-weight: 400;\"> Gebruik kleine, herhalende afbeeldingen om interessante achtergrondpatronen te maken.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">object-fit Eigenschap<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">De <\/span><span style=\"font-weight: 400;\">object-fit<\/span><span style=\"font-weight: 400;\">  eigenschap biedt gedetailleerde controle over hoe een afbeelding (of video) binnen zijn inhoudsvak past. Zie het als de CSS-tegenhanger van de  <\/span><span style=\"font-weight: 400;\">contain<\/span><span style=\"font-weight: 400;\"> en <\/span><span style=\"font-weight: 400;\">cover<\/span><span style=\"font-weight: 400;\"> concepten die we hebben verkend met <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\"> maar met nog meer opties:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>fill:<\/b><span style=\"font-weight: 400;\"> De afbeelding rekt uit (mogelijk vervormend) om het hele inhoudsvak te vullen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>contain:<\/b><span style=\"font-weight: 400;\"> De afbeelding schaalt om volledig binnen het inhoudsvak te passen, waarbij de beeldverhouding behouden blijft (vergelijkbaar met <\/span><span style=\"font-weight: 400;\">background-size: contain<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>cover:<\/b><span style=\"font-weight: 400;\"> De afbeelding schaalt om het hele inhoudsvak te bedekken terwijl de beeldverhouding behouden blijft, mogelijk delen van de afbeelding bijsnijdend (vergelijkbaar met <\/span><span style=\"font-weight: 400;\">background-size: cover<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>none:<\/b><span style=\"font-weight: 400;\"> De afbeelding wordt weergegeven op zijn oorspronkelijke grootte, zonder resizing.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>scale-down:<\/b><span style=\"font-weight: 400;\"> De afbeelding kiest tussen <\/span><span style=\"font-weight: 400;\">contain<\/span><span style=\"font-weight: 400;\"> en <\/span><span style=\"font-weight: 400;\">none<\/span><span style=\"font-weight: 400;\"> op basis van of de afbeeldingsgrootte kleiner of groter is dan het inhoudsvak.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Voorbeeldcode<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8f13963 elementor-widget elementor-widget-code-highlight\" data-id=\"8f13963\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n  width: 100%;  \r\n  height: 300px; \r\n  object-fit: cover; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc3e025 elementor-widget elementor-widget-text-editor\" data-id=\"fc3e025\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Visuele Vergelijkingen:<\/b><span style=\"font-weight: 400;\"> Het is vaak het beste om de verschillende <\/span><span style=\"font-weight: 400;\">object-fit<\/span><span style=\"font-weight: 400;\">  waarden in actie te zien om hun verschillen volledig te begrijpen. Overweeg een set afbeeldingsvoorbeelden op te nemen die elke waarde in dit deel van het artikel demonstreren.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Wanneer object-fit te gebruiken<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Productafbeeldingen:<\/b><span style=\"font-weight: 400;\"> Zorg voor een consistente weergave van productfoto&#8217;s binnen containers met vaste afmetingen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Thumbnails:<\/b><span style=\"font-weight: 400;\"> Maak uniforme miniatuurgalerijen waar beeldverhoudingen kunnen vari\u00ebren.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Gebruikersge\u00fcploade Inhoud<\/b><span style=\"font-weight: 400;\"> Beheer hoe mogelijk onvoorspelbare afbeeldingsgroottes worden weergegeven.<\/span><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400;\">Responsieve Afbeeldingsresizing <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Media zoekopdrachten<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Media queries zijn de hoeksteen van responsief webdesign. Ze stellen je in staat om verschillende CSS-stijlen toe te passen op basis van specifieke voorwaarden, zoals de schermgrootte of apparaatori\u00ebntatie van de browser van de bezoeker.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Basis Media Query Syntax<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd8e6a6 elementor-widget elementor-widget-code-highlight\" data-id=\"dd8e6a6\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\n\n@media (min-width: 768px) {\n\n\u00a0\u00a0\/* CSS styles for screens 768px or wider *\/\n\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c89ad42 elementor-widget elementor-widget-text-editor\" data-id=\"c89ad42\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Breakpoints:<\/b><span style=\"font-weight: 400;\"> De <\/span><span style=\"font-weight: 400;\">min-width<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">max-width<\/span><span style=\"font-weight: 400;\">, etc., binnen media queries, defini\u00ebren breakpoints waar je ontwerp verandert. Veelvoorkomende breakpoints richten zich op tablets, mobiele telefoons en grotere desktops.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Media Queries voor Afbeeldingen<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Je kunt media queries gebruiken om afbeeldingen anders te schalen op verschillende schermformaten:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c475496 elementor-widget elementor-widget-code-highlight\" data-id=\"c475496\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n  width: 100%;  \r\n  height: 300px; \r\n  object-fit: cover; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-560d7f7 elementor-widget elementor-widget-text-editor\" data-id=\"560d7f7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Uitleg:<\/b><span style=\"font-weight: 400;\"> In dit voorbeeld nemen afbeeldingen de volledige containerbreedte in op kleinere schermen en krimpen ze vervolgens naar 50% van de containerbreedte op schermen breder dan 768px.<\/span><\/p>\n<p><b>Belangrijke Tip:<\/b><span style=\"font-weight: 400;\">  Denk altijd mobiel-eerst! Begin met ontwerpen voor kleinere schermen en gebruik vervolgens media queries om het ontwerp voor grotere schermen geleidelijk te verbeteren.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Vloeiende Resizing Technieken<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Hoewel media queries je veel controle geven, wil je soms dat afbeeldingen soepel en proportioneel schalen over alle schermformaten, niet alleen bij specifieke breakpoints. Hier zijn een paar manieren om dit te bereiken:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Max-width: 100% en Height: auto (Herzien):<\/b><span style=\"font-weight: 400;\">  Als je je herinnert, hebben we deze techniek eerder ge\u00efntroduceerd. De ware kracht ligt in de automatische responsiviteit \u2013 afbeeldingen zullen nooit de breedte van hun container overschrijden en hun hoogte zal proportioneel aanpassen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Percentages combineren met Media Queries:<\/b><span style=\"font-weight: 400;\">  Je kunt percentages voor breedte binnen media queries gebruiken om vloeiende lay-outs te cre\u00ebren met gerichte aanpassingen. Bijvoorbeeld:<\/span><\/li>\n<\/ol>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-478ee4c elementor-widget elementor-widget-code-highlight\" data-id=\"478ee4c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg { \r\n  width: 100%; \r\n  height: auto;  \r\n}\r\n@media (min-width: 768px) {\r\n  img {\r\n    width: 50%;  \/* Images occupy 50% of their container on larger screens *\/\r\n  }\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc19d3d elementor-widget elementor-widget-text-editor\" data-id=\"fc19d3d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Vloeiende resizing is niet altijd de perfecte oplossing. Soms werken afbeeldingen met vaste afmetingen beter binnen specifieke ontwerpelementen. Het is essentieel om de juiste resizing technieken strategisch te kiezen op basis van je algehele lay-out.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Het &#8216;srcset&#8217; Attribuut<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Het <\/span><span style=\"font-weight: 400;\">srcset<\/span><span style=\"font-weight: 400;\"> attribuut, gebruikt met de <\/span><span style=\"font-weight: 400;\">&lt;img&gt;<\/span><span style=\"font-weight: 400;\">  tag, biedt een manier om de browser meerdere versies van dezelfde afbeelding aan te bieden in verschillende resoluties. Dit stelt de browser in staat om de meest geschikte afbeelding te selecteren op basis van het apparaat en de schermgrootte van de gebruiker.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Basissyntax<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2825604 elementor-widget elementor-widget-code-highlight\" data-id=\"2825604\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<img decoding=\"async\" src=\"my-image.jpg\" alt=\"A beautiful landscape\"\r\n     srcset=\"my-image-small.jpg 480w, \r\n             my-image-medium.jpg 800w, \r\n             my-image-large.jpg 1200w\">\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44082ef elementor-widget elementor-widget-text-editor\" data-id=\"44082ef\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>De &#8216;w&#8217; Descriptor:<\/b><span style=\"font-weight: 400;\"> Vertelt de browser de breedte van elke afbeeldingsversie.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Voordelen<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Verbeterde prestaties door onnodig grote downloads van afbeeldingen te voorkomen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Geoptimaliseerde weergave voor schermen met hoge resolutie.<\/span><\/li>\n<\/ol>\n<p><b>Let op:<\/b> <span style=\"font-weight: 400;\">srcset<\/span><span style=\"font-weight: 400;\"> is een krachtige tool voor geavanceerde responsieve beeldoptimalisatie, vaak gebruikt in combinatie met andere technieken die we hebben besproken.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Optimalisatie en Best Practices  <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Tools voor beeldoptimalisatie<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Hoewel je afbeeldingen handmatig kunt aanpassen met beeldbewerkingssoftware, stroomlijnen speciale optimalisatietools het proces en ontsluiten ze extra prestatieverbeteringen:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Elementor&#8217;s Afbeeldingsoptimalisator:  <\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Deze krachtige tool is naadloos ge\u00efntegreerd in de Elementor-ervaring en vereenvoudigt beeldoptimalisatie binnen je WordPress-workflow.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Belangrijke overwegingen<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Lossy vs. Lossless:<\/b><span style=\"font-weight: 400;\">  Lossy-compressie biedt grotere bestandsverkleining, maar met enig kwaliteitsverlies. Lossless behoudt volledige kwaliteit ten koste van iets grotere bestanden. Kies verstandig op basis van het type afbeelding.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Beeldformaat (Herzien):<\/b><span style=\"font-weight: 400;\">  Onthoud, JPEGs zijn over het algemeen beter voor foto&#8217;s, terwijl PNGs uitblinken voor graphics. Het kiezen van het juiste formaat v\u00f3\u00f3r optimalisatie is cruciaal!<\/span><\/li>\n<\/ol>\n<p><b>Pro Tip:<\/b><span style=\"font-weight: 400;\"> Vaak geeft het gebruik van een combinatie van Elementor Afbeeldingsoptimalisator voor kernbeeldverwerking en gespecialiseerde externe dienst voor specifieke behoeften je de meeste flexibiliteit en de beste resultaten.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">image-rendering Eigenschap<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">De <\/span><span style=\"font-weight: 400;\">image-rendering<\/span><span style=\"font-weight: 400;\">  eigenschap geeft hints aan de browser over hoe het de weergave moet prioriteren wanneer een afbeelding wordt vergroot of verkleind. Hier zijn de veel voorkomende waarden:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>auto:<\/b><span style=\"font-weight: 400;\">  De standaard van de browser. Het probeert meestal een balans te vinden tussen snelheid en kwaliteit.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>pixelated:<\/b><span style=\"font-weight: 400;\"> Behoudt een scherp, gepixeleerd uiterlijk, ideaal voor retro-stijl graphics of wanneer je opzettelijk harde pixelranden wilt behouden bij het vergroten.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>smooth:<\/b><span style=\"font-weight: 400;\"> Geeft prioriteit aan een gladder, minder gepixeleerd uiterlijk (dit kan vervaging introduceren bij het vergroten van afbeeldingen).<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Voorbeeld<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-16d5c62 elementor-widget elementor-widget-code-highlight\" data-id=\"16d5c62\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n  image-rendering: pixelated; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-78f3c46 elementor-widget elementor-widget-text-editor\" data-id=\"78f3c46\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Wanneer te gebruiken<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Pixel Art:<\/b> <span style=\"font-weight: 400;\">pixelated<\/span><span style=\"font-weight: 400;\"> is essentieel voor pixelkunst om de beoogde esthetiek te behouden.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Prestatieoverwegingen:<\/b><span style=\"font-weight: 400;\"> In sommige gevallen kan het kiezen van <\/span><span style=\"font-weight: 400;\">pixelated<\/span><span style=\"font-weight: 400;\"> kleine verbeteringen in rendersnelheid bieden voor vergrote afbeeldingen.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Moderne browsers zijn behoorlijk goed in automatische beeldweergave. Gebruik  <\/span><span style=\"font-weight: 400;\">image rendering<\/span><span style=\"font-weight: 400;\"> strategisch, aangezien het overschrijven van de standaardinstellingen soms onbedoelde gevolgen kan hebben.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Overwegingen bij het aanpassen van specifieke afbeeldingstypen<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Laten we de belangrijkste dingen uiteenzetten waar je aan moet denken bij het aanpassen van enkele van de meest voorkomende afbeeldingstypen die je op websites tegenkomt:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Held-beelden<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Grote, aandachttrekkende afbeeldingen moeten er fantastisch uitzien op alle formaten.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Bestandsgrootte-optimalisatie is cruciaal (overweeg formaten zoals WebP indien ondersteund).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Gebruik media queries of <\/span><span style=\"font-weight: 400;\">srcset<\/span><span style=\"font-weight: 400;\"> om optimale resolutie voor verschillende schermformaten te garanderen.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Fotogalerijen<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Gebruik miniaturen die snel laden, met links naar geoptimaliseerde versies op volledig formaat.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Implementeer technieken zoals lazy loading voor soepele beeldlaadervaringen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Consistente beeldverhoudingen in galerij-afbeeldingen cre\u00ebren een gepolijste look.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Productafbeeldingen (e-commerce)<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Afbeeldingen van hoge kwaliteit zijn essentieel voor het stimuleren van conversies.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Zoomfunctionaliteit kan nodig zijn, wat grotere afbeeldingsformaten vereist.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Consistente aanpassing en witruimte cre\u00ebren een overzichtelijke productcatalogus.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Overweeg het gebruik van een CDN (zoals Cloudflare Enterprise inbegrepen bij Elementor Hosting) voor snelle beeldlevering wereldwijd.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Door gebruikers ge\u00fcploade inhoud<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Implementeer gezondheidscontroles aan de serverkant om afbeeldingsafmetingen en bestandsgroottes te beperken.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Automatische optimalisatie om uploads van enorme, niet-geoptimaliseerde afbeeldingen te voorkomen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Toon duidelijke richtlijnen aan gebruikers over geaccepteerde afbeeldingsformaten en groottelimieten.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Browser compatibiliteit<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Hoewel moderne browsers uitstekende support bieden voor de meeste CSS-beeldherschalingstechnieken, is het essentieel om je bewust te zijn van mogelijke inconsistenties en hoe je deze kunt aanpakken.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Oudere browsers<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Het kan zijn dat ze <\/b><span style=\"font-weight: 400;\">niet support nieuwere functies zoals <\/span><span style=\"font-weight: 400;\">object-fit<\/span><span style=\"font-weight: 400;\"> of geavanceerd <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\"> gedrag.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Polyfills<\/b><span style=\"font-weight: 400;\"> of fallbacks kunnen nodig zijn om een consistente ervaring te bieden op oudere browsers (als het ondersteunen daarvan een vereiste is).<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Leveranciersprefixen<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Af en toe<\/b><span style=\"font-weight: 400;\">, vereisen experimentele CSS-functies leveranciersprefixen (bijv. <\/span><span style=\"font-weight: 400;\">-webkit-<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">-moz-<\/span><span style=\"font-weight: 400;\">) voor de breedste compatibiliteit totdat ze volledig gestandaardiseerd zijn.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Testen<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Grondig<\/b><span style=\"font-weight: 400;\"> test de weergave van afbeeldingen op je website in verschillende browsers en apparaten.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tools<\/b><span style=\"font-weight: 400;\"> zoals BrowserStack maken cross-browser testen makkelijk.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Progressieve verbetering<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Begin<\/b><span style=\"font-weight: 400;\"> met een solide basiservaring die overal werkt.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Gebruik <\/b><span style=\"font-weight: 400;\">technieken zoals feature detection om geavanceerde beeldvergrotingsfuncties toe te voegen voor browsers die ze support.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Met Elementor worden veel van deze compatibiliteitsproblemen voor je opgelost, waardoor responsieve en cross-browser beeldweergave wordt gegarandeerd zonder dat je elk klein detail hoeft te onderzoeken.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Geavanceerde Vergrotingstechnieken <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Viewport Eenheden (vh, vw)<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Viewport-eenheden bieden een manier om elementen te dimensioneren ten opzichte van de viewport (het zichtbare gedeelte van de browser). Zo verhouden ze zich tot het vergroten van afbeeldingen:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>vh:<\/b><span style=\"font-weight: 400;\"> 1vh is gelijk aan 1% van de viewport-hoogte.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>vw:<\/b><span style=\"font-weight: 400;\"> 1vw is gelijk aan 1% van de viewport-breedte.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Voorbeeld<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-575ca47 elementor-widget elementor-widget-code-highlight\" data-id=\"575ca47\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n  max-height: 80vh;  \/* Image height will never exceed 80% of the viewport height *\/\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cb67780 elementor-widget elementor-widget-text-editor\" data-id=\"cb67780\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Gebruiksscenario&#8217;s met Afbeeldingen<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Flexibele Groottes Instellen:<\/b><span style=\"font-weight: 400;\"> Combineer percentages en vaste eenheden om elementen te maken die van grootte veranderen maar specifieke marges behouden (bijv. een zijbalk die 30% van de breedte in beslag neemt minus een vaste marge van 20px).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Complexe Berekeningen:<\/b><span style=\"font-weight: 400;\"> Maak ingewikkelde vergrotingsregels die rekening houden met meerdere factoren.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Responsieve Aanpassingen:<\/b><span style=\"font-weight: 400;\"> Gebruik <\/span><span style=\"font-weight: 400;\">calc()<\/span><span style=\"font-weight: 400;\"> binnen media queries om de beeldvergroting op specifieke breekpunten fijn af te stellen.<\/span><\/li>\n<\/ul>\n<p><b>Let op:<\/b><span style=\"font-weight: 400;\"> Browser support voor <\/span><span style=\"font-weight: 400;\">calc()<\/span><span style=\"font-weight: 400;\"> is uitstekend, maar compatibiliteit moet altijd in gedachten worden gehouden.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Voorbeeld<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c38189b elementor-widget elementor-widget-code-highlight\" data-id=\"c38189b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n  max-width: 100%;  \r\n  height: auto; \r\n}\r\n@media (min-width: 900px) {\r\n  img {\r\n    width: calc(50% - 30px); \/* Image takes up 50% of its container minus 30px on larger screens *\/\r\n  }\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d0a618b elementor-widget elementor-widget-text-editor\" data-id=\"d0a618b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">CSS Filters en Transformaties<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS-filters en -transformaties bieden manieren om afbeeldingen visueel te manipuleren, waardoor creatieve mogelijkheden ontstaan die verder gaan dan basale vergroting.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Filters<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>grayscale:<\/b><span style=\"font-weight: 400;\"> Zet een afbeelding om in grijstinten.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>sepia:<\/b><span style=\"font-weight: 400;\"> Pas een vintage-achtige sepia-toon toe.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>blur:<\/b><span style=\"font-weight: 400;\"> Vervaag een afbeelding.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>brightness, contrast, saturation:<\/b><span style=\"font-weight: 400;\"> Pas deze visuele eigenschappen aan.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>En meer!<\/b><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Transformaties<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>scale:<\/b><span style=\"font-weight: 400;\"> Vergroot of verklein een afbeelding.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>rotate:<\/b><span style=\"font-weight: 400;\"> Draai een afbeelding.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>skew, translate:<\/b><span style=\"font-weight: 400;\"> Pas scheefte-effecten toe of herpositioneer een afbeelding.<\/span><\/li>\n<\/ul>\n<h5><span style=\"font-weight: 400;\">Voorbeeld<\/span><\/h5>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cc42968 elementor-widget elementor-widget-code-highlight\" data-id=\"cc42968\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg:hover {\r\n  filter: grayscale(100%); \r\n  transform: scale(1.1); \/* Image scales up slightly on hover *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eae8283 elementor-widget elementor-widget-text-editor\" data-id=\"eae8283\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Opmerking over Prestaties:<\/b><span style=\"font-weight: 400;\"> Overmatig gebruik van filters en transformaties kan mogelijk invloed hebben op de laadsnelheid van pagina&#8217;s, vooral op oudere apparaten. Gebruik ze strategisch voor gerichte effecten.<\/span><\/p>\n<p><b>Elementor Integratie:<\/b><span style=\"font-weight: 400;\"> Elementor biedt intu\u00eftieve visuele besturingselementen voor het toepassen van veel van deze effecten, waardoor je kunt experimenteren met beeldtransformaties zonder zelf code te hoeven schrijven.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Conclusie  <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Gedurende deze gids heb je geleerd dat het vergroten van afbeeldingen niet alleen gaat om het passend maken van plaatjes. Het is een cruciaal aspect van webprestaties, gebruikerservaring en het behouden van een professionele online aanwezigheid.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Door te begrijpen hoe CSS-eigenschappen zoals <\/span><span style=\"font-weight: 400;\">width<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">height<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">object fit<\/span><span style=\"font-weight: 400;\"> en <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\"> werken, heb je krachtige tools gekregen om beeldweergave te beheersen. We hebben responsieve beeldtechnieken en optimalisatie best practices verkend en zelfs geavanceerde vergrotingsmogelijkheden aangestipt.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Als je een WordPress-gebruiker bent, vereenvoudigt Elementor het hele proces. Van intu\u00eftieve beeldvergrotingsbesturingen en zijn ingebouwde Image Optimizer tot naadloze integratie met een prestatiegerichte hostingoplossing zoals Elementor Hosting, je hebt alles om verbluffende visuals te leveren zonder snelheid op te offeren.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Onthoud:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Optimaliseer je afbeeldingen <\/span><i><span style=\"font-weight: 400;\">voordat<\/span><\/i><span style=\"font-weight: 400;\"> je ze uploadt.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Houd altijd rekening met het doel en de context van de afbeelding bij het kiezen van vergrotingstechnieken.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Test de visuele weergave van je website op verschillende apparaten om een perfecte ervaring voor alle bezoekers te garanderen.<\/span><\/li>\n<\/ol>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Afbeeldingen zijn de levensader van moderne websites. Ze trekken de aandacht, roepen emoties op en bepalen de toon voor je hele online aanwezigheid. Maar prachtige plaatjes hebben een nadeel: niet-geoptimaliseerde afbeeldingen kunnen de snelheid van je website behoorlijk vertragen. Trage websites irriteren bezoekers, schaden je zoekmachinevermeldingen en ondermijnen uiteindelijk je hele online strategie.<\/p>\n","protected":false},"author":2024234,"featured_media":123643,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[515],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-123639","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bronnen"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Hoe je een afbeelding kunt schalen in CSS &amp; HTML<\/title>\n<meta name=\"description\" content=\"Afbeeldingen zijn de levensader van moderne websites. Ze trekken de aandacht, roepen emoties op en bepalen de toon voor je hele online aanwezigheid. Maar prachtige plaatjes hebben een nadeel: niet-geoptimaliseerde afbeeldingen kunnen de snelheid van je website behoorlijk vertragen. Trage websites irriteren bezoekers, schaden je zoekmachinevermeldingen en ondermijnen uiteindelijk je hele online strategie.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/nl\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hoe je een afbeelding kunt schalen in CSS &amp; HTML\" \/>\n<meta property=\"og:description\" content=\"Afbeeldingen zijn de levensader van moderne websites. Ze trekken de aandacht, roepen emoties op en bepalen de toon voor je hele online aanwezigheid. Maar prachtige plaatjes hebben een nadeel: niet-geoptimaliseerde afbeeldingen kunnen de snelheid van je website behoorlijk vertragen. Trage websites irriteren bezoekers, schaden je zoekmachinevermeldingen en ondermijnen uiteindelijk je hele online strategie.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/nl\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-03T06:20:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-09T14:52:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\\\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#\\\/schema\\\/person\\\/5d24783541c454816685653dfed73377\"},\"headline\":\"Hoe je een afbeelding kunt schalen in CSS &amp; HTML\",\"datePublished\":\"2025-03-03T06:20:27+00:00\",\"dateModified\":\"2026-01-09T14:52:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\\\/\"},\"wordCount\":2777,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/The-Role-of-Image-Optimization.png\",\"articleSection\":[\"Bronnen\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\\\/\",\"name\":\"Hoe je een afbeelding kunt schalen in CSS &amp; HTML\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/The-Role-of-Image-Optimization.png\",\"datePublished\":\"2025-03-03T06:20:27+00:00\",\"dateModified\":\"2026-01-09T14:52:17+00:00\",\"description\":\"Afbeeldingen zijn de levensader van moderne websites. Ze trekken de aandacht, roepen emoties op en bepalen de toon voor je hele online aanwezigheid. Maar prachtige plaatjes hebben een nadeel: niet-geoptimaliseerde afbeeldingen kunnen de snelheid van je website behoorlijk vertragen. Trage websites irriteren bezoekers, schaden je zoekmachinevermeldingen en ondermijnen uiteindelijk je hele online strategie.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\\\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/The-Role-of-Image-Optimization.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/The-Role-of-Image-Optimization.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bronnen\",\"item\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/category\\\/bronnen\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Hoe je een afbeelding kunt schalen in CSS &amp; HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#website\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/elemntor\\\/\",\"https:\\\/\\\/x.com\\\/elemntor\",\"https:\\\/\\\/www.instagram.com\\\/elementor\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/#\\\/schema\\\/person\\\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \\\/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\\\/\\\/elementor.com\\\/blog\\\/author\\\/itamarha\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/itamar-haim-8149b85b\\\/\"],\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/nl\\\/author\\\/itamarha\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Hoe je een afbeelding kunt schalen in CSS &amp; HTML","description":"Afbeeldingen zijn de levensader van moderne websites. Ze trekken de aandacht, roepen emoties op en bepalen de toon voor je hele online aanwezigheid. Maar prachtige plaatjes hebben een nadeel: niet-geoptimaliseerde afbeeldingen kunnen de snelheid van je website behoorlijk vertragen. Trage websites irriteren bezoekers, schaden je zoekmachinevermeldingen en ondermijnen uiteindelijk je hele online strategie.","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:\/\/elementor.com\/blog\/nl\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\/","og_locale":"nl_NL","og_type":"article","og_title":"Hoe je een afbeelding kunt schalen in CSS &amp; HTML","og_description":"Afbeeldingen zijn de levensader van moderne websites. Ze trekken de aandacht, roepen emoties op en bepalen de toon voor je hele online aanwezigheid. Maar prachtige plaatjes hebben een nadeel: niet-geoptimaliseerde afbeeldingen kunnen de snelheid van je website behoorlijk vertragen. Trage websites irriteren bezoekers, schaden je zoekmachinevermeldingen en ondermijnen uiteindelijk je hele online strategie.","og_url":"https:\/\/elementor.com\/blog\/nl\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-03-03T06:20:27+00:00","article_modified_time":"2026-01-09T14:52:17+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Geschreven door":"Itamar Haim","Geschatte leestijd":"14 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"Hoe je een afbeelding kunt schalen in CSS &amp; HTML","datePublished":"2025-03-03T06:20:27+00:00","dateModified":"2026-01-09T14:52:17+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\/"},"wordCount":2777,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/nl\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","articleSection":["Bronnen"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/nl\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\/","url":"https:\/\/elementor.com\/blog\/nl\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\/","name":"Hoe je een afbeelding kunt schalen in CSS &amp; HTML","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","datePublished":"2025-03-03T06:20:27+00:00","dateModified":"2026-01-09T14:52:17+00:00","description":"Afbeeldingen zijn de levensader van moderne websites. Ze trekken de aandacht, roepen emoties op en bepalen de toon voor je hele online aanwezigheid. Maar prachtige plaatjes hebben een nadeel: niet-geoptimaliseerde afbeeldingen kunnen de snelheid van je website behoorlijk vertragen. Trage websites irriteren bezoekers, schaden je zoekmachinevermeldingen en ondermijnen uiteindelijk je hele online strategie.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/nl\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-een-afbeelding-kunt-schalen-in-css-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/nl\/"},{"@type":"ListItem","position":2,"name":"Bronnen","item":"https:\/\/elementor.com\/blog\/nl\/category\/bronnen\/"},{"@type":"ListItem","position":3,"name":"Hoe je een afbeelding kunt schalen in CSS &amp; HTML"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/nl\/#website","url":"https:\/\/elementor.com\/blog\/nl\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/nl\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/nl\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/123639","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/comments?post=123639"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/123639\/revisions"}],"predecessor-version":[{"id":150120,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/123639\/revisions\/150120"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/media\/123643"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/media?parent=123639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/categories?post=123639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/tags?post=123639"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/marketing_persona?post=123639"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/marketing_intent?post=123639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}