Productafbeeldingen helpen de deal te sluiten wanneer klanten uw website bezoeken. Om hun interesse vast te houden, moet je aantrekkelijke foto's hebben die snel laden. Met andere woorden, u moet uw productafbeeldingen optimaliseren.
U vraagt zich misschien af hoe u de optimale afbeeldingsgrootte kunt vinden, hoe u afbeeldingen kunt comprimeren en hoe u afbeeldingen kunt optimaliseren zonder kwaliteitsverlies.
Wij hebben u gedekt. In dit artikel gaan we in op de
Waarom moet u afbeeldingen optimaliseren?
Afbeeldingen zijn een belangrijk onderdeel van elke website. Dit geldt vooral voor een e-commercesite. Foto's beïnvloeden klanten wanneer ze overwegen iets te kopen. Ze dragen bij aan het algehele ontwerp van de webpagina, helpen klanten een product te kiezen en verbeteren de SEO van uw site.
U wilt bijvoorbeeld voorkomen dat u grote bestanden uploadt. Ze kunnen uw pagina vertragen, wat van invloed is op de ranking van uw zoekmachine en potentiële klanten wegjaagt. Niemand wil tijdens het online winkelen wachten tot een pagina is geladen. Daarom moet u uw productafbeeldingen optimaliseren.
De afmetingen en verhoudingen van afbeeldingen begrijpen
Laten we eens kijken waar u op moet letten bij het optimaliseren van uw afbeeldingen.
De grootte en afmetingen van een afbeelding zijn erg belangrijk. Deze parameters beïnvloeden de bestandsgrootte en de weergave van de afbeelding op verschillende apparaten.
Hoeveelheid:
Nu is het tijdperk van
Wanneer afbeeldingen echter te groot zijn, zijn ze niet geschikt voor internet. Ze vertragen de laadsnelheid, vooral op een telefoon. Als u niet wilt dat uw bezoekers ongeduldig worden en uw winkel verlaten, moet u de grootte van uw foto's verkleinen.
Een afbeelding heeft twee formaten:
- Afbeeldingsgrootte is de ruimte die een afbeelding op het scherm inneemt. Deze grootte wordt gemeten in pixels (px), de afzonderlijke punten waaruit het scherm bestaat. U kunt afbeeldingen van elk formaat uploaden in de Ecwid-winkel. Ze worden vervolgens geoptimaliseerd om in de breedte van het browservenster te passen. Toch kunt u uw productafbeeldingen het beste verkleinen tot ongeveer 1000 x 1000 px. Dat formaat is groot genoeg om het product weer te geven en klein genoeg om snel te laden.
- Bestandsgrootte is de geheugenruimte die de afbeelding in beslag neemt. Deze grootte wordt doorgaans gemeten in bytes
Kilo- (kb),mega- (Mb) en Gigabytes (Gb). Hoe groter de bestandsgrootte van de afbeelding, hoe meer opslagruimte deze nodig heeft.
De grootte van deze productafbeelding is 1920×1920 en de bestandsgrootte is 272 kB
Het laden van grotere bestanden duurt langer. Bestandscompressiesoftware is ontwikkeld om dit probleem te bestrijden. Een afbeelding wordt doorgaans gecomprimeerd door de kleurgegevens te optimaliseren.
Sterke compressie verslechtert echter de “kwaliteit” van afbeeldingen. Het veroorzaakt ruis of een abrupte kleurovergang.
Voor een bestandsgrootte van ongeveer 1000 px zal een goede compressie ongeveer 200 kB in beslag nemen.
Laten we nu meer leren over hoe u de juiste verhoudingen voor uw foto's kiest.
Proporties
De verhoudingen van een afbeelding geven de
Sommige verhoudingen zijn prettiger voor het oog dan andere. De standaard verhoudingen zien er altijd mooi uit. Dit zijn 1:1, 4:3, 3:2 en 16:9.
De verhoudingen zijn belangrijk omdat ze het uiterlijk van uw site helpen bepalen. Streef naar dezelfde verhoudingen voor al uw productafbeeldingen om uw winkelpui een gestructureerde en professionele uitstraling te geven.
Hoe u het beeldformaat selecteert
Een ander ding om in gedachten te houden voor optimale beeldvorming is het beeldformaat. Het is het type bestand waarin een afbeelding wordt opgeslagen.
Er zijn veel soorten afbeeldingsformaten. Elk heeft zijn voor- en nadelen in termen van kwaliteit, compressie en ondersteuning. U moet het formaat selecteren dat de hoogste kwaliteit biedt met het kleinste formaat.
De drie meest voorkomende formaten op internet zijn JPEG, PNG en GIF. Elk ervan moet op een specifieke manier worden gebruikt.
Laten we de formaten opsplitsen:
- GIF (Graphics Interchange Format) kan gecomprimeerde gegevens opslaan zonder kwaliteitsverlies met behulp van niet meer dan 256 kleuren. Het formaat ondersteunt doorgaans animaties. Lange tijd waren GIF's het meest voorkomende formaat op internet... totdat PNG verscheen.
- PNG (Portable Network Graphics) maakt gebruik van verliesvrije compressie en slaat een onbeperkt aantal kleuren op.
- JPEG (Joint Photographic Experts Group, de naam van de ontwikkelaar) is het meest typische formaat voor het opslaan van foto's en andere afbeeldingen. Het JPEG-algoritme kan zowel verliesgevende als verliesloze compressie gebruiken (daarover later meer). Hoe groter de bestandsgrootte, hoe kleiner het verlies.
Welk formaat moet je kiezen? Als je een geanimeerde afbeelding hebt, tenminste
JPEG- en PNG-bestanden lijken op elkaar, maar hebben ook cruciale verschillen. JPEG's zijn kleiner omdat ze een compressieproces gebruiken waarbij bepaalde gegevens worden verwijderd. PNG's ondersteunen daarentegen transparante achtergronden en zijn beter voor grafisch ontwerp.
De algemene regel is om JPG's te gebruiken voor foto's en afbeeldingen die geen transparante achtergrond hebben. Wat PNG betreft, is het beter om ze te gebruiken voor afbeeldingen, bestanden met een transparante achtergrond en andere afbeeldingen waarbij helderheid en kleurlevendigheid belangrijk zijn. Voor productfoto's is het dus logisch om JPEG te verkiezen boven PNG.
Deze productfoto is in JPEG-formaat
Afbeeldingen comprimeren zonder kwaliteitsverlies
Compressie helpt de grootte van een afbeelding te verkleinen. Hoe lager de kwaliteit, hoe hoger de compressie en hoe kleiner de bestandsgrootte.
Er zijn twee soorten compressie:
- Lossy compressie verkleint de grootte van een bestand door overtollige gegevens te verwijderen. Wanneer u een bestand op deze manier comprimeert, kan dit echter de beeldkwaliteit aanzienlijk verslechteren.
- Lossless compressie is een techniek die de kwaliteit van een bestand hoog houdt. Het zal de bestandsgrootte echter niet zo veel verkleinen als compressie met verlies. Als u de bestandsgrootte wilt verkleinen zonder de kwaliteit merkbaar te beïnvloeden, kunt u beter kiezen voor verliesvrije compressie.
Lees verder voor meer informatie over online tools die u kunt gebruiken om een afbeelding te comprimeren zonder kwaliteitsverlies.
Afbeeldingen optimaliseren voor internet: overzicht van tools
Wilt u weten hoe u afbeeldingen voor een website kunt optimaliseren? Gelukkig voor jou gebruik je online tools om je afbeeldingen automatisch te optimaliseren zonder urenlang naar Photoshop-tutorials te kijken.
De volgende sites kunnen de optimalisatie voor u automatiseren:
Hoe u de afbeeldingsgrootte kunt optimaliseren: 4 eenvoudige hulpmiddelen
Als u op zoek bent naar een bestandsgrootteverkleiner, bekijk dan een van de volgende services. Ze zijn gratis of hebben een gratis proefperiode:
- TinyJPG: het verkleint de bestandsgrootte van JPEG-afbeeldingen. Volgens hun site kan het dit met meer dan 70% verminderen!
- TinyPNG: dezelfde fotocompressor maar voor PNG-bestanden.
- Squoosh: een webapp voor beeldcompressie die de afbeeldingsgrootte verkleint via talloze formaten.
- jpegmini: een fotocompressor voor JPEG-bestanden. Het heeft meer geavanceerde functies die handig zijn voor fotografen, waaronder het rechtstreeks exporteren van foto's vanuit Lightroom en Photoshop.
- ImageOptim: een beeldoptimalisatie voor Mac-apparaten. Je moet het downloaden om te gebruiken.
Afbeeldingen optimaliseren met JPEGmini
Als u een Ecwid-winkel heeft, kunt u de SEO-snelheid en beeldoptimalisatie app van de Ecwid App Market. De app maakt dit mogelijk
Hoe u afbeeldingen voor WordPress kunt optimaliseren
Als u een WordPress-website heeft, kunt u een afbeeldingsoptimalisatie- en compressieplug-in gebruiken. Ze helpen u afbeeldingen op WordPress-sites automatisch te optimaliseren, waardoor betere snelheid en prestaties mogelijk zijn.
Trouwens, als je op zoek bent naar een e-commerce plug-in voor je WordPress-website, kijk dan eens hier Ecwid van Lightspeed-plug-in. Hiermee kunt u eenvoudig een online winkel aan uw WordPress-site toevoegen. Eenmaal geïnstalleerd, creëert de plug-in automatisch een winkelpagina waar uw klanten op uw website kunnen winkelen.
EWWW Afbeelding Optimizer
EWWW Afbeelding Optimizer is een van de beste WordPress-plug-ins om foto's te comprimeren en afbeeldingen op uw website te optimaliseren. Het hele proces van het optimaliseren van afbeeldingen is geautomatiseerd. Dit omvat het comprimeren van afbeeldingen en het schalen zodat ze op de juiste paginagrootte en op het juiste apparaat passen. De plug-in is
Comprimeer JPEG en PNG
Comprimeer JPEG en PNG is een plug-in gemaakt door het team achter de services die we al hebben
reSmush.it
reSmush.it is een gratis WordPress-plug-in voor beeldcompressie voor bestanden tot 5 MB. U kunt afbeeldingen automatisch optimaliseren tijdens het uploaden, oudere afbeeldingen bulksgewijs optimaliseren en enkele afbeeldingen uitsluiten van de optimalisatie.
Meer geautomatiseerde hulpmiddelen voor beeldoptimalisatie
Maar wat als u geen WordPress-website heeft? Het handmatig optimaliseren van een groot aantal foto's is zeker mogelijk
ImageRecycle
ImageRecycle ondersteunt verschillende afbeeldingsformaten, zoals JPEG-, PNG-, GIF- en zelfs PDF-bestanden.
De tool kan bepalen welke afbeeldingen op uw website moeten worden geoptimaliseerd op basis van de afbeeldingsgrootte en -dimensie. Voer gewoon uw websiteadres in en ImageRecycle stuurt u een gratis rapport via e-mail. Ze hebben ook een gratis proefperiode, zodat u hun optimalisatietool in actie kunt zien.
ImageKit.io
ImageKit.io is geen gewone beeldcompressor maar een beeld-CDN (content delivery network). Het optimaliseert, vergroot of verkleint en verzendt afbeeldingen via zijn wereldwijde netwerk van servers. U kunt zich aanmelden voor een forever free-abonnement.
Hulpmiddelen voor het bewerken van productafbeeldingen
Als u het niet erg vindt om zelf foto's te bewerken en niet bang bent voor een beetje doe-het-zelf, vindt u wellicht hulpmiddelen voor het bewerken van foto's nuttig. Hier zijn er een aantal:
Photoshop
Photoshop biedt een gratis online editor voor eenvoudige beeldmanipulatie (zoals het bijsnijden of vergroten/verkleinen van afbeeldingen). Hiermee kunt u ook de achtergrond uit foto's verwijderen en uw foto's verfijnen met verschillende instellingen, zoals contrast, helderheid, verzadiging, warmte of verscherping.
De online Photoshop-editor heeft ontwerpsjablonen die u kunt gebruiken
GIMP
GIMP is een gratis programma geschikt voor Windows, Mac en Linux. Het biedt alles wat u nodig heeft voor professionele afbeeldingen en foto's, inclusief gereedschappen voor lagen en maskers, kleurcorrectie, retoucheren en schilderen. GIMP ondersteunt alle belangrijke afbeeldingsbestandsformaten.
PicMonkey
PicMonkey is een online editor met een eenvoudige interface en alle basisfuncties, zoals bijsnijden, roteren, scherpteregeling, werken met kleur en het kiezen van resolutiefoto's. Het biedt sjablonen voor het maken van afbeeldingen voor advertenties, sociale berichten, logo's, infographics en meer. Het heeft een
Pixlr
Pixlr biedt een gratis online editor en ontwerpbronnen voor beginners en professionals. Het heeft hulpmiddelen voor kleur, tekenen en fotobewerking. Met Pixlr werk je met lagen en gebruik je verschillende effecten en filters. Als je geïnteresseerd bent, dan kan dat
Meer over beeldoptimalisatie
Grote afbeeldingen kunnen uw website vertragen, dus het is belangrijk om ze te optimaliseren voor internet. Het vinden van het juiste afbeeldingsformaat voor uw afbeeldingen door het formaat te wijzigen en te comprimeren, kan wonderen doen voor de laadsnelheid van uw website.
En nu weet je het goede nieuws: optimalisatie is supergemakkelijk te doen! U kunt ook terugkomen en dit artikel raadplegen wanneer u maar wilt.
Als u een meer gevorderde gebruiker bent en meer wilt weten over het optimaliseren van afbeeldingen voor SEO, raden we u aan deze video van Google te bekijken. Er worden enkele geavanceerde tips besproken voor het optimaliseren van uw afbeeldingen voor een website. Bekijk het hier:
Hoe ervaren u ook bent als e-commerce-eigenaar, vergeet nooit de beeldoptimalisatie. Zelfs de eenvoudigste hulpmiddelen kunnen uw foto's geschikt maken voor internet. Door uw foto's te optimaliseren, kunt u de winkelervaring van uw klanten drastisch beïnvloeden. Zorg ervoor dat uw productafbeeldingen zowel mooi zijn als snel worden geladen!
Als u nog maar aan het begin van uw e-commerce-traject staat en een online winkel wilt opzetten, ga dan eens kijken Ecwid van Lightspeed. Hiermee kunt u zelf een gratis online winkel opzetten, zonder dat u codeer- of ontwerpvaardigheden nodig heeft. Ideaal als je zo snel mogelijk wilt beginnen met online verkopen!
- Hoe u productcategorieafbeeldingen ontwerpt
- Hoe u cinemagraphs voor productfoto's maakt
- Hoe u productafbeeldingen kunt optimaliseren
- Hoe u het formaat van een afbeelding kunt wijzigen
- Overzicht van afbeeldingsresizers