Hallo. De inhoud van ons blog is voor uw gemak automatisch vertaald. Onze excuses voor de mogelijk slechte vertaling.

Het optimaliseren van Afbeeldingen voor het Web: Een Praktische Gids

Nov 8, 2016 by Michelle Nickolaisen
A practical guide to optimizing images for the web
Posted Nov 8, 2016 by Michelle Nickolaisen

De beelden zijn van cruciaal belang voor het uitvoeren van een e-commerce winkel met succes — na alle, als uw potentiële klanten niet kunnen zien wat ze kopen, ze zijn niet erg waarschijnlijk om het te kopen. De beelden kunnen ook maken of breken uw blog posts, boost uw SEO, en meer.

Blijf lezen om uit te vinden hoe te maken van uw foto ' s en afbeeldingen voor je werken.

Waarom doet afbeelding optimalisatie zaak?

De meest voor de hand liggende voordeel voor het optimaliseren van uw afbeeldingen is dat het beter is voor u op de lange termijn.

Het maakt gebruikers willen blijven op uw website (omdat ze duidelijk kunt zien uw foto ' s en ze niet nemen voor eeuwig te laden).

Het maakt uw website beter vindbaar in de zoekresultaten (want een goed beeld optimalisatie is ook zoekmachine-vriendelijk).

Er is ook het feit dat het goed is voor uw gebruikers. Afbeelding optimalisatie, naast zijn over het algemeen meer gebruiksvriendelijk, ook helpt uw website meer toegankelijk voor mensen met een visuele handicap (die zou kunnen worden met behulp van het scherm-lezers die trekking uit van de alt-tags voor het beschrijven van de afbeelding aan de gebruiker).

Dat betekent meer bezoekers voor uw website en mogelijk meer omzet.

Lees ook: Eenvoudige Manieren om Uw Producten aantrekkelijker te maken voor Consumenten

Afbeelding optimalisatie 101

Dus wat er in het beeld optimalisatie?

Bestand namen en code

De eerste en makkelijkste wat je kunt doen is het veranderen van je afbeelding een naam voor iets beschrijvende, plaats 10934.jpg.

De beschrijving van wat is afgebeeld in de afbeelding ("RedCorvette.jpg") of wat er in de post, als dit voor een blog post ("MaintainingYourCorvette.jpg").

Na dat, kunt u een "alt" - tag.

Dit is een tag die verder gaat in het beeld van code die geeft een korte beschrijving van wat het beeld is — u wilt beschrijving van de afbeelding in een paar woorden, terwijl met behulp van relevante zoekwoorden.

Met het bovenstaande voorbeeld, je zou kunnen hebben een alt-tag van "2010 Red Corvette Onderhoud."

Maar niet trefwoord spullen op de alt-tag — je zou niet toevoegen "de auto rode corvette onderhoud 2010 auto winkel kopen" als een alt-tag, omdat die kunnen verrekenen spam filters in de zoekmachine algoritmen, en het is ook niet gebruiksvriendelijk voor slechtziende kijkers.

De meeste sites hebben een gemakkelijke manier voor het bewerken van de alt-tags, maar als het niet, u kunt klikken op "bron weergeven" of "view HTML" in de tekst-editor te openen en te bewerken-het-zelf.

Alt-Tags_HTML_Image_Code.png

Afgezien van de bestandsnaam en alt-tag, veel website bouwers (als WordPress) geeft u een ruimte voor de afbeelding titel, bijschrift, en beschrijving (en zal gemakkelijk laat u de alt-tag) wanneer u een afbeelding uploaden, zoals hieronder weergegeven.

Het invullen van alle velden is de beste vuistregel voor optimalisatie. Het bijschrift wordt weergegeven naar uw gemiddelde kijkers, maar dat alles anders zal worden voornamelijk gebruikt door zoekmachines en screenreaders (voor slechtziende kijkers die vertrouwen op de omschrijvingen van afbeeldingen).

 image descriptions

Omschrijvingen van afbeeldingen in WordPress

Grootte en indeling

Het verminderen van het bestand met de afbeelding maten. Uiteraard, u wilt de afbeeldingen groot genoeg om te zien, maar u hoeft niet te worden bij het uploaden van afbeeldingen die duizenden pixels breed en hoog.

Zorg ervoor dat niet het uploaden van de afbeelding op ware grootte en dan gewoon veranderen de afmetingen zijn dat het wordt weergegeven als via de code afbeelding. Als je dat doet, de computer van de bezoeker zal hebben voor het laden van de afbeelding op ware grootte en het zal vertragen het laden tijd.

Er is geen harde en snelle regel voor de grootte van het bestand of de afmetingen, maar de algemene strekking is "de kleinste bestandsgrootte mogelijk zonder het maken van de afbeelding te klein is of onleesbaar zijn."

Voor in-lijn blog beelden, veel sites zijn met een breedte van 500-800 en een hoogte van 300-600. U kan altijd een link naar de afbeelding op ware grootte, zodat de mensen kunnen een groter beeld wanneer ze op.

Zo ver als de grootte van het bestand gaat, uw afbeeldingen mag nooit groter zijn dan 1MB, en ideaal, de meeste van hen zullen rond de 100-200kb.

Ook kunt u de resolutie verlagen om de grootte van het bestand kleiner, maar met de opkomst van de retina displays, je wilt niet om de resolutie te verlagen, te veel of de beelden wazig kijken op deze schermen.

Wijzigen bestand grootte, u kunt meestal kiezen voor het exporteren van een beeld bij een iets lagere kwaliteit, de afmetingen van de afbeelding, of wijzig het bestandstype (zie hieronder).

Het gebruik van het juiste formaat voor de taak. Voor de meeste toepassingen, .jpg zal uw beste weddenschap. Het ondersteunt de meeste kleuren met de minste hoeveelheid van de grootte mogelijk.

Gif ' s zijn doorgaans groter file-size wise voor statische beelden, maar ze zijn geweldig voor het maken van geanimeerde afbeeldingen (Giphy, iedereen?).

Dit is een geweldige manier om uw product vanuit alle hoeken of in beweging te maken zonder dat gebruikers het laden van een volledige video — Ecwid kunt u gebruik maken van geanimeerde gif ' s voor dat.

Voor afbeeldingen met tekst, .png is een goede keuze — die beelden hebben de neiging om groter bestand grootte, maar heeft scherpere tekst (en ook de ondersteuning van de transparantie).

Best practices voor afbeeldingen

Op uw site:

  • Zorg ervoor dat alle van de extra mogelijke omschrijving van, om uw product pagina ' s en blog posts zoekmachine-vriendelijk.
  • Meerdere hoeken van uw producten.
  • Zorg ervoor dat u een uitgelichte afbeelding, als dat is meestal het beeld dat de getrokken voor sociale media previews.

Gebruik altijd een hoge-kwaliteit foto 's breder dan 500 px-1000px voor uw product foto' s. Na het uploaden van uw winkel, Ecwid hosts beelden en maakt het snel laden automatisch. Om zeker te zijn van uw tijd voor het laden is de best mogelijke, probeer niet te uploaden van grote afbeeldingen, bijvoorbeeld, degenen die in 4K-formaat.

Het’s beste gebruik maken van vierkante afbeeldingen voor uw product en categorie foto ' s, als vierkante afbeeldingen zijn mobiel-vriendelijk en altijd goed uitzien op elk apparaat. Check out Ecwid demo-winkel voor een voorbeeld.

Ecwid ondersteunt retina-ready miniaturen gemaakt van uw product afbeeldingen, dus don’t zorgen te maken over je winkel er goed op het netvlies geeft!

Alles wat je hoeft te doen is inloggen in uw Control Panel, ga vervolgens naar Instellingen en vervolgens op "Wat is Nieuw" voor het inschakelen van de functie.

the Ecwid Control Panel

Meer informatie: Het Optimaliseren van Product Afbeeldingen: Stap-voor-Stap Instructies en Een Overzicht van de Diensten

Op sociale media:

In het algemeen, u wilt geen gebruik maken van hetzelfde beeld op meerdere sociale netwerken — het is beter om te tweaken van het beeld te optimaliseren voor elke sociale netwerk. Check out Hubspot ' s sociale media image cheat sheet om de exacte afbeelding specs voor alle netwerken.

Als u belangrijke tekst in je afbeeldingen, zorg ervoor dat het makkelijk is om te lezen als iemand bladert door hun Facebook-of Twitter-tijdlijn.

Zorg ervoor dat u bij het optimaliseren van uw vermeldingen te hebben aanbevolen beelden die er goed uitzien op sites als Facebook en Twitter.

Bijvoorbeeld, Twitter is een automatisch gegenereerde link samenvattingen (de Summiere Kaart of Kaart Overzicht met de Grote Afbeelding voor meer op Twitter cards, hoofd hier) de eerste afbeelding op de pagina of het aanbevolen product afbeelding, zo:

Uw uitgelichte afbeelding zou moeten worden geoptimaliseerd om een goede kijk op de link preview

Uw uitgelichte afbeelding zou moeten worden geoptimaliseerd om een goede kijk op de link preview

Een deel van de afbeelding makers in de app sectie hieronder de pre-en-klare sociale media image templates die u kunt gebruiken om een vliegende start.

Gerelateerd: Beste Gratis Apps voor het Perfectioneren van Uw Sociale Media-Afbeeldingen

In uw nieuwsbrief:

Vertrouw niet op de afbeeldingen om te brengen belangrijke onderdelen van de e-mail.

Veel e-mail providers niet meer weergeven afbeeldingen standaard (en geeft gebruikers de mogelijkheid om afbeeldingen tonen), dus als je belangrijke onderdelen van de boodschap in een afbeelding, een gebruiker kan scannen snel en missen. Plaats, het gebruik van beelden als visuele accenten als aanvulling op de woorden in de e-mail.

Meer en meer mensen het lezen van e-mails op hun telefoons, dus zorg ervoor om te testen hoe uw e-mails weergeven op kleinere schermen door uzelf een test exemplaar van de nieuwsbrief en lees het op uw telefoon.

Dit betekent ook dat u wilt ervoor zorgen dat uw afbeeldingen zijn deze een voldoende hoge resolutie om er goed uitzien op schermen telefoon, bijvoorbeeld, de iPhone 6 heeft een PPI (pixels per inch) van 326 en de 6 plus heeft een PPI van 401.

Lees ook: Waar Vindt u Gratis Beelden op het Web: Stock Foto ' S, Databases, en Nieuwsbrieven

De apps die je nodig hebt om je afbeeldingen optimaliseren

Als u wilt een gratis Photoshop vervanging, check out GIMP. Het is gratis, open-source, en werkt onder Windows, Mac, of Linux.

Het nadeel is dat het een iets steilere leercurve dan Photoshop, maar er zijn tal van online tutorials helpen je door dingen.

Dat zei, GIMP (of Photoshop) is waarschijnlijk overkill voor de gemiddelde blog post/product afbeelding. PicMonkey kan je helpen basis beeldbewerking, samen met collages en beelden creëren voor sociale media.

Wilt u uw beelden op de gaan, Pixlr heeft verschillende app-opties plus een optie online. Als je foto ' s bewerken, VSCO is een geweldige keuze voor

Als laatste, maar zeker niet de minste, er is Canva, dat is minder van een afbeelding of foto bewerking app, en meer van een grafisch ontwerp tool voor online beelden. U kunt eenvoudig tekst toevoegen, photo frames, achtergronden, en het biedt ook sociale media klaar beeld-sjablonen.

Nog steeds in de behoefte van het product afbeeldingen te bewerken? Voor een spoedcursus nemen van product foto ' s met je smartphone, hoofd hier.

Lees ook: Hoe Maak je een Goede Achtergrond in de Foto ' s van Uw Producten Zonder het Gebruik van Photoshop

Heb niet het instellen van uw e-commerce winkel nog? Aanmelden en start met behulp van Ecwid vandaag.

Over de auteur
Michelle is a freelance writer living in Richmond, VA, with her Shiba Inu and cat named after the Hulk. When she's not writing about business, she can usually be found working on her novel series or other side projects, or training Brazilian jiu-jitsu.

Stay up to date!

Get free e-commerce tips, news and inspiring ideas delivered directly to your inbox

Lees ook