In dit artikel leest u hoe u uw afbeeldingen en foto’s kunt optimaliseren voordat u ze uploadt naar uw website. Eén van de meest voorkomende oorzaken van een trage website blijkt vaak grote foto’s te zijn.
Zo ook foto’s die u met uw smartphone maakt zijn tegenwoordig van dusdanige hoge kwaliteit dat deze uw website enorm traag kunnen maken.
De stappen om een foto te optimaliseren zijn:
- Formaat wijzigen
- Ga snel naar: Formaat aanpassen (Windows)
- Ga snel naar: Formaat aanpassen (Mac)
- Bestandsgrootte verkleinen
- Ga snel naar: Afbeeldingen bewerken met iLoveIMG
1.1 Voorbeeld foto vóór optimalisatie
Hier een overzicht van een paar telefoons met de afmetingen en bestandsgrootte:
Samsung:
Samsung Galaxy S23 Ultra:
- Resolutie hoofdcamera: 16.384 x 12.288 px (200 MP)
- Resolutie ultra-groothoekcamera: 4.000 x 3.000 px (12 MP)
- Resolutie telelens: 3.648 x 2.736 px (10 MP x2)
- Bestandsgrootte afbeelding: Een hoge-resolutie foto kan rond de 30-40 MB zijn, afhankelijk van de modus (RAW of JPEG).
Samsung Galaxy Z Fold 5:
- Resolutie hoofdcamera: 8.160 x 6.120 px (50 MP)
- Resolutie ultra-groothoekcamera: 4.000 x 3.000 px (12 MP)
- Resolutie telelens: 3.648 x 2.736 px (10 MP)
- Bestandsgrootte afbeelding: Meestal 10-25 MB, afhankelijk van compressie.
Samsung Galaxy Z Flip 5:
- Resolutie hoofdcamera (wide en ultra-wide): 4.000 x 3.000 px (12 MP)
- Bestandsgrootte afbeelding: Ongeveer 5-15 MB, afhankelijk van resolutie en formaat.
Samsung Galaxy S23+:
- Resolutie hoofdcamera: 8.160 x 6.120 px (50 MP)
- Resolutie ultra-groothoekcamera: 4.000 x 3.000 px (12 MP)
- Resolutie telelens: 3.648 x 2.736 px (10 MP)
- Bestandsgrootte afbeelding: Vergelijkbaar met Z Fold 5, rond de 10-25 MB.
iPhone:
iPhone 15 Pro Max:
- Resolutie hoofdcamera: 8.064 x 6.048 px (48 MP)
- Resolutie ultra-groothoekcamera: 4.032 x 3.024 px (12 MP)
- Resolutie telelens: 4.032 x 3.024 px (12 MP)
- Bestandsgrootte afbeelding: Hoge-resolutie foto's kunnen rond de 20-30 MB zijn in HEIF/RAW-formaat.
iPhone 15 Pro:
- Resolutie hoofdcamera: 8.064 x 6.048 px (48 MP)
- Resolutie ultra-groothoekcamera: 4.032 x 3.024 px (12 MP)
- Resolutie telelens: 4.032 x 3.024 px (12 MP)
- Bestandsgrootte afbeelding: Gelijk aan iPhone 15 Pro Max, rond de 20-30 MB.
iPhone 15:
- Resolutie hoofdcamera: 8.064 x 6.048 px (48 MP)
- Resolutie ultra-groothoekcamera: 4.032 x 3.024 px (12 MP)
- Bestandsgrootte afbeelding: 15-25 MB, afhankelijk van de modus.
iPhone 14 Pro Max:
- Resolutie hoofdcamera: 8.064 x 6.048 px (48 MP)
- Resolutie ultra-groothoekcamera: 4.032 x 3.024 px (12 MP)
- Resolutie telelens: 4.032 x 3.024 px (12 MP)
- Bestandsgrootte afbeelding: Vergelijkbaar met de iPhone 15-serie, rond de 20-30 MB.
iPhone 16 (geschatte gegevens op dit moment):
- Resolutie hoofdcamera: Verwacht 8.064 x 6.048 px (48 MP, vergelijkbaar met de iPhone 15).
- Resolutie ultra-groothoekcamera: 4.032 x 3.024 px (12 MP).
- Resolutie telelens: 4.032 x 3.024 px (12 MP).
- Bestandsgrootte afbeelding: Verwacht 20-30 MB in HEIF/RAW-formaat.
Zoals u kunt lezen is het formaat van een hedendaagse smartphone camera bijna gelijk aan het formaat van een kleine spiegelreflexcamera (DSLR). Dit is echter zonde van uw website aangezien deze volledige resolutie eigenlijk nooit volledig benut wordt terwijl deze wel heel lang duurt om te laden.
1.2 Voorbeeld foto na optimalisatie
Stel dat u de foto als achtergrond wilt gebruiken dan raden wij een maximum breedte aan van 1920 pixels. Wanneer we de foto ook nog eens comprimeren zodat de bestandsgrootte kleiner wordt dan komen we al gauw uit op bijvoorbeeld onderstaande resolutie:
Resolutie: 1920 x 1440 pixels
Bestandsgrootte: 259kb
Als u uw bestand comprimeerd voordat u deze upload naar de website bespaard u vaak al zo 10% opslag per afbeelding doordat u uw afbeelding comprimeerd en vaak nog meer als u deze van formaat wijzigd. Deze afbeelding zal dan sowiezo 2x zo snel laden, en mogelijk sneller. Wanneer u dit voor alle foto’s doet alvorens u ze uploadt dan is de snelheidswinst gigantisch!
2.1 Ideale formaat voor Achtergrondfoto’s
Voor achtergrondfoto’s raden wij dus altijd een maximum breedte aan van 1920 pixels. De meeste fotobewerkingsprogramma’s hebben standaard een optie om de foto in verhouding te verkleinen waardoor u alleen de breedte van 1920 pixels hoeft in te voeren. Hierna zal de hoogte automatisch aanpast worden. Verder op deze pagina leggen wij uit hoe u uw foto kunt verkleinen op zowel Windows als Mac.
2.2 Ideale formaat voor gewone foto’s
Voor foto’s die u bij uw teksten wilt plaatsen, dus géén achtergrondfoto’s, raden wij een maximale breedte aan van 800px. Om een snelle website te garanderen leggen wij in dit artikel uit hoe u makkelijk en snel uw foto’s kunt verkleinen en optimaliseren.
Klik op ‘Formaat aanpassen (Mac)‘ voor als u MacOS gebruikt.
3.1 Formaat aanpassen (Windows)
Op Windows 10 kunt u eenvoudig foto’s aanpassen met de standaard foto app genaamd ‘Photos’. Dit is dé standaard Fotobewerkingsprogramma op Windows 10 en 11. Wanneer u een foto opent door te dubbelklikken ziet u een soortgelijk scherm als hieronder:
Zodra uw foto is geopend in de Photo’s app dan kunt u deze verkleinen door op het icoont met de drie horizontale puntjes te klikken. Zie onderstaande schermafbeelding:
Vervolgens verschijnt er een uitklapmenu waar u de optie: ‘Resize image‘ selecteert. Zie onderstaande schermafbeelding. Let op, in de Nederlandse versie heet dit ‘Formaat wijzigen‘.
In het volgende scherm kunt u vervolgens de breedte aanpassen, zie onderstaande schermafbeelding. Zodra u de breedte aanpast dan zal de hoogte automatisch meeveranderen. De kwaliteit kunt u meestal op 90% laten. Vervolgens klikt u op ‘Save‘ (‘Opslaan‘ bij de Nederlandse versie).
Wanneer u de foto heeft opgeslagen en het formaat heeft aangepast, is het tijd voor de volgende stap. Namelijk het verkleinen van de bestandsgrootte. Lees verder bij ‘Afbeeldingen bewerken met iLoveIMG‘ hoe u dit kunt doen.
3.1 Formaat aanpassen (Mac)
Op Mac kunt u eenvoudig uw foto’s verkleinen met de Voorvertoning app, deze zit standaard op alle Mac’s. Zodra u een foto hiermee opent ziet u een scherm zoals in onderstaande schermafbeelding.
Zodra u de foto heeft geopend in Voorvertoning, navigeert u naar de menubalk bovenin uw scherm. Zie onderstaande schermafbeelding:
Hier klikt u op ‘Extra’s‘ en selecteert u vervolgens ‘Pas grootte aan‘. Zie onderstaande schermafbeelding:
In het volgende scherm wat dan verschijnt (Zie schermafbeelding hieronder) kunt u het formaat aanpassen. Wanneer u de breedte aanpast zal de hoogte automatisch in verhouding meeschalen en klikt u op OK. De afbeelding is nu verkleint maar dient nog wel opgeslagen te worden!
Om de afbeelding op te slaan klikt u linksboven op ‘Archief‘ => ‘Bewaar‘ om de foto te overschrijven. Wilt u een kopie bewaren? Selecteer dan de optie ‘Dupliceer‘.
U bent nu klaar voor de laatste stap, het verkleinen van de bestandsgrootte.
Afbeeldingen bewerken met iLoveIMG
Er zijn meerdere websites waar afbeeldingen bewerkt of gecomprimeerd kunnen worden, hieronder valt iLoveIMG. Op deze site kunt u meerdere acties ondernemen zoals:
- Afbeelding comprimeren
- Afbeelding vergroten of verkleinen
- Afbeelding bijsnijden
- Afbeelding converteren naar JPG
- Afbeelding converteren van JPG
- Afbeelding foto editor
- Afbeelding opschalen
- Afbeelding achtergrond verwijderen
- Afbeelding watermerk toevoegen
- Afbeelding draaien
- HTML naar Afbeelding
- Gezicht vervangen
Deze functies kunt u allemaal gebruiken om uw afbeeldingen perfect voor te bereiden voor de website.
Wij raden u ook absoluut aan om uw afbeeldingen te comprimeren, zelfs als deze misschien al geupload kan worden op de site.
Dit is alleen maar een voordeel voor de snelheid van uw website, en de opslag hiervan.
Door onze nieuwe mediabibliotheek kunt u al meerdere afbeeldingen hergebruiken, maar als alle afbeeldingen ook nog eens gecomprimeerd zijn. Kunt u uiteindelijk meer afbeeldingen sneller weergeven op uw website.
Zodra u voorgaande stappen hebt doorlopen dan kunt u uw foto’s uploaden naar uw website zonder bang te zijn dat deze de laadtijd van uw website tegenwerkt.