Lagre bilder for web har alltid vært litt av et mysterium for mange. Opplasting av bilder som er tung (opprinnelige bildet dimensjonering på 5000px bredde, unoptimized bilder) vil ikke bare skape problemer med brukeropplevelsen på nettstedet ditt, men vil også påvirke din SEO strategi (lasting hastighet, fluktfrekvens, rangering, etc.).,
Denne artikkelen er delt opp i flere deler som dekker alt du trenger å vite om hvordan å forberede bilder for web. I den første delen av innlegget vil vi liste det anbefales bildestørrelser for din Flothemes nettstedet. Neste artikkelen vil dekke hvordan å inspisere de ulike delene på nettstedet ditt for å finne riktig størrelse for bildene dine før du laster dem til web. Vi vil også forklare hvordan du kan eksportere / lagre bilder på riktig måte, slik at de er optimalisert for hastighet.,
til Slutt vil vi gi noen Bilde SEO tips om hvordan du tittelen til dine bilder på riktig måte når du lagrer dem, og hvorfor du bruker ALT-tagger vil forbedre din SEO. For de som allerede er lastet opp bilder til ditt nettsted, og vi vil vise deg hvordan å identifisere bilder som er for store og bremse ned området. La oss begynne!
Hvorfor er bildestørrelser og nettstedet ytelse viktig?
Unoptimized bilder tregere nettsteder. Sakte nettsteder = dårlig brukeropplevelse, lavere sjanser til å rangere i Google-søk, og til slutt mindre henvendelser og kunder.,
Lagre bildene med riktig størrelse og optimalisere bilder for web kan bidra med et par ting:
- Speed – ifølge en undersøkelse gjort av Google, hvis en web-side som lastes inn i mer enn 5 sekunder, vil sannsynligheten for at en mobil brukeren forlater siden øker med 90%. Ved å endre størrelse og redusere image størrelser, kan du gjøre dine nettsider raskere.
- Bruker-erfaring – god kvalitet, kraftfull og bilder hjelper besøkende har en mer engasjerende opplevelse når de besøker nettstedet ditt., Ved å holde de bildene som er optimalisert og legge i fort – du er å sikre en sømløs opplevelse for de besøkende, noe som motiverer dem til å bruke mer tid på nettstedet og utforske innholdet.
- SEO ranking – området hastighet er en ranking faktor. Jo raskere er din side, jo bedre kan du potensielt rang. Web-sider med optimaliserte bilder skal lastes mye raskere på både stasjonære og mobile enheter.
- Salg – raskere innlasting og bedre SEO kan bidra til å få flere brukere til nettstedet ditt som øker sjansene for å bli avhørt og bestilt.,
Merk: når vi snakker om bildestørrelse vi mener bildet dimensjon i punkter.
Hva er den beste størrelsen på bilder for web og Flothemes?
Når du laster opp bilder til nettet det er en rekke ting å ta hensyn til, slik som det er bilde blir brukt til, hvor stor skal filen være, og hvilken type element som skal brukes for ulike områder på nettstedet ditt.,
Bilde Bruk og Type
Det finnes forskjellige tilfeller der vil du ønsker å bruke ulike størrelser for ulike områder på nettstedet, under jeg vil dekke de vanligste områdene og dimensjonering alternativer du kan bruke for hver enkelt. Merk at disse er anbefalt, retina-vennlig, dimensjonering alternativer med tanke på at flertallet av brukerne vise nettstedet på en enhet som er enten mobil eller 13-15 cm gjennomsnittlig størrelse. Imidlertid, hvis du tar sikte på å gjøre nettstedet ser bra for 27-tommers skjerm (som har en veldig høy oppløsning), merk deg at det kanskje ikke hva dine potensielle kunder benytter.,
Hvis du ønsker å være mer presis hvordan brukerne ser nettstedet ditt, og porteføljen din, kan du sjekke enheter som brukes for å få tilgang til nettstedet ditt via Google Analytics (gå til Målgruppe – Teknologi – Nettleser & OS – Tv med oppløsning), og juster den anbefalte størrelse for å matche de nødvendige andel av den gjennomsnittlige brukeren.
Full Bredde Bilder
2400x1600px, jpeg, lagret for web, og som er optimalisert
Over området du kanskje har seksjoner hvor du trenger å bruke hele bredden bilder som dekker hele skjermen fra venstre til høyre., Disse områdene kan være helt bilder, full skjerm lysbildefremvisning, banner bilder. For å sikre at hele bredden bildene ser bra ut på hvilken som helst enhet stor eller liten den anbefalte størrelsen er 2400x1600px. Merk at enhetene har forskjellige forhold enn den du skyte, og det er mulig vil bildene bli beskåret når den vises på nettet. Som en anbefaling om å prøve og skyte større bilder enn vanlig for web-innhold, for å unngå beskjæring av viktige innholdet i bildet.,
I Innholdet Bilder
Horisontal – maks bredde 1500px, jpeg, lagret for web, og som er optimalisert
Vertikal – maks bredde 1000px, jpeg, lagret for web, og optimalisert
På sidene på nettstedet ditt, vil det være deler som består av bilder, tekst områder, call to action-knapper, etc. I utgangspunktet er dette de delene der bildene er en del av innsiden innhold (les som «ikke full bredde»)., I disse tilfellene, med mindre den anbefalte størrelsen er angitt som noen av våre Flothemes blokker gjøre, kan du følge de ovennevnte anbefalinger for horisontale og vertikale bilder. Basert på forholdet høyden vil justere tilsvarende når du lagre bildene dine.,vis gallerier: sørg for at de er alle i samme høyde anbefales 1500px, uavhengig av om de er horisontale eller vertikale
blogginnlegg Bilder
- hvis du forbereder bilder for å laste opp inne innlegget, sørg for at de er alle i samme bredde, anbefales 1500px, uavhengig av om de er horisontale eller vertikale
Utvalgte Bilder
Det er 3 typer av utvalgte bilder: portrett, landskap og helt bilder., Stående og Liggende bilde dimensjonering følger samme anbefaling som i innhold, bilder, mens den anbefalte størrelse for helten bilder er dekket under Full Bredde bilder. Nøkkelen til å ha god fremhevede bilder er konsistens. Hvis du ønsker å bruke alle stående sørg for at de er samme størrelse, samme går for landskap og helt bilder. Hvis du bruker en mur grid, dimensjonering ovenfor er det ikke så relevant, bare sørg for at bildene er minst 1000px i bredden.,
Hvis du har noen problemer med bildeskalering sørg for å ta en titt på bildet dimensjonering alternativer i Flothemes innstillinger for å sikre at de er riktig satt opp.
Måter å finne ut riktig bilde størrelser for din web
Det kan være mulig at de anbefalte størrelsene ovenfor vil ikke samsvarer med dine behov på grunn av en bestemt layout. Hvis du er usikker på om riktig bilde dimensjon, heldigvis, det er noen måter som kan hjelpe deg enkelt kontrollere ditt nettsted bilder, og finne riktig dimensjonering er nødvendig for hvert element på nettstedet ditt.,
En viktig ting å huske er at for retina-enheter, må du doble bildet pikseltetthet. Hva det betyr er at du trenger bilder dobbelt størrelse for retina-enheter slik at de ser fine og skarpe. Så når du har funnet den riktige størrelser for hver seksjon på nettstedet ditt, vil du ønsker å doble disse størrelser, og bare deretter eksportere dem og laste dem opp til ditt nettsted.
en., Ved hjelp av bildestørrelse Info Extension
Den første metoden for å finne bilde størrelser for nettstedet ditt, er ved hjelp av bildestørrelse Info extension for Krom (Hvis du ikke bruker Chrome på datamaskinen din, anbefaler vi sterkt å bruke den mens du oppretter nettstedet ditt). Når du har installert utvidelsen, dette verktøyet vil tillate deg å finne ut bildet størrelser av hvert bilde-element på nettstedet ditt.
Sjekk ut bildene på nettstedet, lage notater, og så med denne kunnskapen, vil du være i stand til å skreddersy din fotografier nøyaktig å passe til de områder som de er ment i temaet design., Bare husk, med retina-skjermer du ikke krever at bildene skal være dobbelt så stor som den tiltenkte plass. Så hvis du har et bilde løpet av 750x500px, for retina-det bør være 1500x1000px når du laster opp til WordPress (eller noen annen plattform).
For eksempel: når vi inspisere et bilde med denne utvidelsen, vil det vises på 780x520px, men det er faktisk størrelse er 1560x1040px. Dette er fordi vi bruker en retina-skjermen ved å undersøke bildet. I dette tilfellet, du kan bruke dimensjoner-størrelser å velge bildet filstørrelse.,
På en ikke-retina-enheten vises, mål og størrelser vil forbli den samme. I dette tilfellet, dobbelt opp tallene og laste opp bilder i den størrelsen.
Den viktigste begrensning av dette verktøyet, er at det ikke kan inspisere bakgrunnsbilder for dimensjonering. På mange temaer, bakgrunnsbilder er brukt i stedet for bilde HTML-elementer, som de er mer fleksible når det vises bilder. Hvis du er i stand til å inspisere bilder fordi de er bakgrunnen bilder, kan du bruke den neste metoden til å skrive en anmeldelse bildestørrelser på nettstedet ditt.
b., Ved hjelp av Inspektør Verktøyet
Med Chrome og Safari du kan også bruke utviklere inspektør verktøyet for å finne bilde størrelser på nettstedet. Prinsippet vil være det samme som før, inspisere de ulike elementer på nettstedet, og noter ned størrelser. Dobbeltrom bildet størrelser for retina-enheter og deretter laste dem opp til WordPress, når de har blitt optimalisert for web og tittelen forståelse for SEO.
De begrensninger ved denne metoden vil være at hvis nettstedet ditt er ved hjelp av noen responsive elementer i REM verdier, bilder, kan bli redusert når du bruker inspektør i det samme vinduet., Hvis området er også ved hjelp av responsivt elementer, vil de bli større på større skjermer, og mindre på andre. Det er best å bruke en større skjerm der det er mulig når du sjekker nettstedet, så du kan få den mest nøyaktige bildet dimensjonering. I alle fall, med denne metoden vil gi deg en god indikasjon på størrelser for nettstedet ditt, og vil tillate deg til å nærme deg legge til bilder til din nettside med mer omsorg.
Chrome
Chrome har innebygde verktøy for utviklere, som er hvorfor det er den mest populære nettleseren på nettet for utviklere og designere., Denne videoen forklarer hvordan du kan inspisere bilder på nettstedet ditt for å finne ut deres størrelser:
Firefox
Med Firefox, mye som chrome, de har en innebygd inspektør verktøy som lar deg sjekke bilder for nettstedet ditt.
Safari
Hvis du bruker Safari, kan du bruke inspektør verktøyet til å se størrelser på bilder. Sjekk følgende guide på hvordan å aktivere verktøy for utviklere.,
Nå kan du gå til forskjellige deler på nettstedet ditt og forberede biletet.
For gallerier vil du ønsker å se på høyden av bilder, som de er vanligvis begrenset av høyde (slik bredde kan være satt til auto).
For blogginnlegg vil du ønsker å være oppmerksom på bredden for dine bilder, som de er begrenset av bredden (høyden kan være auto).,
For resten av elementene på nettstedet ditt, bør du bruke metoden som er beskrevet ovenfor for å få de riktige dimensjoner, og laste dem opp på optimal mål for nettstedet ditt.
Nå som du vet hvilke mål du trenger for alle elementer på nettstedet ditt, vi vil forklare hvordan å optimalisere alle bildene for størrelse, det er i form av data dimensjonering. Fil-størrelsen på bildene er også veldig viktig for web. Laste opp oppblåst og tung bilder på ditt nettsted vil belastningen din server ressurser, bremse hastigheten på nettstedet ditt, og i effekt skape en negativ brukeropplevelse.,
Optimalisere og lagre bilder for web
Det er en rekke ting du bør vurdere når du vil optimalisere og lagre bilder for web. Du bør vurdere hva filtypen du vil bruke, JPG, PNG eller GIF, avhengig av formålet. Du vil merke bildene dine på riktig måte for SEO formål, og du ønsker å lagre dem i riktig farge format (sRGB for web).
Avhengig av formålet, må du lagre bilder i ett av følgende formater .jpg, .gif eller .png. JPG vil være det vanligste formatet når du lagrer bilder for porteføljen din nettside, vil de også være det letteste i størrelse.,
Etter filnavn, vennligst sørg for at de er egnet til hvert enkelt bilde eller blogginnlegg. Bare bruke bokstaver, tall, understreker og bindestrek. Prøv å bare bruke engelske bokstaver. Tegn fra andre språk, spørsmålstegn, mellomrom prosent tegn kan laste opp feil eller føre til uventet oppførsel i gallerier eller blogginnlegg.
For eksempel, hvis du har bare gjort en bohem-bryllup i The Biltmore Santa Barbara, label bilder, bohem-bryllup-biltmore-santa-barbara_0001.jpg dette vil være mye mer SEO vennlig, og kunne gi bedre rangering for ditt nettsted.,
Optimalisere bilder i Lightroom
La oss innse det, det er mange forskjellige innstillinger å velge og endeløse kombinasjoner av tallene til innspill. Imidlertid, hvis du allerede vet image format og nødvendige filen bilde dimensjoner, er det mye enklere.
I Lightroom, kan du komme til Eksport Dialog på 3 måter:
merk og Eksport
Du kan bare merke / velg et bilde fra ditt Lightroom bibliotek og høyre-klikk på bildet. Fra popup-menyen velger du Eksporter-alternativet.,
– Filen og Eksportere
Den andre måten er å gå til Fil -> Eksporter
ved Hjelp av hurtigtasten
Den tredje, og raskeste måten er å bruke et tastatur snarvei:
shift + command + E (⇧+⌘+E)
Det spiller ingen rolle hvordan du får det. Noen av disse vil fungere, så velg den enkleste for deg å huske.,
Lightroom Eksport Dialog
Nå som du vet hvordan du skal eksportere bilder for web, vil vi dekke 4 seksjoner og ulike alternativer å velge i Lightroom eksport dialogboksen for å tillate deg å eksportere optimaliserte bilder for web.
1. Filnavn
Hver enkelt kan eksportere har sine egne endre navn på innstillingene. Hvis du holder deg til den standard alternativet, vil bildene har samme navn som den opprinnelige filene, og lagres som et JPEG-bilde., Men vi vil sterkt anbefale at du krysse av for «endre navn til» boksen og velg en av de mange døpe maler som tilbyr Lightroom for å tilpasse den eksporterte bilder. I den filnavn, vi omdøpt bildet filnavnene til «Custom name (tilpasset Navn – Sekvensen» hvor Teksten er tett knyttet til vår blogg innlegg tittel eller blogginnlegg søkeord.
2. I Fil-Innstillinger
sørg for at ditt Bilde Format som er satt til JPEG. Dette er de fleste web-vennlig alternativ. Kvaliteten bør ikke være mindre enn 65., Normalt setter vi den til 75. Din Farge Plass trenger for å være i sRGB. Dette er fargen plass som brukes av web-så vil det føre til det beste. IKKE merker av i boksen for «Limit File Size til:». Kontrollere at boksen ville redusere fil kvalitet betydelig.
for Å oppsummere, når du lagrer du bilder du bruke disse innstillingene:
- 75% Kvalitet
- .jpeg-format (.png logoer og ikoner)
- sRGB farger
3. Bildeskalering
merk av i boksen endre størrelse til å Passe, og velg Bredde & Høyde., I boksen W: H: angi W (Bredde, i bildepunkter) den verdien som er nødvendig (1500px for blogginnlegg, og 2880 for lysbildeserier). Ved å la verdi i H (høyde) blanke det vil bli satt til auto-sizing.
For Gallerier, kan du la W som tomme, og angi H (Høyde) for å 1500px, bør dette være optimalt for de fleste temaer.
størrelser ovenfor er allerede optimalisert for retina-enheter.
4. Skarphet
merk av i boksen ved siden av «Skjerpe For»og velg beløpet til «Høy».
Du kan nå Eksportere bilder, og følg denne prosessen når du eksporterer bilder.,
Image Quality Settings
I en fotografs drøm verden, ville vi alltid eksport bilder i høyeste kvalitet. I virkeligheten, kan vi finne ut at maksimal kvalitet eksport er ikke nødvendig. På web størrelser, forskjeller i kvalitet er ofte vanskelig å oppfatte, og det betyr at vi kan redusere kvaliteten litt, redusere filstørrelsen betraktelig.
Så lenge bildene ikke er myk, dine kunder ikke vil vite forskjellen mellom det bildet du tok, og bildet som er vist på nettstedet ditt.
Dette gjelder også for farger av bildene., Alles skjermen er kalibrert på en annen måte, så å bekymre seg om små fargevariasjoner mellom et bilde i en nettleser, og i redigering verktøyet av valget er bortkastet tid, med mindre det ødelegger bildet kvalitet.
På den øvre enden av kvalitet skalaen, det er avtagende avkastning. Forskjellen i opplevd kvalitet mellom 75% og 100% kvalitet-innstillingen er vanskelig å se, men det øker filstørrelsen betraktelig.
Gitt resultatene over, velge eksport av 65-75 kvalitet., Det slår den riktige balansen mellom kvalitet og optimal bildefil størrelse.
Nå er det din tur til å gi nytt navn til filene dine, må du eksportere dem for internett, og lagre dem for web, og du vil ha noen virkelig godt optimalisert bilder for web.
Bonus trinn: optimalisere bildene før du laster dem til nettstedet
Det er en siste trinn som kan hjelpe deg drastisk fjerne overflødig data fra dine bilder, og redusere filstørrelsen – vi snakker om verktøy som JPEGmini eller TinyJPG.
Disse verktøyene kan hjelpe deg med å optimalisere dine bilder., Velg en og kjøre dine bilder gjennom det:
- JPEGmini – denne appen lar deg komprimere bilder og redusere filstørrelsen uten noen synlig effekt på kvaliteten på bildet. Hvis du har Pro-versjonen, det er en utvidelse for Lightroom som vil gjøre dette automatisk på eksport – en sterkt anbefalt verktøy for enhver fotograf.
- TinyJPG eller TinyPNG – du kan kjøre dine bilder gjennom tinyJPG eller tinyPNG til å komprimere bilder enda mer. Det er 2 begrensninger om., Med den gratis versjonen av dette verktøyet, du kan bare komprimere 20 bilder på en gang, og fil-størrelse per bildene bør være under 5 MB.
Dette vil være det siste trinnet i å skape rask web-optimaliserte bilder for å holde siden din hastighet er rask, og bilder ser flott ut!
finn ut mer ved å lese denne omfattende guide på hvordan å optimalisere bilder for din WordPress nettstedet.
Bilde SEO
Nå som du har fått bildene størrelse, optimalisert og lastet opp til nettstedet ditt – nå får du ønsker å legge ALT koder! Dette er det siste trinnet i å lage optimaliserte bilder for SEO-formål., ALT-tag-er det som søkemotorene bruker for å lese bilder. Uten dem, bildene dine er ganske mye som ikke-eksisterende på internett.
Heldigvis med WordPress kan du gå inn i media biblioteket etter opplasting, og etiketten på hvert bilde., En stor plugin som lar deg gjøre dette raskt er WP Meta SEO, når du har lagt til, kan du gå til WP Meta SEO > Bilde Informasjonen og legge til ALT-Etiketter til noen bilder hvor det ikke er til stede, når du er ferdig plugin kan være de-aktiveres:
Det er også flere plugins som vil legge til alt-koder automatisk. Rang Matematikk er en god plugin løsning for dette, er det bare installer det og det vil automatisk legge til ALT-etiketter ved opplasting fra bildet beskrivelse, eller tittel.,
Les dette bildet SEO guide for å finne ut mer tips og triks, og sørg for at du får mest mulig ut av bildene dine i søkeresultater.
Så det er det folk. 3 trinn til å ha optimalisert bilder for ditt nettsted.
Start med å finne ut av bildet ditt mål, og deretter lagre dem på riktig måte for web, legge til rette titler og optimalisere deres størrelse. Til slutt legger du alt koder for å forbedre SEO via WordPress (Det bør være mulig å legge til ALT-etiketter i alle content management-systemer, kan du se dokumentasjonen for å finne ut hvordan, eller nå ut til å støtte).,
å Finne Unoptimized Bilder
Hvis du allerede har lastet opp bilder til nettstedet ditt, og ønsker å vite hvordan å finne de som er bremse ned på siden din, sjekk ut følgende video. Verktøy som GTMetrix eller Pingdom, eller via nettleseren konsollen vil lett la deg finne bilder som er for store for web.
Hvis du ønsker å lære mer om å optimalisere nettstedet ditt for speed, sjekk ut denne nyttige guiden.
Flothemes
Myndiggjøring Du
Leave a Reply