Naar inhoud springen

Afbeeldingen optimaliseren voor WordPress op Mac

Optimaliseer WordPress-afbeeldingen op de Mac voordat je ze uploadt: pas de grootte aan op de thema-behoeften, kies JPEG, PNG of WebP, behoud responsieve weergave en controleer de live pagina.

De WordPress-mediuploader accepteert je 6 MB grote PNG-hero, maar de homepage voelt nog steeds traag aan omdat het thema het volledige bestand in src weergeeft in plaats van een aangepaste variant. Afbeeldingen optimaliseren voor WordPress begint al vóór de upload: pas de pixelbreedte aan op het contentgebied van je thema, kies JPEG of WebP en comprimeer lokaal zodat de bibliotheek slanke bronbestanden opslaat.

WordPress-uploadlimieten in de praktijk

Hostingconfiguraties stellen upload_max_filesize en post_max_size vast. Een enkele foto van 10 MB kan wel slagen, terwijl een batch van twaalf bestanden stil faalt of time-out geeft.

LimiettypeWat je ervaart
PHP-uploadcapEnkel bestand wordt afgewezen boven de drempel
Totale POST-grootteUpload van meerdere bestanden faalt halverwege de batch
Geheugen bij resizeFouten bij server-side thumbnailgeneratie
CDN-quotaLangzame admin, geen harde blokkade

Los bronbestanden op je Mac op voordat je ze importeert in de Mediabibliotheek. Kleinere bestanden uploaden sneller en verminderen het werk voor server-side thumbnails. Zie hoe je afbeeldingen comprimeert op Mac voor algemene regels voor resize en formaten.

Aanbevolen formaten en maten

WordPress core ondersteunt JPEG, PNG, GIF en WebP in moderne installaties. Thema’s en plugins variëren in hoe ze srcset en moderne formaten genereren.

ActivumAanbevolen aanpak
Uitgelichte heroJPEG of WebP op 2x de contentbreedte van het thema
Inline blogfoto1200 tot 1600 px brede JPEG
Logo met transparantiePNG na oxipng, of SVG wanneer het thema dit toelaat
GalerijbatchConsistente maximale breedte binnen de set

Lees verliesvrij versus compressie met kwaliteitsverlies voordat je elke foto als verliesvrije PNG opslaat. Foto’s horen thuis in verliesrijke JPEG of WebP na resize.

Wanneer je thema WebP-ondersteuning documenteert, converteer heroes dan lokaal. PNG naar WebP op Mac behandelt de export vanuit ontwerp-PNG-bronnen.

Afbeeldingen voorbereiden voor upload

Een herhaalbare Mac-werkstroom:

  1. Noteer de content_width van het thema of meet de live kolom in de browser devtools.
  2. Exporteer vanuit het ontwerp op die breedte keer twee voor Retina, niet op artboard 3x.
  3. Pas de grootte aan in Voorvertoning als exports de maat overschrijden (Extra’s → Grootte aanpassen…).
  4. Exporteer JPEG op kwaliteit 82 tot 85 of WebP via cwebp.
  5. Upload het geoptimaliseerde bestand, niet de 4000 px master.

Verwijder GPS-EXIF-gegevens van evenementfoto’s wanneer de locatie niet gepubliceerd moet worden. Het verwijderen van metadata is apart van de bytegrootte, maar is belangrijk voor privacy op publieke blogs.

Vermijd het uploaden van camera-HEIC wanneer auteurs op Windows het activum niet kunnen hergebruiken. Converteer eerst naar JPEG op je Mac.

Uitgelichte afbeeldingen en contentbreedte

Uitgelichte afbeeldingen worden vaak breder weergegeven dan inline figuren, maar nog steeds onder de volledige cameraresolutie.

WordPress genereert responsieve srcset en sizes-markup sinds versie 4.4. De documentatie over responsieve afbeeldingen van WordPress legt uit hoe tussenliggende maten de browser in staat stellen een geschikte kandidaat te kiezen. Controleer of het thema deze markup gebruikt voor uitgelichte afbeeldingen, kaarten en aangepaste blokken in plaats van ervan uit te gaan dat elke afbeelding in de Mediabibliotheek responsief wordt geleverd.

ThemalayoutExporthint
800 px contentkolom1600 px breedte voor uitgelichte afbeelding
Volledig-breed blokiem thema1920 tot 2400 px max, tenzij het ontwerp meer vereist
KaartgridMatch de CSS-breedte van de kaart keer twee

Regenereer thumbnails pas nadat je het bronbestand in de bibliotheek hebt vervangen. WordPress bewaart oudere maten totdat plugins deze hebben herbouwd. Upload eerst de juiste maat om oversized -scaled-tussenbestanden te voorkomen.

Combineer met afbeeldingen optimaliseren voor web op Mac wanneer dezelfde activum ook een statische landingspagina buiten WordPress voeden.

Batch voor de mediabibliotheek

Blogmigraties en fotoreportages betekenen tientallen bestanden in één sessie.

mkdir wp-upload
for f in *.jpg; do sips -Z 1920 -s formatOptions 85 "$f" --out "wp-upload/$f"; done

Organiseer originals/ en wp-upload/ apart. Verwijder masters nooit voordat het bericht live is en geverifieerd.

Online WordPress-afbeeldingsoptimalisatoren sturen bestanden naar derden. Voor conceptberichten, embargoed screenshots en werk-in-progress voor klanten, comprimeer lokaal. Zie zijn online bestandcomprimeerders veilig voor wat upload eigenlijk betekent.

Documenteer de maximale breedte in je redactionele checklist zodat bijdragers stoppen met het uploaden van telefoonfoto’s in volledige resolutie.

Voeg alt-tekst toe na upload, niet voor compressie. Alt-tekst heeft geen invloed op bytes, maar het combineren van geoptimaliseerde bestanden met beschrijvende alt-tekst houdt toegankelijkheidsaudits gescheiden van bestandsgrootteaudits.

Wanneer een plugin WebP op de server genereert, vermindert lokale WebP-voorbereiding nog steeds de uploadtijd en de verwerkingsbelasting aan de admin-kant tijdens bulkimports.

GetCompress gebruiken

GetCompress behandelt gemengde afbeeldingsmappen op je Mac zonder upload. Handig wanneer redacteuren een maand aan berichten offline voorbereiden.

  • Sleep een map met figuren en stel de maximale breedte plus JPEG- of WebP-output in voor WordPress-import.
  • Sla voorinstellingen op (bijvoorbeeld “WP featured 1920 JPEG q85”) afgestemd op je themamaten.
  • Bekijk tekstrijke screenshots voordat je batchexport uitvoert.
  • Voer batchafbeeldingen optimaliseren voor WordPress op Mac uit wanneer fotoreportages meer dan tien bestanden per artikel bevatten.
  • Converteer HEIC-iPhone-foto’s naar JPEG in één doorloop voordat auteurs de admin-uploader openen.

GetCompress vervangt niet WordPress-plugins die front-end markup herschrijven. Het bereidt bronnen voor zodat plugins en CDNs later minder hoeven te optimaliseren. Mapbewaking kan een to-upload/-directory in de gaten houden en nieuwe exports comprimeren wanneer het ontwerp elke week blogactivum overdraagt.

Controleer één uitgelichte afbeelding op mobiel na upload. Pas de breedte aan voordat je de lazy-loadinstellingen van de plugin afstelt.