beste afbeeldingsgroottes en hoe afbeeldingen op te slaan voor het Web en Flothemes

het opslaan van afbeeldingen voor het web is voor velen altijd een raadsel geweest. Het uploaden van beelden die zwaar zijn (originele afbeelding sizing op 5000px breedte, niet-geoptimaliseerde beelden) zal niet alleen problemen met de gebruikerservaring op uw site, maar zal ook invloed hebben op uw SEO-strategie (laadsnelheid, bounce rate, ranking, enz.).,

Dit artikel is verdeeld in verschillende delen die alles bevatten wat u moet weten over hoe u uw afbeeldingen voor het web kunt voorbereiden. In het eerste deel van de post zullen we een lijst van de aanbevolen beeldformaten voor uw Flothemes site. Vervolgens zal het artikel gaan over hoe u de verschillende secties op uw website kunt inspecteren om de juiste maten voor uw afbeeldingen te identificeren voordat u ze naar het web uploadt. We zullen ook uitleggen hoe u afbeeldingen correct kunt exporteren / opslaan, zodat ze geoptimaliseerd zijn voor snelheid.,

tot slot zullen we enkele SEO-tips geven over hoe u uw afbeeldingen correct kunt titelen bij het opslaan en waarom het gebruik van ALT-tags uw SEO zal verbeteren. Voor de reeds geüploade afbeeldingen naar uw site, laten we u zien hoe u de afbeeldingen kunt identificeren die te groot zijn en uw site vertragen. Laten we beginnen!

Waarom zijn afbeeldingsgroottes en site-prestaties belangrijk?

niet-geoptimaliseerde afbeeldingen vertragen websites. Trage websites = slechte gebruikerservaring, lagere kansen om te rangschikken in Google zoekopdrachten en uiteindelijk minder vragen en klanten.,
Het opslaan van uw afbeeldingen met de juiste afmetingen en het optimaliseren van afbeeldingen voor het web kan helpen met een paar dingen:

• snelheid – volgens een onderzoek van Google, als een webpagina laadt in meer dan 5 seconden, de kans dat een mobiele gebruiker die pagina zal verlaten met 90% toeneemt. Door het formaat en de grootte van afbeeldingen te verkleinen, maakt u uw website pagina ‘ s sneller.
• gebruikerservaring – goede kwaliteit, impactvolle afbeeldingen helpt bezoekers een meer boeiende ervaring te hebben tijdens het surfen op uw website., Door deze afbeeldingen geoptimaliseerd te houden en snel te laden, zorgt u voor een naadloze en soepele ervaring voor uw bezoekers, wat hen motiveert om meer tijd door te brengen op uw site en uw content te verkennen.
• SEO ranking-site snelheid is een ranking factor. Hoe sneller is uw site, hoe beter je kunt potentieel rangschikken. Webpagina ‘ s met geoptimaliseerde afbeeldingen laden veel sneller op zowel desktop als mobiele apparaten.
• Sales-snellere laadtijden en betere SEO kunnen helpen om meer gebruikers naar uw site te brengen, wat uw kansen vergroot om gevraagd en geboekt te worden.,

Opmerking: Wanneer we het hebben over afbeeldingsgrootte bedoelen we de afbeeldingsdimensie in pixels.

Wat zijn de beste afbeeldingen voor het web en Flothemes?

bij het uploaden van afbeeldingen naar het web zijn er een aantal dingen om rekening mee te houden, zoals waarvoor de afbeelding wordt gebruikt, hoe groot het bestand moet zijn, en welk type afbeelding moet worden gebruikt voor verschillende gebieden op uw site.,

Image gebruik en type

er zijn verschillende gevallen waarin u verschillende afbeeldingsgroottes wilt gebruiken voor verschillende gebieden van uw site, hieronder zal ik de meest voorkomende gebieden en de dimensioneringsopties behandelen die u voor elk kunt gebruiken. Merk op dat deze worden aanbevolen, netvlies vriendelijk, sizing opties gezien het feit dat de meerderheid van de gebruikers de site te bekijken op een apparaat dat mobiel of 13-15 inch gemiddelde grootte. Echter, als u streeft naar het maken van de site ziet er geweldig uit voor uw 27 inch monitor (die heeft een echt hoge resolutie), merk op dat het misschien niet wat uw potentiële klanten gebruiken.,

