Afbeeldingen: drie optimalisatietips om uw site te versnellen - DeLaatbusiness

Afbeeldingen: drie optimalisatietips om uw site te versnellen

4 min


118
6 gratis internet marketing ebooks, klik hier voor download

Mensen houden van snelle websites en Google ook.

In feite is de snelheid van uw website een ranking factorin de zoekresultaten van Google- zoekmachines .

Als uw site snel wordt geladen, is de kans groter dat deze wordt weergegeven wanneer mensen naar uw merk zoeken. Dit in combinatie met de wetenschap dat een snelle site zorgt voor een betere gebruikerservaring (UX), betekent dat een snellere website kan leiden tot hogere conversies.

Als uw website niet zo snel wordt geladen als u wilt, is de kans groot dat uw afbeeldingen de schuld krijgen .

Hier zijn enkele veelgemaakte fouten die mensen maken met betrekking tot het optimaliseren van afbeeldingen voor hun website.

Afbeeldingen zijn te groot

Veel marketeers en uitgevers gebruiken graag grote afbeeldingen met een hoge resolutie op hun site, in de overtuiging dat deze afbeeldingen een betere gebruikerservaring zullen bieden.

Het probleem is dat afbeeldingen met een hoge resolutie vaak een erg grote bestandsgrootte hebben en het laden lang duurt, vooral als er meerdere afbeeldingen op dezelfde webpagina staan.

We hebben veel uitgevers afbeeldingen zien uploaden in het bereik van 2Mb tot 5Mb in hun blog of inhoudspagina’s. Deze afbeeldingsgrootte is veel te groot voor het web en is een van de meest voorkomende fouten die websites vertragen.

Als uw afbeelding groter is dan 500 kb, is er mogelijk iets mis en kan de afbeelding worden gecomprimeerd.

Bekijk deze tips voordat u nieuwe afbeeldingen uploadt naar uw webpagina of blogpost:

  • Voordat u een afbeelding uploadt, controleert u de bestandsgrootte (klik met de rechtermuisknop op de afbeelding en kies Eigenschappen)
  • Houd beeldbestanden kleiner dan 500 kb (en onder 100 kb indien mogelijk)
  • Er zijn veel online hulpmiddelen waarmee u uw afbeeldingen kunt comprimeren om een ​​kleinere bestandsgrootte te krijgen, zoals io , CompressJPG en TinyPNG .
  • Als u Photoshop gebruikt om uw afbeeldingen voor te bereiden, houdt u de dimensies in de gaten en zorgt u ervoor dat de DPI is ingesteld op 72 dpi (beeldformaat / afbeeldingsformaat) en vergeet niet om ‘Opslaan voor web’ op te geven om de uiteindelijke af te drukken bestandsgrootte te beheren.
  • Converteer uw afbeeldingen naar de juiste bestandstypen. In de meeste gevallen wilt u JPG gebruiken. Als uw afbeelding echter transparantie gebruikt (zoals een afbeelding met een doorzichtige achtergrond), moet u PNG gebruiken. Er zijn enkele zeldzame gevallen waarin GIF het beste is, maar gebruik bij twijfel altijd JPG.

Een specifiek voorbeeld: een exclusief online designer schoenenmerk gebruikt veel grote banners en producten op zijn modewebsite die de Google PageSpeed-score naar slechts 20/100 sleepte.

We creëerden een dagelijkse cron-taak (geautomatiseerde taak die dagelijks wordt uitgevoerd) om grote afbeeldingen automatisch te verkleinen tot kleinere webstandaarden, met behoud van een goede kwaliteit.

In de onderstaande schermafbeelding hebben we de bestandsgrootte van een afbeelding verkleind van 1,3 MB naar slechts 142 KB.

metallics webpagina

verminder de paginasnelheidsgrafiek

Eenvoudig door het verkleinen van de bestandsgrootte, verhoogden we de Google PageSpeed-score van 20/100 naar 58/100.

Afbeeldingen automatisch schalen

Een andere veel voorkomende fout bij afbeeldingen is het automatisch schalen van grote afbeeldingen, zodat ze kleiner worden weergegeven dan ze in werkelijkheid zijn.

Dit is vaak handiger voor ontwikkelaars en contentmakers, maar kan een website echt vertragen.

Een grote fotobanner in een bericht kan bijvoorbeeld ook elders op de site als een kleine miniatuur worden gebruikt.

De ontwikkelaar, in plaats van meerdere versies van de afbeelding te maken (bijv. 1000 × 425 voor de banner en 64 × 64 voor een zijkolom), gebruikt code om dezelfde grote afbeelding automatisch te schalen om als een kleine miniatuur weer te geven. Dus een grote afbeelding wordt onnodig geladen. Dit verkort de ontwikkelingstijd, maar de paginasnelheid betaalt de prijs.

Om nog maar te zwijgen, automatisch geschaalde afbeeldingen kunnen er vervormd uitzien omdat ze zijn uitgerekt met code. De miniatuur hieronder is bijvoorbeeld automatisch geschaald van 1000 × 425 pixels naar 64 × 64 pixels en is vervormd.

vervormde miniatuur

vervorming verminderen op miniatuur

Let op tijden waarin dezelfde afbeelding vele malen op uw site wordt gebruikt. Als uw site 12 verschillende groottevariaties vereist op 12 locaties (ongeveer 25 × 25, 40 × 40, 200 × 200, 658 × 258, 56 × 56, 64 × 64, 92 × 92, 150 × 156, 110 × 110) , 160 × 160 en 180 × 180), dat is waarschijnlijk te veel, en u zou dat kunnen beperken tot minder dan vier.

Maak vervolgens een afzonderlijke afbeelding voor elk ander formaat en laad de beeldformaatversie op de juiste grootte in plaats van grote afbeeldingen automatisch te schalen om er kleiner uit te zien dan ze in werkelijkheid zijn.

Gebrek aan beeldcaching

Zelfs als u de juiste beeldcompressie gebruikt en correct geschaalde afbeeldingen weergeeft, kan het laden van een pagina die erg beeldintensief is nog steeds lang duren. Aangezien afbeeldingen statische inhoud zijn, is het gebruik van CDN-caching een geweldige manier om de laadtijd te versnellen.

Caching (uitgesproken als “verzilveren”) is het opslaan van gegevens in een tijdelijk opslaggebied dat een cache wordt genoemd. U hebt bijvoorbeeld waarschijnlijk opgemerkt dat een website die u in het verleden hebt bezocht sneller wordt geladen dan een site waar u nog nooit bent geweest. Dit komt omdat de bezochte website wordt gecacht door uw computer.

Een CDN (Content Delivery Network) is een netwerk van servers dat inhoud in cache (zoals afbeeldingen) van websites naar gebruikers levert, op basis van de geografische locatie van de gebruiker.

Als u bijvoorbeeld in New York bent en naar een website vanuit India kijkt, kunt u de afbeeldingen laden van een server die zich in New York bevindt, in plaats van afbeeldingen van over de hele wereld te laden.

Een site die CDN-caching gebruikt, kan veel sneller afbeeldingen en andere statische inhoud leveren, vooral in piekverkeerstijd, omdat afbeeldingen niet rechtstreeks van de webserver worden geladen, maar van een cacheserver met een veel hogere snelheid.

Bovendien helpt een CDN u ook meer bezoekers tegelijkertijd te bedienen. Als uw site een onverwachte of onverwachte piek in het verkeer ervaart, kan een CDN uw site effectief laten functioneren.


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format