Tips van Squarespace voor het opmaken van afbeeldingen voor weergave op het web
Eén van mijn hobby’s (ik ben best wel multi-passionate ;-)) is fotografie. Ik vind het zoeken en gebruiken van afbeeldingen op een website dan ook het allerleukste gedeelte van het ontwerpproces. Soms kan ik er zelfs een beetje in doorslaan, dan wil ik voor perfectie gaan, wat niet altijd 100% mogelijk is.
Als ik dat beeld dan gevonden heb, wil ik ook dat het zo goed mogelijk wordt weergegeven op de website. Hoe groter en zwaarder het beeld, hoe scherper en mooier het eruitziet op een website, vooral als het op een groot scherm weergegeven wordt. Maar dat vertraagt je site ook weer enorm, en dat maakt dat het geen fijne ervaring is voor bezoekers. Daarnaast is het lastig om hoog te ranken in zoekresultaten. Wil je weten hoe je kan checken of jouw website snel genoeg is om goed te functioneren? Lees dan deze blog.
Squarespace maakt het ons makkelijk en heeft een lijstje met vereisten voor afbeeldingen op een Squarespace-website. Ik zet ze hieronder neer, maar wil je er meer over lezen, neem dan vooral het document van Squarespace even door. Je kunt afbeeldingen tegenwoordig zo goed opslaan zodat ze niet te zwaar zijn, maar de kwaliteit behouden blijft. Het is het waard om je er even in te verdiepen.
Tips van Squarespace voor het opmaken van afbeeldingen voor weergave op het web
Bestandstypes: je kunt .jpg, .gif of .png gebruiken.
Bestandsgrootte: er is een limiet van 20 MB, maar gebruik afbeeldingen van 500 KB of minder om je site snel te laten laden.
Bestandsnaam: gebruik alleen letters, cijfers, underscores en koppeltekens.
Afbeeldingsbreedte: 1500 - 2500 pixels. 2500 is in de meeste gevallen ideaal, maar hoe smaller, hoe sneller je pagina zal laden. De afbeeldingen die voor de verschillende apparaten gegenereerd worden (omdat Squarespace-websites responsive zijn), variëren in breedte van 100 tot 2500 pixels.
Resolutie: 120 MP (megapixel)-limiet. Om de resolutie van je afbeelding te vinden, gebruik je deze calculator of vermenigvuldig je de afmetingen en die deel je vervolgens door 1 miljoen. Een afbeelding van 1500px x 1650px is bijvoorbeeld 2,47 MP.
Kleurmodus: RGB (rood, groen, blauw)
Kleurprofiel: sRGB
Afbeeldingen bewerken voor het web
Je kunt afbeeldingen rechtstreeks in Squarespace bewerken, maar ik doe het altijd van tevoren. Ik gebruik daarvoor Photoshop of Lightroom (betaalde versie), maar je kunt ook gratis programma’s als GIMP of Pixlr gebruiken.
Check je afbeelding aan de eisen voor het web voldoet
Om te bepalen of je afbeelding aan de eisen voor het web voldoet, moet je de informatie van de afbeelding bekijken. Zo kun je dat doen:
Mac
Selecteer de afbeelding op je computer
Druk op Command + I.
Kijk bij Algemeen en Meer info
Windows
Selecteer de afbeelding op je computer
Druk op Alt + Enter.
Klik in het venster dat wordt geopend op Details.
Succes ermee! Werk jij trouwens ook met Lightroom? Dit zijn de ideale instellingen bij het exporteren van foto’s uit Lightroom voor een website.
Ben jij trouwens net als ik een creatief iemand die graag bezig is met design? In het e-boek ‘Visuele Branding: De Basis voor Jouw Nieuwe Website’ neem ik je met een gratis mini-workshop in 3 simpele stappen mee om een sterke visuele basis te leggen voor je merk!