Als u nauwkeuriger wilt zijn hoe uw gebruikers uw site en uw portfolio bekijken, kunt u de apparaten controleren die worden gebruikt om toegang te krijgen tot uw site via uw Google Analytics (ga naar Audience – Technology – Browser & OS – schermresolutie), en de aanbevolen grootte aanpassen aan het vereiste deel van uw gemiddelde gebruiker.

afbeeldingen met volledige breedte

2400x1600px, jpeg, opgeslagen voor web, en geoptimaliseerd

Op de site kunt u secties hebben waar u afbeeldingen met volledige breedte moet gebruiken die uw hele scherm van links naar rechts bedekken., Deze gebieden kunnen Hero beelden, volledig scherm diavoorstellingen, bannerafbeeldingen. Om ervoor te zorgen dat uw volledige breedte beelden er goed uitzien op elk apparaat groot of klein de aanbevolen grootte is 2400x1600px. Merk op dat apparaten een andere verhouding hebben dan degene die je fotografeert en het is mogelijk dat je afbeeldingen worden bijgesneden wanneer ze op het web worden bekeken. Als een aanbeveling proberen om bredere schoten dan gebruikelijk voor uw webinhoud te schieten, om te voorkomen dat bijsnijden van belangrijke beeldinhoud.,

Inhoud Images

Horizontale – max breedte 1500px, jpeg, opslaan voor web en geoptimaliseerd
Verticale – max breedte 1000px, jpeg, opgeslagen voor web, en geoptimaliseerd

Op uw site pagina ‘ s, er zijn secties bestaande uit afbeeldingen, tekst gebieden, call-to-action buttons, etc. In principe zijn dit de secties waar de afbeeldingen deel uitmaken van inside content (lees als “niet volledige breedte”)., In deze gevallen, tenzij de aanbevolen grootte is gespecificeerd zoals sommige van onze Flothemes blokken doen, kunt u de bovenstaande aanbevelingen voor horizontale en verticale afbeeldingen volgen. Op basis van uw verhouding zal de hoogte dienovereenkomstig aan te passen wanneer u uw beelden op te slaan.,toon galeries: zorg ervoor dat ze allemaal dezelfde hoogte aanbevolen 1500px, ongeacht of ze horizontale of verticale

Blog Post Images

• als u de voorbereiding van afbeeldingen te uploaden in een blogpost, zorg ervoor dat ze allemaal dezelfde breedte, aanbevolen 1500px, ongeacht of ze horizontale of verticale

Aanbevolen Images

Er zijn 3 soorten beelden: portret, landschap en held beelden., Portrait en Landscape image sizing volgt dezelfde aanbeveling als in content images, terwijl de aanbevolen grootte voor hero images wordt gedekt onder volledige breedte afbeeldingen. De sleutel tot het hebben van goede aanbevolen beelden is consistentie. Als u alle portretfoto ‘ s wilt gebruiken, zorg er dan voor dat ze dezelfde grootte hebben, hetzelfde geldt voor landscape-en hero-afbeeldingen. Bij gebruik van een metselwerk raster, de grootte hierboven is niet zo relevant, maar zorg ervoor dat de beelden zijn ten minste 1000px in breedte.,

als u problemen heeft met het sizen van afbeeldingen, kijk dan eens naar de opties voor het sizen van afbeeldingen in uw Flothemes-instellingen om er zeker van te zijn dat ze correct zijn ingesteld.

manieren om de juiste afbeeldingsgroottes voor uw web te achterhalen

Het is mogelijk dat de hierboven aanbevolen groottes niet aan uw behoeften voldoen vanwege een specifieke opmaak. Als u niet zeker bent over de juiste afbeeldingsdimensie, gelukkig, zijn er een paar manieren die u kunnen helpen gemakkelijk inspecteren uw website afbeeldingen, en identificeren van de juiste dimensionering die nodig is voor elk element op uw site.,

