Wereldbestormers

  • Home
  • Over Wereldbestormers
  • Portfolio
  • Blog
  • Contact
    • Vraag nu een offerte aan
optimaliseren afbeeldingen voor je website in photoshop

Hoe optimaliseer je afbeeldingen voor je website?

14 juli 2016 door Amelieke

Als je een website hebt wil je natuurlijk dat deze snel laadt. Als je vooral tekst hebt gaat dit vaak prima. Maar wat nu als je een website hebt met veel afbeeldingen, zoals een portfoliowebsite? Hoe zorg je dan dat je afbeeldingen snel laden? En als je de afbeeldingen dan kleiner maakt, hoe zorg je ervoor dat ze niet te slecht worden van kwaliteit?

Daar zijn verschillende manieren voor. In deze blog leg ik je een veel gebruikte manier uit.

Optimaliseer de afbeeldingen in Photoshop

 

Als je Photoshop hebt, raad ik je aan de afbeeldingen daarin te verkleinen en te optimaliseren. Photoshop biedt de handige optie ‘Opslaan voor web’. Bij deze optie kan je kiezen voor verschillende afbeeldingsformaten waaronder jpg en png. PNG gebruik je voor bestanden met transparantie, voor andere afbeeldingen kun je het beste jpg gebruiken.

 

    1. Open de afbeelding, en ga vervolgens naar ‘afbeeldingsgrootte’.  Kies hier het aantal pixels dat je wil hebben. Meestal is de content-area van je website zo’n 1100 pixels breed maximaal, dus als je een afbeelding wil die geen lightbox-effect heeft als je erop klikt, dan is 800 pixels breed meestal voldoende. Ik kies hier voor 1200 pixels breed omdat ik wil dat de afbeelding in een lightbox naar voren komt als je erop klikt.

      grootte-1200px
      Zet de grootte vantevoren al wat kleiner. Dit scheelt vaak omzettijd in Photoshopp
    2. Vervolgens sla je de afbeelding op voor web. Dit kan bij bestand – opslaan voor web. Je komt dan in een nieuw scherm. Hier kun je kiezen voor verschillende bestandsformaten. Omdat dit een afbeelding is zonder transparantie, kies ik hier voor JPG. Daar kun je dan weer kiezen tussen Medium, High, Very High en Maximum. Dit zijn de verschillende kwaliteiten. In dit voorbeeld laat ik je het verschil zien tussen High en Medium. Je ziet dat de bovenste JPEG medium is en de onderste JPEG high. De onderste is 127 kb terwijl de bovenste 80 kb is. Dit maakt dus best een groot verschil in grootte, en daarmee ook in laadtijd. Want stel dat je 10 afbeeldingen van 127 kb op je voorpagina hebt staan, dan laadt deze toch een paar seconden trager dan wanneer je 10 afbeeldingen van 80 kb erop hebt staan.
      jpg-medium
      JPG-medium kwaliteit

      jpg-high-save-for-web
      JPG-high kwaliteit
    3. Maar… Er zit natuurlijk een addertje onder het gras. Want minder kb is niet per definitie beter. Zo zie je bij de Medium versie wat rare vage ‘korrels’ rondom de koepel ontstaan. Dit noemen we JPG-artefacten. En als je mooie foto’s wil plaatsen, wil je dit natuurlijk liever niet zien op je site.
      verschillende kwaliteitsopties photoshop save for web
      v.l.n.r.: Maximumkwaliteit: weinig artefacten maar 524kb, high kwaliteit: enkele artefacten en 127kb, medium: veel artefacten en 80kb

       

    4. Dus wat dan te doen? Je wil geen artefacten, maar je wil ook niet dat je pagina traag laadt. Daarvoor heb ik een paar vuistregels:
      1. Kies niet voor maximumkwaliteit, maar voor high of very high. Dit scheelt al snel een paar honderd kb terwijl het verschil soms nauwelijks zichtbaar is.
      2. Probeer de meeste foto’s onder 100 kb te krijgen. Het is geen probleem als je één afbeelding hebt die groter is, zolang ze het maar niet allemaal zijn.
      3. Geef de afbeeldingen de maximale grootte die je nodig hebt. Dus als je een afbeelding nodig hebt die je over de hele breedte wil laten zien in een blog maak je die maximaal 800/900 px breed. Wil je een afbeelding in een lightbox, dan kun je kiezen voor een maximale breedte van 1200px. Wil je een grote kopafbeelding, dan kun je kiezen voor maximaal 1400px. (Kijk ook even wat je thema aanraadt indien je wordpress gebruikt) Wil je een headerbanner die ook op grote schermen doorloopt, dan kun je zelfs kiezen voor maximaal 2000px.
        Dit zijn globale maten, en deze kunnen per website weer verschillen!

        Kwaliteit High, 1200px 128 kb
        Kwaliteit High, 1200px 128 kb

        800px, 63 kb
        Kwaliteit high, 800 px, 63kb

Gedocumenteerd onder: blog, ontwerptips Tags: optimaliseren afbeeldingen, photoshop

Wil je ook een logo, flyer of website waarmee jij jouw missie aan de wereld kan tonen?

Laatste berichten

gratis ontwerpprogramma's voor en nadelen

Gratis ontwerp­programma’s : de voor- en de nadelen

27 mei 2016

Dus je hebt een logo, een huisstijl en alles wat daarbij hoort. Maar nu wil je je eigen blogheaders … [Lees meer...]

Contact

  • Wereldbestormers creatieve communicatie

  • Amelieke van de Lavoir
  • info@wereld-bestormers.nl
  • Paviljoensgracht 70
  • 2512 BR Den Haag
  • 06-37179862

Vraag een offerte aan

Ben je op zoek naar een ontwerp?

We gebruiken functionele en analytische cookies om ervoor te zorgen dat onze website zo soepel mogelijk draait. Als je doorgaat met het gebruiken van de website, gaan we er vanuit dat ermee instemt.AkkoordNiet akkoordMeer lezen