weet u niet zeker waarom uw site niet goed scoort op Google of waarom consumenten er niet mee bezig zijn? Beeldformaten voor websites en website snelheid en SEO problemen worden vaak gezien van invloed bounce rates en rankings.
voor veel mensen is het opslaan van afbeeldingen voor het web altijd een mysterie geweest. Zware beelden (originele beeldformaten op 5000px breedte, niet-geoptimaliseerde foto ‘ s) zal niet alleen de gebruikerservaring op uw site degraderen, maar zal ook een negatieve impact hebben op uw SEO-strategie (laadsnelheid, bounce rate, ranking, enz.).
laten we de lijst met richtlijnen voor de grootte van afbeeldingen van de website opsplitsen.
Waarom zijn beeldformaten en Website-prestaties belangrijk?
het laden van Websites duurt langer wanneer de afbeeldingen niet geoptimaliseerd zijn. Trage websites resulteren in een slechte gebruikerservaring, een kleinere kans op ranking in Google-zoekopdrachten, en, als gevolg daarvan, minder query ‘ s en consumenten.
richtlijnen voor de grootte van afbeeldingen van websites vermelden dat het opslaan van uw foto ‘ s in de juiste verhoudingen en het optimaliseren ervan voor het web kan helpen met een verscheidenheid aan dingen, waaronder:
• snelheid
volgens Google research neemt de kans dat een mobiele bezoeker de pagina verlaat met 90% toe als een webpagina langer duurt dan 5 seconden. U kunt de snelheid van uw website pagina ‘ s door het verkleinen en verlagen van de foto maten.
* gebruikerservaring
bezoekers zullen een boeiendere ervaring hebben tijdens het surfen op uw website als u aantrekkelijke afbeeldingen van hoge kwaliteit gebruikt. U zorgt voor een naadloze en soepele ervaring voor uw bezoekers door deze foto ‘ s geoptimaliseerd te houden en snel te laden, wat hen aanmoedigt om meer tijd door te brengen op uw site en uw content te verkennen.
* SEO Ranking
hoe eerder uw site laadt, hoe hoger U kunt rangschikken. Op zowel desktop als mobiele apparaten laden webpagina ‘ s met geoptimaliseerde afbeeldingen aanzienlijk sneller.
* verkoop
snellere laadsnelheden en verbeterde SEO kunnen helpen meer bezoekers naar uw site te trekken, waardoor uw kansen op contact en boeking toenemen.
Wat zijn de meest geschikte afbeeldingsgroottes voor Websites?
opvallend is gebouwd om te werken met een breed scala aan afbeeldingsgroottes voor verschillende schermformaten, secties, stijlen en ontwerpen. Echter, het is af en toe handig om een ruw concept van welke dimensies te uploaden.
hier volgen enkele algemene richtlijnen voor de grootte van afbeeldingen van de website!
afbeelding is afkomstig van opvallend
1. Afbeeldingen voor de achtergrond
de foto ‘ s op de achtergrond van opvallend zijn ontworpen voor een breed scala aan schermformaten, van monitor tot tablet tot telefoon. Om ervoor te zorgen dat uw achtergrond er uitstekend uitziet op alle schermen, raden we een grootte aan van 1600 pixels breed en 900 pixels hoog. Neem niet-achtergrond foto ‘ s van personen, merken, en andere informatie met voorzichtigheid!
2. Instellingen voor de achtergrond
om je achtergrond te vergroten/uitlijnen, heb je een paar alternatieven.
Stretch / Cover standaard: deze optie strekt uw afbeelding uit om het gehele scherm te vullen, zowel in hoogte als breedte. Omdat de afbeelding zal werken als een achtergrond op elke schermgrootte, dit is meestal de beste oplossing. Als uw afbeelding echter inhoud aan de zijkanten heeft (vooral links en rechts), is deze mogelijk niet zichtbaar op mobiele telefoons.
bevat: bevat toont de volledige afbeelding, zodat geen enkel deel ervan wordt afgehakt. Op sommige apparaten kan dit echter resulteren in enige witruimte.
midden: de afbeelding wordt in het midden van de sectie getoond en wordt niet geschaald als u het midden kiest. Aan de andere kant, de achtergrond zal tonen witruimte rond de randen van de afbeelding is te klein. Sommige elementen van de afbeelding kunnen worden afgehakt als het te groot is, vooral op kleinere schermen.
Tile: Tile zal een afbeelding centreren en dan herhalen, wat handig is voor het maken van patronen.
om te beginnen met de website image size guidelines, noteer hoe breed de afbeelding op de pagina verschijnt.
afbeelding is afkomstig van opvallend
* achtergrondafbeeldingen
de ideale grootte van de achtergrondafbeeldingen is 1600x900px
* afbeeldingen met volledige breedte
ze moeten ten minste 1400 pixels breed zijn voor de beste resultaten. Volgens de website image size guidelines
* halve breedte afbeeldingen
halve breedte afbeeldingen moeten ten minste 700px breed zijn voor de beste kwaliteit.
* width breedteafbeeldingen
afbeeldingen moeten ten minste 480px breed zijn voor de beste kwaliteit 1/3 breedteafbeeldingen.
* ¼ breedteafbeeldingen
voor de beste kwaliteit 1/4 breedteafbeeldingen moeten ze ten minste 360 pixels breed zijn.
* Kleine pictogrammen en logo ‘ s
zij moeten ten minste 100 pixels breed zijn.
* galerijafbeeldingen
elke grootte is prima voor galerijafbeeldingen! Afbeeldingen in de galerij worden geopend in een lightbox bovenop uw website.
welke afbeelding is vereist voor uw Website?
afbeeldingen moeten zo groot zijn als nodig is om in hun “containers” te passen voor maximale website-prestaties, afhankelijk van uw pagina-indeling. Slideshow foto ‘ s, bijvoorbeeld, zijn vaak groter; blog afbeeldingen zijn middelgroot (op een breedte gelijk aan de pagina breedte minus de zijbalk); thumbnails zijn kleiner, enzovoort.
volgens de richtlijnen voor afbeeldingsgrootte van de website is het van cruciaal belang om eerst de afmetingen van de afbeelding vast te stellen om de breedte van het inhoudsgebied van uw website te berekenen. U kunt een “page ruler” browser plugin gebruiken om u te helpen bij het nemen van de maatregelen, of u kunt de ontwikkelaarstools geà ntegreerd in uw webbrowser gebruiken als u ervaring hebt: klik met de rechtermuisknop op een pagina-element en selecteer “inspecteren” in het drop-down menu.
foto is genomen vanaf Opvallend
klik in de werkbalk, gebruik het element selector tool om te beweeg de muis over de afbeelding of inhoud van de sectie die u geïnteresseerd bent in:
foto is genomen vanaf Opvallend
foto is genomen vanaf Opvallend
In dit geval de bovenstaande kolom vereist een beeld met een breedte van ten minste 525 pixels.
we zeggen ” ten minste “omdat afbeeldingen in nieuwere smartphones met high-density” retina ” schermen groter moeten zijn dan dat om er zo scherp mogelijk uit te zien.
overweeg de volgende scenario ‘ s:
A. Webafbeeldgrootte van volledige breedte
de richtlijnen voor afbeeldingsgrootte van de website bevelen 2560 pixels in breedte aan voor diavoorstellingen met volledige breedte (die zich automatisch uitstrekken tot de volledige grootte van de browser). Dit is de gebruikelijke resolutie breedte voor 27″ en 30 ” monitors.
afbeeldingen kunnen zo groot zijn als u wilt om de hoogte-breedteverhouding te bereiken die u kiest. Volledige pagina diavoorstellingen, bijvoorbeeld, die gebruikelijk zijn op bruiloft fotografie websites, behouden De Oorspronkelijke beeldverhouding van de foto ‘ s. Andere websites maken gebruik van een diavoorstelling die de gehele breedte van de pagina overspant, maar minder hoog is (wat leidt tot een beeldverhouding van ongeveer 3:1).
het volgende is een voorbeeld van “panoramische” diavoorstellingen van fotografische websites:
afbeelding is afkomstig van opvallend usre ‘ s website
afbeeldingen moeten 2560 pixels breed zijn (afgerond tot 2500px) en elke hoogte die u kiest voor afbeeldingen die de volledige breedte van de browser bestrijken (afhankelijk van of u de oorspronkelijke beeldverhouding van uw afbeeldingen wilt behouden of voor een meer panoramisch knippen wilt gaan).
dit is geen geval waarin we de afbeeldingsgrootte voor Retina-displays moeten verdubbelen omdat dat zou resulteren in enorme 5000px-afbeeldingen (niet om de gevaren van beelddiefstal toe te voegen, met grote bestandsgroottes).
Pas de vereiste afbeeldingsgrootte aan voor kleinere diavoorstellingen die niet de volledige breedte van de pagina innemen, maar slechts een deel ervan (misschien 2000px, of 1800px, enz.)
afbeelding is afkomstig van opvallend usre ’s website
B. afbeeldingsgroottes in galerijen (en miniaturen die vergroten in een Lichtbakweergave)
miniatuurgalerijen zijn unieke situaties waarin de grootte van uw miniaturen wordt genegeerd om ervoor te zorgen dat foto’ s groot genoeg zijn wanneer ze worden vergroot.
Een raster van kleine foto ‘ s die, wanneer erop geklikt wordt, opent in een full-screen slideshow (meestal met een semi-transparante overlay onder) is bedoeld als een “lightbox-weergave”:
Omdat die foto ‘ s gaat open in de modus volledig scherm, de website grootte afbeelding richtlijnen adviseren om minstens 1500 pixels breed (aan de langste zijde), zodat ze er ook op desktops en tablets.
je kunt zelfs tot 2000 pixels gaan als je wat extra “wow factor” wilt toevoegen, hoewel dat meestal niet het geval is.
afbeeldingen worden door de browser toch aangepast op mobiele apparaten, en 1500px is groot genoeg om er helder uit te zien op smartphones met hoge ppi “retina”-schermen.
verticale / portretafbeeldingen met een maximale hoogte van 1200 pixels (zoals 800×1200 pixels voor een 2:3 verticale afbeelding of 900×1200 pixels voor een 3:4 verticale afbeelding) kunnen nog kleiner zijn.
als de diavoorstelling bladeren tussen foto ’s toestaat met behulp van zijpijlen, kogels, vegen op mobiel of toetsenbordpijlen op het bureaublad, zal het beperken van de afbeeldingsafmetingen als deze de bestandsgrootte redelijk kort houden, wat resulteert in snellere afbeeldingslasten:
C. Aanbevolen afbeeldingsformaten voor blogberichten en andere statische afbeeldingen in Paginaopmaak
als uw blogfoto’ s geen Klik-om-te-vergroten (of “lightbox”) functie vereisen, moeten ze worden aangepast aan de breedte van de kolom of het inhoudsgebied.
neem het volgende voorbeeld van een enkele blogpost:
foto is genomen vanaf Opvallend usre de website van
U kunt vergewissen van de werkelijke breedte van de inhoud gebied door te meten welke alinea van de tekst met behulp van de methodes hierboven beschreven, bijvoorbeeld:
foto is genomen vanaf Opvallend usre de website van
als u al foto ‘ s hebt, kunt u zien wat de grootte van de browser is ze te resizen naar.
om dezelfde informatie te verkrijgen, kunt u een browserplug-in gebruiken, zoals beeldinformatie (eigenschappen) weergeven.
met die informatie (825 pixels bijvoorbeeld), kunt u nu de grootte verdubbelen om rekening te houden met retina displays (dus 1650 pixels in de breedte).
afhankelijk van het thema van uw site en uw risicotolerantie voor beelddiefstal, kunt u die hoeveelheid reduceren tot een meer verstandige 1200 pixels op de langste rand (dus horizontale afbeeldingen moeten 1200px breed zijn, en verticale afbeeldingen moeten 1200px hoog zijn, met behoud van hun oorspronkelijke beeldverhouding).
kleinere foto ‘ s die als miniatuurweergave worden gebruikt (die niet hoeven te worden uitgebreid) zijn onderworpen aan hetzelfde besluitvormingsproces.
conclusie
deze richtlijnen voor de afbeeldingsgrootte van de website zijn niet echt van toepassing op diensten voor het archiveren van foto ‘ s zoals PhotoShelter of SmugMug (die ingebouwde beveiligingsmaatregelen hebben en miniaturen met een lage resolutie genereren van uw originele bestanden met een hoge resolutie, zoals de site nodig heeft), of wanneer u deze afbeeldingen verkoopt als downloads of afdrukken, zoals aan het begin vermeld.
het volgen van deze richtlijnen voor afbeeldingsgrootte van websites is een must als u een zelf gehoste site hebt en alleen uw foto ‘ s op het web hoeft te presenteren.
het kiezen van de juiste afbeeldingen is een belangrijk aspect van het creëren van een visueel aantrekkelijke en snelladende website. Er is zonder twijfel een leercurve. Echter, er zijn andere voordelen te hebben, en het is allemaal onderdeel van de opwinding van het creëren en onderhouden van een website!