een belangrijk ding om te onthouden is dat Voor retina-apparaten, je de pixeldichtheid van de afbeelding moet verdubbelen. Dat betekent dat je afbeeldingen nodig hebt die twee keer zo groot zijn als voor retina-apparaten, zodat ze er mooi en fris uitzien. Dus als je eenmaal de juiste afbeeldingsformaten hebt gevonden voor elke sectie op je site, wil je die formaten verdubbelen en ze alleen dan exporteren en uploaden naar je site.

a., Met behulp van de Image Size Info extensie

de eerste methode om afbeeldingsgroottes voor uw site te vinden is door gebruik te maken van de Image Size Info extensie voor Chrome (Als u Chrome niet gebruikt op uw computer, raden we u ten zeerste aan om het te gebruiken tijdens het maken van uw site). Zodra u de extensie hebt geà nstalleerd, zal deze tool u vervolgens toestaan om uit te vinden van de beeldformaten van elk beeldelement op uw site.

bekijk de afbeeldingen op uw site, Maak notities, en dan met deze kennis zult u in staat zijn om uw foto ‘ s precies aan te passen aan de ruimtes zoals ze zijn bedoeld in het thema ontwerp., Vergeet niet, met retina-schermen moet u uw beelden twee keer zo groot zijn als de beoogde ruimte. Dus als je een beeldruimte van 750x500px, voor retina moet het 1500x1000px bij het uploaden naar WordPress (of een ander platform).

bijvoorbeeld: wanneer we een afbeelding met deze extensie inspecteren, wordt deze weergegeven op 780x520px, maar de werkelijke grootte is 1560x1040px. Dit komt omdat we een netvlies scherm gebruiken bij het inspecteren van de afbeelding. In dit geval kunt u de afmetingen maten gebruiken om uw beeldformaat te kiezen.,

op een niet-retina-apparaat blijven de weergegeven afmetingen en afmetingen hetzelfde. In dit geval, verdubbel de nummers en upload afbeeldingen op dat formaat.

de belangrijkste beperking van dit gereedschap is dat het geen achtergrondafbeeldingen kan inspecteren op grootte. Op veel thema ‘ s worden achtergrondafbeeldingen gebruikt in plaats van HTML-elementen, omdat ze flexibeler zijn bij het weergeven van afbeeldingen. Als u de afbeeldingen niet kunt inspecteren omdat het achtergrondafbeeldingen zijn, kunt u de volgende methode gebruiken om de afbeeldingsgroottes op uw site te bekijken.

b., Met behulp van het Inspector Tool

Met Chrome en Safari kunt u ook het developers inspector tool gebruiken om afbeeldingsgroottes op de site te vinden. Het principe zal hetzelfde zijn als voorheen, inspecteer de verschillende elementen op de site en noteer de maten. Verdubbel de beeldformaten voor retina-apparaten en upload ze vervolgens naar WordPress, zodra ze zijn geoptimaliseerd voor web en correct met een titel voor SEO.

De beperkingen van deze methode zijn dat als de site een aantal responsieve elementen gebruikt die zijn ingesteld in REM-waarden, afbeeldingen kleiner kunnen worden wanneer de inspector in hetzelfde venster wordt gebruikt., Als de site ook gebruik maakt van responsieve elementen, zullen ze groter zijn op grotere schermen, en kleiner op anderen. Het is het beste om een groter scherm te gebruiken waar mogelijk bij het controleren van de site, zodat u de meest nauwkeurige beeldgrootte kan krijgen. In ieder geval, met behulp van deze methode geeft u een goede indicatie van de maten voor uw site en zal u toelaten om de aanpak van het toevoegen van beelden aan uw website met meer zorg.

Chrome

Chrome heeft ingebouwde ontwikkeltools, daarom is het de meest populaire browser op het web voor ontwikkelaars en ontwerpers., De volgende video legt uit hoe u de afbeeldingen op uw site kunt inspecteren om hun grootte te achterhalen:

