Afbeeldingen optimaliseren voor het web op Windows

Optimaliseer afbeeldingen voor het web op Windows met een workflow die eerst resize, formatvergelijkingen, responsieve varianten, visuele checks en gemeten levering.

Begin bij het netwerkverzoek, niet bij de design export. Een productfoto van 3000 pixel kan er correct uitzien in een kaart van 640 pixel omdat CSS deze omlaag schaalt, maar de browser overdraagt nog steeds de grote bron. De onderstaande Windows workflow vindt die mismatch, maakt zinvolle varianten en controleert de pagina na implementatie.

Vind de afbeeldingen die het meest kosten

Open de pagina in Microsoft Edge, druk op F12, selecteer Network, herlaad en filter op Img. Sorteer op overgedragen grootte. Noteer drie feiten voor elk duur verzoek:

De pixelafmetingen van het bestand.
De weergegeven breedte in het Elements paneel.
Of het zich boven de vouw bevindt of later wordt geladen.

Een hero die wordt weergegeven op 1200 pixel kan een bron van 1920 of 2400 pixel nodig hebben voor dichte displays. Het heeft zelden de originele camera export van 6000 pixel nodig. Een kaart die wordt weergegeven op 360 pixel moet niet hetzelfde bestand aanvragen als de hero.

Resize één afbeelding in Paint

Paint is voldoende om één te grote bron te corrigeren:

Open de afbeelding en kies Resize and skew.
Houd Maintain aspect ratio ingeschakeld.
Voer de vereiste pixelbreedte in, geen percentage dat is geraden op basis van bestandsgrootte.
Gebruik Save as zodat het masterbestand onaangetast blijft.

Maak voor een kaart van 640 pixel een standaard kandidaat van 800 pixel en een kandidaat voor dichte displays van 1280 pixel. Controleer kleine tekst en dunne productranden na het resize. Als de bron transparantie bevat, sla deze dan niet op als JPEG.

Batch resize met PowerToys

Microsoft PowerToys bevat Image Resizer , dat resize commando’s toevoegt aan Verkenner. Definieer breedtes die overeenkomen met de echte breakpoints van de site, zoals 480, 960 en 1600 pixel, en maak vervolgens kopieën in plaats van originele bestanden te vervangen.

PowerToys is handig voor afmetingen, maar het is geen complete delivery pipeline. Bestandsnaming, formaatconversie, responsieve markup en visuele review blijven belangrijk. Zet gegenereerde kandidaten in een aparte map zodat ze niet worden verward met bron artwork.

Kies JPEG, PNG, WebP of AVIF

Asset	Zinvolle delivery formaat	Controleer nauwkeurig
Product- of editorial foto	WebP, AVIF of JPEG	Textuur, verlopen, huidtinten
Screenshot met kleine tekst	PNG of hoogwaardige WebP	Glyph randen en dunne lijnen
Logo of icoon	SVG wanneer de bron vector is	Correcte view box en toegankelijk label
Transparantie met zachte schaduwen	WebP of PNG	Halos op lichte en donkere achtergronden

Converteer niet elke PNG naar JPEG. Dat kan transparantie verwijderen en ringing rond tekst creëren. Converteer ook geen JPEG foto naar PNG; dit maakt het bestand meestal groter zonder verloren detail te herstellen. Zie compressie met en zonder kwaliteitsverlies voor de onderliggende tradeoff.

Lever responsieve afbeeldingen correct

Compressie alleen maakt een afbeelding niet responsief. Bied breedte kandidaten aan en laat de browser er één selecteren:

<img
  src="product-960.webp"
  srcset="product-480.webp 480w, product-960.webp 960w, product-1600.webp 1600w"
  sizes="(max-width: 720px) 100vw, 50vw"
  width="960"
  height="640"
  alt="Black travel bag open to show the interior compartments"
>

Google beveelt standaard afbeeldingselementen, nuttige alt tekst, responsieve kandidaten en een fallback src aan in zijn image SEO guidance . Breedte en hoogte reserveren lay-out ruimte. Alt tekst moet het doel van de afbeelding beschrijven, niet een lijst met trefwoorden herhalen.

Controleer het resultaat in Edge

Herlaad met uitgeschakelde cache op desktop- en mobiele breedtes. Bevestig dat de browser de verwachte srcset kandidaat kiest, de hero de lay-out niet verschuift en tekst leesbaar blijft. Gebruik vervolgens PageSpeed Insights of veldgegevens om te bepalen of afbeeldingswijzigingen de daadwerkelijke pagina hebben verbeterd. Google behandelt Core Web Vitals als één onderdeel van de page experience, geen vervanging voor nuttige content.

Bewaar niet-releasede productafbeeldingen lokaal tot publicatie. Zie privacyrisico’s van online compressietools op Windows voordat je embargoed assets naar een derde partij service stuurt.

Wanneer GetCompress past bij web asset preparation

Paint en PowerToys zijn voldoende voor af en toe resize. GetCompress is de betere keuze wanneer een Windows team gemengde PNG, JPEG, HEIC, TIFF en andere bronnen ontvangt die consistente afmetingen, formaatvarianten en visuele review nodig hebben. Opgeslagen presets en batch queues bereiden lokale delivery copies voor voordat ze het repository of CMS binnenkomen.

Het vervangt niet responsieve markup, CDN configuratie, caching of performance meting. Test de geïmplementeerde pagina en houd de source masters gescheiden van gegenereerde web assets.