Lagring af billeder til web, har altid været lidt af et mysterium for mange. Upload af billeder, der er tunge (original billedstørrelse ved 5000p.bredde, ikke-optimerede billeder) skaber ikke kun problemer med brugeroplevelsen på dit .ebsted, men vil også påvirke din SEO-strategi (indlæsningshastighed, afvisningsfrekvens, placering osv.).,
denne artikel er opdelt i flere dele, der dækker alt hvad du behøver at vide om, hvordan du forbereder dine billeder til internettet. I den første del af indlægget viser vi de anbefalede billedstørrelser til dit Flothemes-.ebsted. Dernæst vil artiklen dække, hvordan du inspicerer de forskellige sektioner på dit websiteebsted for at identificere de korrekte størrelser for dine billeder, før du uploader dem til internettet. Vi vil også forklare, hvordan du eksporterer / gemmer billeder korrekt, så de er optimeret til hastighed.,
endelig vil vi give nogle Billedseo-tip til, hvordan du titler dine billeder korrekt, når du gemmer dem, og hvorfor brug af ALT-tags forbedrer din SEO. For de allerede uploadede billeder til dit siteebsted viser vi dig, hvordan du identificerer de billeder, der er for store og bremser dit .ebsted. Lad os begynde!
Hvorfor er billedstørrelser og siteebstedets ydeevne vigtige?
ikke-optimerede billeder bremser websebsteder. Langsomme websebsteder = dårlig brugeroplevelse, lavere chancer for at rangere i Google-søgninger og i sidste ende mindre forespørgsler og kunder.,
Lagring af dine billeder med passende dimensioner og optimering af billeder til internettet kan hjælpe med et par ting:
- hastighed – ifølge en undersøgelse udført af Google, hvis en Googleebside indlæses på mere end 5 sekunder, øges sandsynligheden for, at en mobilbruger forlader denne side med 90%. Ved at ændre størrelse og reducere billedstørrelser gør du dine websiteebstedssider hurtigere.
- brugeroplevelse-billeder af god kvalitet hjælper besøgende med at få en mere engagerende oplevelse, mens de gennemser dit websiteebsted., Ved at holde disse billeder optimeret og indlæses hurtigt-sikrer du en problemfri og jævn oplevelse for dine besøgende, hvilket motiverer dem til at bruge mere tid på dit siteebsted og udforske dit indhold.
- SEO ranking-site hastighed er en ranking faktor. Jo hurtigere er dit .ebsted, jo bedre kan du potentielt rangere. Optimebsider med optimerede billeder indlæses meget hurtigere på både stationære og mobile enheder.
- salg-hurtigere indlæsningstider og bedre SEO kan hjælpe med at bringe flere brugere til dit siteebsted, hvilket øger dine chancer for at blive spurgt og booket.,bemærk: når vi taler om billedstørrelse, mener vi billeddimensionen i Pi .els.
Hvad er de bedste størrelse billeder til internettet og Flothemes?
Når du uploader billeder til internettet, er der en række ting, du skal tage i betragtning, såsom hvad billedet bruges til, hvor stort filen skal være, og hvilken type billede der skal bruges til forskellige områder på dit .ebsted.,
billedbrug og-Type
Der er forskellige tilfælde, hvor du vil bruge forskellige billedstørrelser til forskellige områder på dit .ebsted, nedenfor dækker jeg de mest almindelige områder og de størrelsesindstillinger, du kan bruge til hver. Bemærk, at disse anbefales, retina venlige, dimensionering muligheder i betragtning af at flertallet af brugere se theebstedet på en enhed, der er enten mobil eller 13-15 inches gennemsnitlige størrelse. Men hvis du sigter mod at få siteebstedet til at se godt ud til din 27 tommer skærm (som har en rigtig høj opløsning), skal du bemærke, at det måske ikke er, hvad dine potentielle kunder bruger.,
Hvis du ønsker at være mere præcis, hvordan dine brugere se dit websted og din portefølje, kan du kontrollere de enheder, der bruges til at få adgang til dit website via din Google Analytics (gå til Publikum – Teknologi – Browser & OS – Screen opløsning), og juster den anbefalede størrelse for at matche den nødvendige del af din gennemsnitlige bruger.
billeder i fuld bredde
2400 .1600p., jpeg, gemt til webeb og optimeret
på tværs af siteebstedet har du muligvis sektioner, hvor du skal bruge billeder i fuld bredde, der dækker hele skærmen fra venstre mod højre., Disse områder kan være heltebilleder, diassho.på fuld skærm, bannerbilleder. For at sikre, at dine billeder i fuld bredde ser godt ud på enhver enhed stor eller lille, er den anbefalede størrelse 2400 .1600p.. Bemærk, at enheder har et andet forhold end det, du optager, og det er muligt, at dine billeder beskæres, når de ses på nettet. Prøv som en anbefaling at skyde bredere billeder end normalt for dit contentebindhold for at undgå beskæring af vigtigt billedindhold.,
Indvendige Billeder af Indhold
Horisontal – max bredde 1500px, jpeg, gemt til web, og optimeret
Lodret – max bredde 1000px, jpeg, gemt til web, og optimeret
På dit websted sider, vil der være afsnit, der består af billeder, tekster områder, call to action knapper, osv. Grundlæggende er dette de sektioner, hvor billederne er en del af indvendigt indhold (læses som “ikke fuld bredde”)., I disse tilfælde, medmindre den anbefalede dimensionering er angivet som nogle af vores Flothemes-blokke gør, kan du følge ovenstående anbefalinger for vandrette og lodrette billeder. Baseret på dit forhold højden vil justere i overensstemmelse hermed, når du gemmer dine billeder.,vis gallerier: sørg for, at de alle samme højde anbefalet 1500px, uanset om de er vandret eller lodret
Blog-Indlæg, Billeder
- hvis du forbereder billeder til upload inde i en blogpost, sørg for, at de er alle den samme bredde, anbefales 1500px, uanset om de er vandret eller lodret
Udvalgte Billeder
Der er 3 typer af udvalgte billeder: portræt, landskab, landskab og hero billeder., Portræt og landskab billede dimensionering følger den samme anbefaling som inde indhold billeder, mens den anbefalede størrelse for hero billeder er dækket under fuld bredde billeder. Nøglen til at have gode featured billeder er konsistens. Hvis du vil bruge alt portræt, skal du sørge for, at de har samme størrelse, det samme gælder landskabs-og heltebilleder. Hvis du bruger et murværk, er størrelsen ovenfor ikke så relevant, bare sørg for, at billederne er mindst 1000P.i bredden.,
Hvis du har problemer med billedstørrelse, skal du sørge for at se på billedstørrelsesindstillingerne i dine Flothemes-indstillinger for at sikre dig, at de er konfigureret korrekt.
måder at finde ud af korrekte billedstørrelser til din webeb
det kan være muligt, at de anbefalede størrelser ovenfor ikke matcher dine behov på grund af et specifikt layout. Hvis du er usikker på den rigtige billeddimension, er der heldigvis et par måder, der kan hjælpe dig med nemt at inspicere dine websiteebstedsbilleder og identificere den korrekte størrelse, der er nødvendig for hvert element på dit .ebsted.,
en vigtig ting at huske er, at for retina-enheder skal du fordoble billedpi .eltætheden. Hvad det betyder Er, du har brug for billeder, der er dobbelt så store som nethindeenheder, så de ser pæne og sprøde ud. Så når du har fundet de rigtige billedstørrelser for hvert afsnit på dit siteebsted, vil du fordoble disse størrelser og først derefter eksportere og uploade dem til dit .ebsted.
A., Brug af Billedstørrelsesinfo-udvidelsen
den første metode til at finde billedstørrelser til dit .ebsted er ved at bruge billedstørrelsesinfo-udvidelsen til Chrome (hvis du ikke bruger Chrome på din computer, anbefaler vi stærkt at bruge det, mens du opretter dit .ebsted). Når du har installeret udvidelsen, giver dette værktøj dig mulighed for at finde ud af billedstørrelserne for hvert billedelement på dit .ebsted.
tjek billederne på dit .ebsted, lav noter, og så med denne viden vil du være i stand til at skræddersy dine fotografier nøjagtigt, så de passer til de rum, som de er beregnet til i temadesignet., Bare husk, med nethindeskærme kræver du, at dine billeder er dobbelt så store som det tilsigtede rum. Så hvis du har et billedrum på 750 .500p., skal det for nethinden være 1500 .1000p., når du uploader til .ordpress (eller en anden platform).
For eksempel: når vi undersøger et billede med denne udvidelse, er det, der vises på 780x520px, men det faktiske størrelse er 1560x1040px. Dette skyldes, at vi bruger en nethindeskærm, når vi inspicerer billedet. I dette tilfælde kan du bruge dimensionsstørrelserne til at vælge din billedstørrelse.,
på en ikke-nethinden enhed de viste og dimensioner størrelser vil forblive den samme. I dette tilfælde skal du fordoble tallene og uploade billeder i den størrelse.
den vigtigste begrænsning af dette værktøj er, at det ikke kan inspicere baggrundsbilleder til dimensionering. På mange temaer bruges baggrundsbilleder i stedet for HTML-elementer, da de er mere fleksible, når der vises billeder. Hvis du ikke kan inspicere billederne, fordi de er baggrundsbilleder, kan du bruge den næste metode til at gennemgå billedstørrelser på dit .ebsted.
b., Brug af Inspektørværktøjet
med Chrome og Safari kan du også bruge udviklerinspektørværktøjet til at finde billedstørrelser på siteebstedet. Princippet vil være det samme som før, inspicere de forskellige elementer på stedet og notere størrelserne. Dobbelt billedstørrelserne for retina-enheder, og upload dem derefter til .ordpress, når de først er optimeret til webeb og titlen korrekt til SEO.
begrænsningerne ved denne metode vil være, at hvis siteebstedet bruger nogle responsive elementer, der er indstillet i REM-værdier, kan billeder krympes, når du bruger inspektøren i det samme vindue., Hvis theebstedet også bruger responsive elementer, vil de være større på større skærme og mindre på andre. Det er bedst at bruge en større skærm, hvor det er muligt, når du kontrollerer siteebstedet, så du får muligvis den mest nøjagtige billedstørrelse. Under alle omstændigheder vil brug af denne metode give dig en god indikation af størrelser til dit .ebsted og give dig mulighed for at henvende dig til at tilføje billeder til dit websiteebsted med mere omhu.
Chrome
Chrome har indbygget udviklingsværktøjer, hvorfor det er den mest populære bro .ser på internettet for udviklere og designere., Følgende video forklarer, hvordan du kan inspicere billeder på dit websted for at finde ud af deres størrelser:
Firefox
Med Firefox, meget gerne chrome, de har en indbygget inspektør værktøj, der giver dig mulighed for at tjekke billeder til dit websted.
Safari
Hvis du bruger Safari, kan du bruge inspektør redskab til at se størrelser af billeder. Se følgende vejledning om, hvordan du aktiverer udviklerværktøjerne.,
nu kan du gå til forskellige sektioner på dit siteebsted og forberede billeddimensionerne.
for gallerier vil du se på billedernes højde, da de generelt er begrænset af højden (så bredden kan indstilles til auto).
for blogindlæg vil du bemærke bredden for dine billeder, da de er begrænset af bredde (højden kan være automatisk).,
for resten af elementerne på dit .ebsted skal du bruge metoden beskrevet ovenfor for at få de korrekte dimensioner og uploade dem i optimale dimensioner for dit .ebsted.nu hvor du ved, hvilke dimensioner du har brug for til alle elementerne på dit .ebsted, forklarer vi, hvordan du optimerer alle dine billeder til størrelse, det er med hensyn til data størrelse. Filstørrelsen på dine billeder er også meget vigtig for internettet. Upload af oppustede og tunge billeder på dit websiteebsted vil anstrenge dine serverressourcer, bremse dit .ebsted og faktisk skabe en negativ brugeroplevelse.,
optimering og lagring af billeder til webeb
Der er en række ting, du skal overveje, når du optimerer og gemmer billeder til internettet. Du bør overveje, hvilken filtype du skal bruge, JPG, png eller GIF afhængigt af formålet. Du vil gerne mærke dine billeder korrekt til SEO-formål, og du vil gemme dem i det rigtige farveformat (sRGB til webeb).
afhængigt af formålet skal du gemme billeder i et af følgende formater .jpg, .gif, eller .png. JPG vil være det mest almindelige format, når du gemmer billeder til dit portefølje websiteebsted, de vil også være de letteste i størrelse.,
for filnavne skal du sørge for, at de passer til hvert enkelt billede eller blogindlæg. Brug kun bogstaver, tal, understregninger og bindestreger. Prøv kun at bruge engelske bogstaver. Tegn fra andre sprog, spørgsmålstegn, mellemrum, procent tegn kan uploade forkert eller forårsage uventet adfærd i dine gallerier eller blogindlæg.
for eksempel, hvis du lige har gjort en boho bryllup i Biltmore Santa Barbara, mærke billederne, boho-bryllup-biltmore-santa-barbara_0001.jpg dette vil være meget mere SEO venlige, og kunne give bedre placering for dit .ebsted.,
optimering af billeder i Lightroom
lad os indse det, der er mange forskellige indstillinger at vælge og uendelige kombinationer af tal, der skal indtastes. Men hvis du allerede kender billedformatet og de nødvendige filbilleddimensioner, er det meget lettere.
i Lightroom kan du komme til Eksportdialogen på 3 måder:
Fremhæv og eksporter
Du kan blot fremhæve / vælge et foto fra dit Lightroom-bibliotek og højreklikke på billedet. Vælg indstillingen Eksporter i pop op-menuen.,
Fil og Eksport
Den anden måde er at gå til Fil -> Eksport
Brug tastaturgenvejen
Den tredje, og hurtigste måde er at bruge en tastaturgenvej:
shift + command + E (⇧+⌘+E)
Det er ikke ligegyldigt, hvordan du får der. Enhver af disse vil arbejde, så vælg den nemmeste for dig at huske.,
Lightroom eksport Dialog
nu hvor du ved, hvordan du eksporterer billederne til webeb, dækker vi de 4 sektioner og de forskellige muligheder, du skal vælge i Lightroom eksportdialog for at give dig mulighed for at eksportere optimerede billeder til internettet.
1. Filnavn
hver eksport kan have sine egne omdøbeindstillinger. Hvis du holder dig til standardindstillingen, vil dine billeder have samme navn som de originale filer og gemmes som et JPEG-billede., Vi anbefaler dog stærkt, at du markerer afkrydsningsfeltet “Omdøb til” og vælger en af de mange omdøbningsskabeloner, som Lightroom tilbyder for at tilpasse de eksporterede billeder. I filnavnet, vi omdøbt billedet filnavne til “brugerdefineret navn-sekvens”, hvor den brugerdefinerede tekst er tæt forbundet til vores blogindlæg titel eller blogindlæg søgeord.
2. Sørg for, at dit billedformat er indstillet til JPEG i Filindstillinger
. Dette er den mest friendlyebvenlige mulighed. Din kvalitet bør ikke være mindre end 65., Normalt sætter vi det til 75. Dit farverum skal være sRGB. Dette er det farverum, der bruges af internettet, så det vil gøre det bedste. Marker ikke afkrydsningsfeltet “Begræns Filstørrelse til:”. Hvis du markerer det felt, reduceres filkvaliteten markant.
for at opsummere, skal du bruge disse indstillinger, når du gemmer billeder:
- 75% kvalitet
- .JPEG-format (.png for logoer og ikoner)
- sRGB-farver
3. Billedstørrelse
Marker afkrydsningsfeltet Ændr størrelse for at passe, og vælg bredde & højde., I boksen W: H: Angiv W (bredde i Pi .els) til den nødvendige værdi (1500p.til blogindlæg og 2880 til diassho .s). Ved at lade værdien i h (højde) være tom, indstilles den til automatisk dimensionering.
for gallerier kan du lade Gall være tom og indstille H (højde) til 1500p., dette skal være optimalt for de fleste temaer.
størrelserne ovenfor er allerede optimeret til retina-enheder.
4. Output skarphed
Marker afkrydsningsfeltet ud for “Skærp for”, og vælg mængden til “høj”.
Du kan nu eksportere billederne og følge denne proces, når som helst du eksporterer billeder.,
Billedkvalitetsindstillinger
i en fotografs drømmeverden eksporterer vi altid billeder med maksimal kvalitet. I virkeligheden finder vi ud af, at eksport af maksimal kvalitet ikke er påkrævet. På webebstørrelser er forskellene i kvalitet ofte svære at opfatte, og det betyder, at vi kan reducere kvaliteten lidt, hvilket reducerer filstørrelsen markant.
så længe billederne ikke er bløde, kender dine kunder ikke forskellen mellem det billede, du tog, og det billede, der vises på dit .ebsted.
dette gælder også for farver på billeder., Alles skærm er kalibreret forskelligt, så det er spild af tid at bekymre sig om små farvevariationer mellem et billede i en bro .ser og i dit valg af redigeringsværktøj, medmindre det ødelægger billedkvaliteten.
på den øverste ende af kvalitetsskalaen er der faldende afkast. Forskellen i opfattet kvalitet mellem en 75% og 100% kvalitet indstilling er svært at se, men det øger filstørrelsen betydeligt.
i betragtning af ovenstående resultater vælges eksporten af 65-75 kvalitet., Det rammer den korrekte balance mellem kvalitet og optimal billedfilstørrelse.nu er det din tur til at omdøbe dine filer, eksportere dem til internettet, gemme dem til webeb, og du får nogle rigtig godt optimerede billeder til internettet.
Bonus trin: optimer billeder, inden du uploader dem til din hjemmeside
Der er et sidste skridt, der kan hjælpe dig til drastisk at fjerne overskydende data fra dine billeder, og reducere filstørrelsen – vi taler om værktøjer som JPEGmini eller TinyJPG.
disse værktøjer kan hjælpe dig med at optimere dine billeder yderligere., Vælge en, og kør dine billeder igennem:
- JPEGmini – denne app giver dig mulighed for at komprimere dine billeder og reducere deres filstørrelse uden nogen synlig effekt på kvaliteten af billedet. Hvis du har Pro-versionen, er der en udvidelse til Lightroom, der gør dette automatisk ved eksport – et stærkt anbefalet værktøj til enhver fotograf.
- TinyJPG eller TinyPNG – du kan køre dine billeder gennem tinyJPG eller tinyPNG til at komprimere dine billeder videre. Der er dog 2 begrænsninger., Med den gratis version af dette værktøj kan du kun komprimere 20 billeder ad gangen, og filstørrelsen pr.
Dette vil være det sidste trin i at skabe hurtige optimeb optimerede billeder til at holde dit siteebsted hastighed hurtigt, og billeder ser godt ud!
Lær mere ved at læse denne omfattende guide til, hvordan du optimerer billeder til dit .ordpress-.ebsted.
billede SEO
nu hvor du har fået dine billeder størrelse, optimeret og uploadet til dit siteebsted – nu vil du ønsker at tilføje ALT tags! Dette er det sidste trin i at skabe optimerede billeder til SEO formål., ALT-mærket er, hvad søgemaskiner bruger til at læse billeder. Uden dem, dine billeder er stort set ikke-eksisterende på nettet.heldigvis med Worordpress kan du gå ind i dit mediebibliotek efter upload og mærke hvert billede., En fantastisk plugin, der vil lade dig gøre dette hurtigt, er WP Meta SEO, når den er tilføjet kan du gå til WP Meta SEO > Billede, Oplysninger og tilføj ALT-Tags til billeder, hvor det ikke er til stede, når den er færdig plugin kan de-aktiveres:
Der er også flere plugins, der vil tilføje alt tags automatisk. Rank Math er en god plugin løsning til dette, skal du blot installere det, og det vil automatisk tilføje ALT tags ved upload fra billedet beskrivelse, eller titel.,læs denne SEO-guide til billede for at finde flere tip og tricks, og sørg for, at du får mest muligt ud af dine billeder i søgeresultater.
så det er det folk. De 3 trin til at have optimeret billeder til din hjemmeside.
Start med at finde ud af dine billeddimensioner, gem dem derefter korrekt til internettet, Tilføj rigtige titler og optimer deres størrelse. Til sidst skal du tilføje alt-tags for at forbedre SEO via .ordpress (det skal være muligt at tilføje ALT-tags i alle indholdsstyringssystemer, se dokumentationen for at finde ud af, hvordan eller nå ud til support).,
Find ikke-optimerede billeder
Hvis du allerede har uploadet billeder til dit siteebsted og vil vide, hvordan du finder dem, der bremser din side, skal du tjekke følgende video. Værktøjer som Gtmetri.eller Pingdom eller brug af bro .serkonsollen giver dig let mulighed for at finde billeder, der er for store til internettet.
Hvis du gerne vil lære mere om at optimere dit websted til hastighed, så tjek denne nyttige vejledning.
Flothemes
bemyndigelse dig
Leave a Reply