Firefox

met Firefox, net als chrome, hebben ze een ingebouwde inspector tool waarmee u afbeeldingen voor uw site kunt controleren.

Safari

Als u Safari gebruikt, kunt u het inspector-gereedschap gebruiken om de grootte van afbeeldingen te zien. Bekijk de volgende handleiding voor het inschakelen van de developer tools.,

nu kunt u naar verschillende secties in uw site gaan en de afbeeldingsafmetingen voorbereiden.

voor galerijen wil je kijken naar de hoogte van de afbeeldingen, omdat ze over het algemeen beperkt zijn door de hoogte (dus breedte kan worden ingesteld op Automatisch).

voor blogberichten wilt u de breedte van uw afbeeldingen noteren, omdat ze beperkt zijn door breedte (de hoogte kan automatisch zijn).,

voor de rest van de elementen op uw site, moet u de hierboven beschreven methode gebruiken om de juiste afmetingen te krijgen, en ze te uploaden op optimale afmetingen voor uw site.

nu u weet welke dimensies u nodig hebt voor alle elementen op uw site, zullen we uitleggen hoe u al uw afbeeldingen kunt optimaliseren voor grootte, dat is in termen van data sizing. De bestandsgrootte van uw afbeeldingen is ook erg belangrijk voor het web. Het uploaden van opgeblazen en zware afbeeldingen op uw website zal uw serverbronnen belasten, uw site vertragen en in feite een negatieve gebruikerservaring creëren.,

afbeeldingen optimaliseren en opslaan voor web

Er zijn een aantal dingen om rekening mee te houden bij het optimaliseren en opslaan van afbeeldingen voor het web. Je zou moeten overwegen welk bestandstype je moet gebruiken, JPG, PNG of GIF, afhankelijk van het doel. U wilt uw afbeeldingen correct labelen voor SEO-doeleinden en u wilt ze opslaan in het juiste kleurformaat (sRGB voor web).

afhankelijk van het doel, moet u afbeeldingen opslaan in een van de volgende formaten .jpg, .gif, of .png. JPG zal de meest voorkomende indeling bij het opslaan van afbeeldingen voor uw portfolio website, ze zullen ook de lichtste in grootte.,

voor bestandsnamen, zorg ervoor dat ze geschikt zijn voor elke specifieke afbeelding of blogpost. Gebruik alleen letters, cijfers, underscores en koppeltekens. Probeer alleen Engelse letters te gebruiken. Karakters uit andere talen, vraagtekens, spaties, procent tekens kunnen onjuist uploaden of onverwacht gedrag veroorzaken in uw galerijen of blogberichten.

bijvoorbeeld, als je net een boho bruiloft hebt gedaan in de Biltmore Santa Barbara, label de afbeeldingen, boho-wedding-biltmore-santa-barbara_0001.jpg dit zal veel meer SEO vriendelijk, en kan zorgen voor een betere ranking voor uw site.,

afbeeldingen optimaliseren in Lightroom

laten we eerlijk zijn, er zijn veel verschillende instellingen om te kiezen en eindeloze combinaties van getallen om in te voeren. Echter, als u al weet het beeldformaat en de vereiste bestandsafbeeldingsafmetingen, het is veel gemakkelijker.

in Lightroom kunt u op 3 manieren naar het dialoogvenster Exporteren:

markeren en exporteren

u kunt gewoon een foto uit uw Lightroom-bibliotheek markeren / selecteren en met de rechtermuisknop op de foto klikken. Selecteer in het pop-up menu de optie Exporteren.,

bestand en Export

De tweede manier is om naar bestand te gaan -> Export

met behulp van de sneltoets

de derde en snelste manier is om een sneltoets te gebruiken:

Shift + Command + E (⇧+⌘+E)

het maakt niet uit hoe je daar komt. Elk van deze zal werken, dus kies de makkelijkste voor u om te onthouden.,

Lightroom-Exportdialoog

