Werken met foto’s en andere afbeeldingen
Een leeg vlak… een paar seconde later een afbeeldingen die in etapes ingeladen wordt…
Consequentie: “Een Google Pagespeed score die laag is, omdat pagina traag laad op een mobiele verbinding.” Vaak valt dit niet op bij mensen op kantoor, want die hebben een snelle vaste verbinding waar die 4.5Mb per afbeelding gewoon snel over de lijn knalt zo je scherm op. Maar ik zit een op mobiele hotspot en niet direct onder een 5G toren en dan valt het op.
Des te meer KB een bezoeker moet downloaden, des te langer het duurt voordat de pagina in zijn geheel geladen is. Hoe langer het kost om een pagina in zijn geheel te downloaden, des te meer strafpunten je van zoekmahcines zoals Google krijgt en dus lager rankt.
De oorzaak? Foute afbeeldingen. Hoe fout?
- A. “Uitgesneden” door middel van een screenshot te maken die vervolgens als .png opgeslagen wordt.
- B. Originele foto’s direct van de fotograaf met 144 pixel/inch resolutie en 6144px breed.
- C. Niet de juiste afbeeldingsformaat kiezen binnen WordPress in de afmeetingen dropdown.
A. Screenshots in plaats van correct herschalen
Je wilt niet de originele 10MB foto’s uploaden maar kleinere of een net iets andere uit uitsneden maken.
Als je op een Mac werkt dan kan dit eenvoudig met de “Preview / Voorvertoning” app.
Tip: Standaard worden screenshots opgeslagen als PNG en door deze standaard als JPEG op te slaan verbeter de laadtijd aanzienlijk.
B. Originele foto’s uploaden
C. Juiste afbeeldingsformaat kiezen
Tip OSX: Standaard screenshots op .jpg zetten
Het bestandsformaat van een screenshot wijzigen naar JPG op een Mac
OSX: Een handige 3rd-party tool gebruiken
Gebruik ik https://shottr.cc
Bestandsnaam in zijn geheel tonen
Hoe weet je dat je .png bestanden aan het gebruiken bent?
Finder > Settings > Show all finename extensions
Tip: Hernoem je bestandsnaam
Dit zegt niets over de afbeelding Screenshot-2024-04-24-at-16.15.34-e1713968342988.png
Hernoem het naar iets logisch / nuttigs. Is ook goed voor je SEO.