Hoe upload ik afbeeldingen in het juiste formaat?

Welk formaat kies je?

Kijk vooral naar de breedte in pixels. Een foto hoeft nooit breder te zijn dan de plek waar hij komt, met wat marge voor scherpe schermen.

Achtergrond van een sectie: 1920 px

Een sectie-achtergrond loopt over de hele breedte van het scherm. 1920 pixels breed is genoeg voor vrijwel elk scherm. Belangrijk: een sectie gebruikt de foto die je uploadt altijd op volle grootte. WordPress maakt wel kleinere versies, maar de achtergrond gebruikt die niet. Een foto van 6000 pixels wordt dus ook als 6000 pixels geladen.

Foto in een kolom: 1200 px

Staat de foto in een kolom naast tekst, dan is hij op een groot scherm hooguit zo’n 700 pixels breed. Met 1200 pixels blijft hij ook op scherpe schermen mooi.

Card en galerij: 800 tot 1200 px

In een card, galerij of slider zijn foto’s kleiner. 800 pixels is vaak genoeg. Opent de galerij een foto groot (de lightbox), neem dan 1200 pixels.

JPG, PNG, WebP of SVG?

• JPG: voor foto’s. Kleine bestanden, goede kwaliteit.
• WebP: een moderner formaat voor foto’s, vaak nog kleiner dan JPG met dezelfde kwaliteit. WordPress kan het gewoon tonen.
• PNG: voor afbeeldingen met een doorzichtige achtergrond, zoals een logo of een schermafbeelding. Voor foto’s is PNG veel te zwaar.
• SVG: voor logo’s en iconen. Blijft scherp op elke grootte en is heel klein. Je website accepteert SVG-bestanden.

Verkleinen voor je uploadt

Verklein en comprimeer je foto’s voordat je ze uploadt. Dat kan met gratis tools, bijvoorbeeld:

• Squoosh (squoosh.app): in je browser, verkleinen en omzetten naar WebP of JPG.
• TinyPNG (tinypng.com): comprimeert JPG, PNG en WebP zonder zichtbaar verschil.
• Op je computer: Foto’s (Windows) of Voorvertoning (Mac) kunnen een foto ook kleiner opslaan.

Een goede bestandsnaam

Geef het bestand een naam die zegt wat er op staat, met kleine letters en koppeltekens: keuken-renovatie-dokkum.jpg in plaats van IMG_4821.JPG. Google leest de bestandsnaam mee, en jij vindt de foto later sneller terug in de mediabibliotheek.

Stap 1: Open het uploadscherm

Ga in het menu links naar Media → Mediabestand toevoegen. Je kunt ook uploaden vanuit een blok: klik in het blok op het afbeeldingsveld en kies het tabblad Bestanden uploaden.

Stap 2: Sleep je foto’s erin

Sleep een of meer foto’s in het vak, of klik op Bestanden selecteren. Onder het vak zie je de maximale bestandsgrootte van upload. Die hangt af van de hosting. Is je foto groter, verklein hem dan eerst.

Stap 3: Controleer de details en vul de alt-tekst in

Klik in de bibliotheek op de foto. Rechts in Bijlagedetails zie je de Bestandsgrootte en de Afmetingen. Is een foto groter dan in de tabel hierboven, vervang hem dan door een kleinere versie. Vul hier ook meteen de Alternatieve tekst in: zie een goede alt-tekst invullen.

De Afbeelding grootte in een blok

WordPress maakt bij elke upload automatisch kleinere versies van je foto. In de blokken Afbeelding, Afbeelding slider en Voor & na slider kies je bij Afbeelding grootte welke versie de bezoeker krijgt. Bij de Galerij heet dat veld Preview afbeelding grootte.

• Volledige grootte (standaard): de foto zoals je hem uploadde.
• Large: maximaal 1024 pixels. Prima voor een foto in een kolom.
• Medium large: 768 pixels breed. Goed voor galerijen en sliders met meerdere foto’s naast elkaar.
• Medium en Thumbnail: klein. Thumbnail is vierkant bijgesneden.

Upload je al in de goede maat, dan kun je Volledige grootte laten staan.

Een afbeelding vervangen of verwijderen

Een afbeelding verwijder je in de mediabibliotheek: klik op de foto en kies onderaan Permanent verwijderen. Dat is echt definitief.

Een foto vervangen door een nieuwe versie gaat niet met één klik. Upload de nieuwe foto en kies hem opnieuw in elk blok waar de oude stond. Verwijder de oude pas daarna.

Lukt het niet?

• De upload mislukt of blijft hangen. Het bestand is waarschijnlijk groter dan de maximale uploadgrootte. Verklein de foto en probeer opnieuw.
• Mijn foto ziet er wazig uit. De gekozen Afbeelding grootte is te klein voor de plek. Kies een grotere versie of Volledige grootte.
• Mijn achtergrondfoto laadt traag. Een sectie gebruikt altijd de volle foto. Upload hem opnieuw op 1920 pixels breed en kies hem opnieuw in de sectie. Zie een foto als achtergrond van een sectie.
• Een foto staat er gedraaid op. Draai hem op je computer, sla hem opnieuw op en upload opnieuw.
• Mijn website is traag geworden. Lees waarom je website traag is en wat je zelf kunt doen.

Kom je er niet uit? Neem contact met ons op.

Veelgestelde vragen