Nu u weet hoe u de afbeeldingen voor web kunt exporteren, behandelen we de 4 secties en de verschillende opties die u kunt kiezen in het Lightroom-exportdialoog, zodat u geoptimaliseerde afbeeldingen voor het web kunt exporteren.

1. Bestandsnamen

elke export kan zijn eigen hernoemings-instellingen bevatten. Als u zich aan de standaardoptie houdt, hebben uw afbeeldingen dezelfde naam als de originele bestanden en worden ze opgeslagen als een JPEG-afbeelding., We raden u echter aan het vakje “hernoemen naar” aan te vinken en een van de vele templates te kiezen die Lightroom biedt om de geëxporteerde afbeeldingen aan te passen. In de bestandsnaam hebben we de bestandsnamen hernoemd naar “Custom Name – Sequence”, waar de aangepaste tekst nauw verbonden is met onze blog post titel of blog post zoekwoorden.

2. In Bestand Instellingen

zorg ervoor dat uw afbeeldingsformaat is ingesteld op JPEG. Dit is de meest web-vriendelijke optie. Uw kwaliteit mag niet minder zijn dan 65., Normaal zetten we het op 75. Uw kleurruimte moet sRGB zijn. Dit is de kleurruimte die door het web wordt gebruikt, dus het zal het beste weergeven. Vink het vakje “Bestandsgrootte beperken tot:”niet aan. Als u dat vakje aankruist, wordt de bestandskwaliteit aanzienlijk verminderd.

om samen te vatten, gebruik bij het opslaan van afbeeldingen de volgende instellingen:

• 75% Quality
• .jpeg-formaat (.png voor logo ‘ s en pictogrammen)
• sRGB kleuren

3. Image Sizing

Vink het vakje aan formaat aanpassen en kies breedte & hoogte., In het vak W: H: specificeer W (breedte in pixels) aan de waarde die nodig is (1500px voor blogberichten, en 2880 voor diavoorstellingen). Door de waarde in H (hoogte) leeg te laten, wordt deze ingesteld op auto sizing.

Voor galerieën kunt u W als leeg laten, en H (hoogte) instellen op 1500px, dit zou optimaal moeten zijn voor de meeste thema ‘ s.

bovenstaande maten zijn al geoptimaliseerd voor retina-apparaten.

4. Output Sharpening

Vink het vakje naast ” Sharpen For “aan en selecteer de hoeveelheid op”High”.

U kunt nu de afbeeldingen exporteren en dit proces volgen wanneer u afbeeldingen exporteert.,

instellingen voor beeldkwaliteit

In de droomwereld van een fotograaf exporteren we altijd afbeeldingen van maximale kwaliteit. In werkelijkheid komen we erachter dat maximale kwaliteit export niet vereist is. Bij webgroottes zijn de verschillen in kwaliteit vaak moeilijk waar te nemen, en dat betekent dat we de kwaliteit iets kunnen verminderen, waardoor de bestandsgrootte aanzienlijk wordt verminderd.

zolang de afbeeldingen niet zacht zijn, zullen uw clients niet het verschil weten tussen welke foto u hebt genomen en de afbeelding die op uw site wordt weergegeven.

Dit geldt ook voor de kleuren van afbeeldingen., Ieders scherm is anders gekalibreerd, dus zorgen maken over kleine kleurvariaties tussen een afbeelding in een browser en in uw editing tool van keuze is een verspilling van tijd, tenzij het de beeldkwaliteit ruïneert.

aan de bovenkant van de kwaliteitsschaal neemt het rendement af. Het verschil in waargenomen kwaliteit tussen een 75% en 100% kwaliteit instelling is moeilijk te zien, maar het verhoogt de bestandsgrootte aanzienlijk.

gezien de bovenstaande resultaten selecteert u de export van 65-75 kwaliteit., Het slaat de juiste balans van kwaliteit en optimale beeld Bestandsgrootte.

nu is het jouw beurt om je bestanden te hernoemen, ze te exporteren voor het web, ze op te slaan voor het web en je hebt een aantal echt goed geoptimaliseerde afbeeldingen voor het web.

Bonusstap: optimaliseer afbeeldingen voordat u ze naar uw site uploadt

er is nog een laatste stap die u kan helpen om overtollige gegevens drastisch uit uw afbeeldingen te verwijderen en de bestandsgrootte te verkleinen – we hebben het over tools zoals JPEGmini of TinyJPG.

deze hulpmiddelen kunnen u helpen uw afbeeldingen verder te optimaliseren., Kies er een en voer uw afbeeldingen door:

1. JPEGmini-deze app stelt u in staat om uw afbeeldingen te comprimeren en hun Bestandsgrootte te verkleinen zonder enig zichtbaar effect op de kwaliteit van de afbeelding. Als u de Pro-versie hebt, is er een extensie voor Lightroom die dit automatisch bij export doet – een sterk aanbevolen tool voor elke fotograaf.
2. TinyJPG of TinyPNG – u kunt uw afbeeldingen door tinyJPG of tinyPNG laten lopen om uw afbeeldingen verder te comprimeren. Er zijn echter 2 beperkingen., Met de gratis versie van deze tool kunt u slechts 20 afbeeldingen tegelijk comprimeren, en de bestandsgrootte per afbeeldingen moet minder dan 5 MB zijn.

Dit zal de laatste stap zijn in het maken van snelle web geoptimaliseerde afbeeldingen om de snelheid van uw site snel te houden, en afbeeldingen zien er geweldig uit!

leer meer door het lezen van deze uitgebreide gids over het optimaliseren van afbeeldingen voor uw WordPress site.

Image SEO

nu dat u uw afbeeldingen in grootte, geoptimaliseerd en geüpload naar uw site-nu wilt u ALT-tags toevoegen! Dit is de laatste stap in het creëren van geoptimaliseerde beelden voor SEO doeleinden., De ALT-tag is wat zoekmachines gebruiken om afbeeldingen te lezen. Zonder hen, uw beelden zijn vrijwel onbestaande op het web.

gelukkig kunt u met WordPress na het uploaden naar uw mediabibliotheek gaan en elke afbeelding labelen., Een geweldige plugin waarmee je dit snel kunt doen is WP meta SEO, wanneer toegevoegd kun je naar WP meta SEO > afbeeldingsinformatie gaan en ALT-Tags toevoegen aan alle afbeeldingen waar het niet aanwezig is, zodra de plugin is voltooid kan de-geactiveerd worden:

Er zijn ook verschillende plugins die de ALT-tags automatisch toevoegen. Rank Math is een goede plugin oplossing voor deze, gewoon installeren en het zal automatisch ALT-tags toevoegen bij het uploaden van de afbeelding beschrijving, of titel.,

Lees deze SEO-Gids Voor afbeeldingen om meer tips en trucs te ontdekken en zorg ervoor dat u het meeste uit uw afbeeldingen haalt in de zoekresultaten.

dus dat is het mensen. De 3 stappen naar het hebben van geoptimaliseerde afbeeldingen voor uw website.

begin met het uitzoeken van uw afbeeldingsafmetingen, sla ze dan correct op voor het web, voeg de juiste titels toe en optimaliseer hun grootte. Tot slot, voeg alt-tags om SEO te verbeteren via WordPress (het moet mogelijk zijn om ALT-tags toe te voegen in alle content management systemen, raadpleeg de documentatie om uit te vinden hoe, of uit te reiken naar ondersteuning).,

niet-geoptimaliseerde afbeeldingen vinden

Als u al afbeeldingen naar uw site heeft geüpload en wilt weten hoe u de afbeeldingen kunt vinden die uw pagina vertragen, bekijk dan de volgende video. Tools zoals GTMetrix of Pingdom, of het gebruik van de browser console zal gemakkelijk laten u afbeeldingen die te groot zijn voor het web te vinden.

Als u meer wilt weten over het optimaliseren van uw site voor snelheid, bekijk dan deze handige gids.

Flothemes
machtigen u