spara bilder för webben har alltid varit lite av ett mysterium för många. Ladda upp bilder som är tunga (originalbild dimensionering vid 5000px bredd, ooptimiserade bilder) kommer inte bara att skapa problem med användarupplevelsen på din webbplats, men kommer också att påverka din SEO strategi (lastning hastighet, avvisningsfrekvens, ranking, etc).,
den här artikeln är uppdelad i flera delar som täcker allt du behöver veta om hur du förbereder dina bilder för webben. I den första delen av inlägget kommer vi att lista de rekommenderade bildstorlekarna för din Flothemes webbplats. Därefter kommer artikeln att omfatta hur du inspekterar de olika avsnitten på din webbplats för att identifiera rätt storlekar för dina bilder innan du laddar upp dem till webben. Vi kommer också att förklara hur man exporterar / sparar bilder korrekt, så de är optimerade för hastighet.,
slutligen kommer vi att ge några bild SEO tips om hur du Titel dina bilder korrekt när du sparar dem och varför använda ALT taggar kommer att förbättra din SEO. För de redan uppladdade bilderna till din webbplats visar vi dig hur du identifierar de bilder som är för stora och saktar ner din webbplats. Låt oss börja!
Varför är bildstorlekar och webbplatsens prestanda viktiga?
Optimiserade bilder saktar ner webbplatser. Långsamma webbplatser = dålig användarupplevelse, lägre chanser att rangordna i Google-sökningar och i slutändan mindre förfrågningar och kunder.,
Spara dina bilder med lämpliga dimensioner och optimera bilder för webben kan hjälpa till med några saker:
- hastighet-enligt EN forskning som gjorts av Google, om en webbsida laddas i mer än 5 sekunder, sannolikheten att en mobil användare kommer att lämna den sidan ökar med 90%. Genom att ändra storlek och minska bildstorlekar, du gör din webbplats sidor snabbare.
- användarupplevelse – bra kvalitet, effektiva bilder hjälper besökarna att få en mer engagerande upplevelse medan de surfar på din webbplats., Genom att hålla dessa bilder optimerade och laddar snabbt-du garanterar en smidig och smidig upplevelse för dina besökare, som motiverar dem att spendera mer tid på din webbplats och utforska ditt innehåll.
- SEO ranking – site speed är en rankningsfaktor. Ju snabbare är din webbplats, desto bättre kan du potentiellt ranka. Webbsidor med optimerade bilder laddas mycket snabbare på både stationära och mobila enheter.
- försäljning – snabbare laddningstider och bättre SEO kan hjälpa till att få fler användare till din webbplats, vilket ökar dina chanser att bli frågad och bokad.,
Obs: När vi talar om bildstorlek menar vi bilddimensionen i pixlar.
vilka är de bästa bilderna för webben och Flothemes?
När du laddar upp bilder till webben finns det ett antal saker att ta hänsyn till, till exempel vad bilden används för, hur stor ska filen vara och vilken typ av bild ska användas för olika områden på din webbplats.,
bildanvändning och typ
det finns olika fall där du vill använda olika bildstorlekar för olika delar av din webbplats, nedan kommer jag att täcka de vanligaste områdena och dimensioneringsalternativ du kan använda för varje. Observera att dessa rekommenderas, retina vänliga, dimensionering alternativ med tanke på att majoriteten av användarna visa webbplatsen på en enhet som är antingen mobil eller 13-15 inches genomsnittlig storlek. Men om du syftar till att göra webbplatsen ser bra ut för din 27 tums bildskärm (som har en riktigt hög upplösning), notera att det kanske inte är vad dina potentiella kunder använder.,
om du vill vara mer exakt hur dina användare ser din webbplats och din portfölj kan du kontrollera de enheter som används för att komma åt din webbplats via Google Analytics (gå till Målgruppsteknik – webbläsare & OS – skärmupplösning) och justera den rekommenderade storleken så att den motsvarar den önskade andelen av din genomsnittliga användare.
Full bredd bilder
2400x1600px, jpeg, sparas för webben, och optimerad
över webbplatsen kan du ha sektioner där du behöver använda full bredd bilder som täcker hela skärmen från vänster till höger., Dessa områden kan vara hjälte bilder, helskärm bildspel, banner bilder. För att säkerställa att dina fullbreddsbilder ser bra ut över alla enheter stora eller små är den rekommenderade storleken 2400x1600px. Observera att enheter har olika förhållande än den du skjuter och det är möjligt att dina bilder kommer att beskäras när de visas på webben. Som en rekommendation försök att skjuta bredare skott än vanligt för ditt webbinnehåll, för att undvika beskärning av viktiga bildinnehåll.,
inne innehåll bilder
horisontell – max bredd 1500px, jpeg, sparas för webben, och optimerad
Vertikal – max bredd 1000px, jpeg, sparas för webben, och optimerad
på dina webbplatssidor kommer det att finnas avsnitt som består av bilder, textområden, samtal till åtgärdsknappar etc. I grund och botten är det de sektioner där bilderna är en del av innehållet inuti (läs som ”inte full bredd”)., I dessa fall, om inte den rekommenderade dimensionen anges som några av våra Flothemes block gör, kan du följa ovanstående rekommendationer för horisontella och vertikala bilder. Baserat på ditt förhållande kommer höjden att justera därefter när du sparar dina bilder.,visa gallerier: se till att de är alla samma höjd rekommenderas 1500px, oavsett om de är horisontella eller vertikala
blogginlägg bilder
- Om du förbereder bilder för att ladda upp i en blogpost, se till att de är alla samma bredd, rekommenderas 1500px, oavsett om de är horisontella eller vertikala
utvalda bilder
det finns 3 typer av utvalda bilder: porträtt, landskap och hjälte bilder., Stående och liggande bildstorlek följer samma rekommendation som inne innehålls bilder, medan den rekommenderade storleken för hjälte bilder är täckt under full bredd bilder. Nyckeln till att ha bra presenterade bilder är konsistens. Om du vill använda alla porträtt se till att de är av samma storlek, detsamma gäller för landskap och hjälte bilder. Om du använder ett murverk är dimensionen ovan inte så relevant, se bara till att bilderna är minst 1000px i bredd.,
om du har några problem med bildstorlek se till att ta en titt på bildstorlek alternativ i dina Flothemes inställningar för att se till att de är rätt inställda.
sätt att ta reda på rätt bildstorlekar för din webb
det kan vara möjligt att de rekommenderade storlekarna ovan inte matchar dina behov på grund av en viss layout. Om du är osäker på rätt bilddimension, tack och lov, Det finns några sätt som kan hjälpa dig att enkelt inspektera din webbplats bilder, och identifiera rätt dimensionering som behövs för varje element på din webbplats.,
en viktig sak att komma ihåg är att för retina-enheter måste du dubbla bildpixeldensiteten. Vad det betyder är, du behöver bilder dubbelt så stor som för retina-enheter så att de ser snygga och skarpa ut. Så när du har hittat rätt bildstorlekar för varje avsnitt på din webbplats, du vill dubbla dessa storlekar, och först därefter exportera och ladda upp dem till din webbplats.
en., Använda info-tillägget för bildstorlek
den första metoden för att hitta bildstorlekar för din webbplats är att använda info-tillägget för bildstorlek för Chrome (om du inte använder Chrome på din dator rekommenderar vi att du använder det när du skapar din webbplats). När du har installerat förlängningen, detta verktyg kommer då att du kan ta reda på bildstorlekar för varje bildelement på din webbplats.
kolla in bilderna på din webbplats, göra anteckningar, och sedan med denna kunskap kommer du att kunna skräddarsy dina fotografier exakt för att passa utrymmena som de är avsedda i temat design., Kom bara ihåg, med retina-skärmar behöver du dina bilder vara dubbelt så stora som det avsedda utrymmet. Så om du har ett bildutrymme på 750x500px, för retina borde det vara 1500x1000px när du laddar upp till WordPress (eller någon annan plattform).
till exempel: när vi inspekterar en bild med denna förlängning visas den på 780x520px, men den faktiska storleken är 1560x1040px. Detta beror på att vi använder en retina-skärm när du inspekterar bilden. I det här fallet kan du använda dimensionsstorlekarna för att välja din bildstorlek.,
på en icke-retina-enhet kommer de visade och dimensionsstorlekarna att förbli desamma. I det här fallet, dubbla upp siffrorna och ladda upp bilder i den storleken.
den huvudsakliga begränsningen för det här verktyget är att det inte kan inspektera bakgrundsbilder för dimensionering. På många teman används bakgrundsbilder istället för bild HTML-element, eftersom de är mer flexibla när du visar bilder. Om du inte kan inspektera bilderna eftersom de är bakgrundsbilder kan du använda nästa metod för att granska bildstorlekar på din webbplats.
b., Med verktyget Inspector
med Chrome och Safari kan du också använda verktyget developers inspector för att hitta bildstorlekar på webbplatsen. Principen kommer att vara densamma som tidigare, inspektera de olika elementen på platsen och notera storlekarna. Dubbla bildstorlekar för retina-enheter och sedan ladda upp dem till WordPress, när de har optimerats för webben och titeln korrekt för SEO.
begränsningarna för denna metod kommer att vara att om webbplatsen använder vissa responsiva element som anges i REM-värden kan bilder krympas när inspektören används i samma fönster., Om webbplatsen också använder responsiva element kommer de att vara större på större skärmar och mindre på andra. Det är bäst att använda en större skärm där det är möjligt när du kontrollerar webbplatsen, så du kan få den mest exakta bildstorleken. I vilket fall som helst, med hjälp av denna metod ger dig en bra indikation på storlekar för din webbplats och gör att du kan närma dig att lägga till bilder till din webbplats med mer omsorg.
Chrome
Chrome har byggt in utvecklarverktyg, varför det är den mest populära webbläsaren på webben för utvecklare och designers., Följande video förklarar hur du kan inspektera bilderna på din webbplats för att ta reda på deras storlekar:
Firefox
med Firefox, ungefär som chrome, har de ett inbyggt inspektörverktyg som låter dig kontrollera bilder för din webbplats.
Safari
Om du använder Safari kan du använda inspektörsverktyget för att se storleken på bilderna. Kontrollera följande guide om hur du aktiverar utvecklarverktygen.,
Nu kan du gå till olika sektioner på din webbplats och förbereda bildmått.
för gallerier vill du titta på höjden på bilderna, eftersom de i allmänhet begränsas av höjd (så bredd kan ställas in på auto).
för blogginlägg vill du notera bredden för dina bilder, eftersom de begränsas av bredd (höjden kan vara automatisk).,
för resten av elementen på din webbplats bör du använda metoden som beskrivs ovan för att få rätt dimensioner och ladda upp dem med optimala dimensioner för din webbplats.
nu när du vet vilka dimensioner du behöver för alla element på din webbplats, förklarar vi hur du optimerar alla dina bilder för storlek, det vill säga när det gäller datastorlek. Filstorleken på dina bilder är också mycket viktigt för webben. Uppladdning uppblåsta och tunga bilder på din webbplats kommer att anstränga dina serverresurser, bromsa din webbplats, och i själva verket skapa en negativ användarupplevelse.,
optimera och spara bilder för webben
det finns ett antal saker att tänka på när du optimerar och sparar bilder för webben. Du bör överväga vilken filtyp du ska använda, JPG, PNG eller GIF beroende på syftet. Du vill märka dina bilder korrekt för SEO-ändamål och du vill spara dem i rätt färgformat (sRGB för webben).
beroende på syftet måste du spara bilder i något av följande format .jpg, .gif, eller .png. JPG kommer att vara det vanligaste formatet när du sparar bilder för din portfölj webbplats, de kommer också att vara den lättaste i storlek.,
för filnamn, se till att de är lämpliga för varje enskild bild eller blogginlägg. Använd endast bokstäver, siffror, understreck och bindestreck. Försök att använda endast engelska bokstäver. Tecken från andra språk, frågetecken, mellanslag, procenttecken kan laddas upp felaktigt eller orsaka oväntat beteende i dina gallerier eller blogginlägg.
till exempel, om du just har gjort ett boho bröllop i Biltmore Santa Barbara, märka bilderna, boho-wedding-biltmore-santa-barbara_0001.jpg detta kommer att bli mycket mer SEO vänlig, och kan ge bättre ranking för din webbplats.,
optimera bilder i Lightroom
låt oss inse det, det finns massor av olika inställningar att välja och oändliga kombinationer av siffror att mata in. Men om du redan känner till bildformatet och nödvändiga filbilddimensioner är det mycket lättare.
i Lightroom kan du komma till exportdialogrutan på 3 sätt:
markera och exportera
Du kan helt enkelt markera / välja ett foto från ditt Lightroom-bibliotek och högerklicka på fotot. Från popup-menyn väljer du alternativet Exportera.,
fil och Export
det andra sättet är att gå till fil- > Export
med tangentbordsgenvägen
det tredje och snabbaste sättet är att använda en tangentbordsgenväg:
shift + command + e (trip +e)
det spelar ingen roll hur du kommer dit. Någon av dessa kommer att fungera, så välj det enklaste för dig att komma ihåg.,
Dialog Lightroom Export
nu när du vet hur du exporterar bilderna för webben täcker vi de 4 avsnitten och de olika alternativen att välja i dialogrutan Lightroom export så att du kan exportera optimerade bilder för webben.
1. Filnamn
varje export kan innehålla sina egna byta namn inställningar. Om du håller dig till standardalternativet kommer dina bilder att ha samma namn som de ursprungliga filerna och sparas som en JPEG-bild., Vi rekommenderar dock starkt att du markerar rutan” Byt namn på ” och väljer en av de många döpa mallar som Lightroom erbjuder för att anpassa de exporterade bilderna. I filnamnet döpte vi om bildfilnamnen till” anpassad Namnsekvens ” där den anpassade texten är nära kopplad till vår blogginläggstitel eller blogginläggssökord.
2. I Filinställningar
kontrollera att bildformatet är inställt på JPEG. Detta är det mest webbvänliga alternativet. Din kvalitet ska inte vara mindre än 65., Normalt ställer vi den till 75. Ditt färgutrymme måste vara sRGB. Detta är den färgrymd som används av webben så det kommer att göra det bästa. Markera inte rutan ” begränsa Filstorlek till:”. Att markera den rutan skulle minska filkvaliteten avsevärt.
för att sammanfatta, när du sparar bilder använder du dessa inställningar:
- 75% kvalitet
- .JPEG-format (.PNG för logotyper och ikoner)
- sRGB färger
3. Bildstorlek
markera rutan Ändra storlek för att passa och välj bredd & höjd., I rutan W: H: ange W (bredd i pixlar) till det värde som behövs (1500px för blogginlägg och 2880 för bildspel). Genom att lämna värdet i h (höjd) tomt kommer det att ställas in på automatisk dimensionering.
för gallerier kan du lämna W som tomt och ställa in h (höjd) till 1500px, detta bör vara optimalt för de flesta teman.
storlekarna ovan är redan optimerade för retina-enheter.
4. Output Sharpening
markera rutan bredvid ”Sharpen For”och välj beloppet till ”High”.
Du kan nu exportera bilderna och följa den här processen när du exporterar bilder.,
Bildkvalitetsinställningar
i en fotografs drömvärld skulle vi alltid exportera bilder med maximal kvalitet. I verkligheten upptäcker vi att maximal kvalitetsexport inte krävs. Vid webbstorlekar är skillnaderna i kvalitet ofta svåra att uppfatta, och det betyder att vi kan minska kvaliteten något, vilket minskar filstorleken avsevärt.
så länge bilderna inte är mjuka kommer dina kunder inte att veta skillnaden mellan vilken bild du tog och bilden som visas på din webbplats.
detta gäller även färger på bilder., Allas skärm är kalibrerad annorlunda, så oroa små färgvariationer mellan en bild i en webbläsare och i ditt redigeringsverktyg val är ett slöseri med tid, om det inte förstör bildkvaliteten.
i den övre änden av kvalitetsskalan minskar avkastningen. Skillnaden i uppfattad kvalitet mellan en 75% och 100% kvalitetsinställning är svår att se, men det ökar filstorleken avsevärt.
Med tanke på ovanstående resultat väljer du export av 65-75-kvalitet., Det slår rätt balans av kvalitet och optimal bildfilstorlek.
nu är det din tur att byta namn på dina filer, exportera dem till webben, spara dem för webben och du har några riktigt bra optimerade bilder för webben.
bonussteg: optimera bilder innan du laddar upp dem till din webbplats
det finns ett sista steg som kan hjälpa dig att drastiskt ta bort överflödiga data från dina bilder och minska filstorleken – vi pratar om verktyg som JPEGmini eller TinyJPG.
dessa verktyg kan hjälpa dig att optimera dina bilder ytterligare., Välj en och kör dina bilder genom det:
- JPEGmini – den här appen låter dig komprimera dina bilder och minska filstorleken utan någon synlig effekt på bildens kvalitet. Om du har Pro-versionen, det finns en förlängning för Lightroom som kommer att göra detta automatiskt vid export – ett starkt rekommenderat verktyg för alla fotografer.
- TinyJPG eller TinyPNG – du kan köra dina bilder genom tinyJPG eller tinyPNG att komprimera bilder ytterligare. Det finns dock 2 begränsningar., Med den fria versionen av det här verktyget kan du bara komprimera 20 bilder åt gången, och filstorleken per bilder ska vara under 5 MB.
detta kommer att vara det sista steget i att skapa snabba webboptimerade bilder för att hålla din webbplats hastighet snabbt och bilder ser bra ut!
Läs mer genom att läsa den här omfattande guiden om hur du optimerar bilder för din WordPress-webbplats.
bild SEO
Nu när du har dina bilder storlek, optimerad och uppladdad till din webbplats – nu vill du lägga till ALT-taggar! Detta är det sista steget i att skapa optimerade bilder för SEO-ändamål., ALT-taggen är vad sökmotorer använder för att läsa bilder. Utan dem är dina bilder ganska mycket obefintliga på webben.
Tack och lov med WordPress kan du gå in i ditt mediebibliotek efter uppladdning och märka varje bild., En stor plugin som låter dig göra detta snabbt är WP Meta SEO, när den läggs till kan du gå till wp Meta SEO > bildinformation och lägga till ALT-taggar till alla bilder där det inte är närvarande, när du är klar plugin kan deaktiveras:
det finns också flera plugins som lägger till alt-taggarna automatiskt. Rank Math är en bra plugin lösning för detta, helt enkelt installera det och det kommer automatiskt att lägga ALT taggar vid uppladdning från bildbeskrivningen, eller titel.,
Läs denna bild SEO guide för att upptäcka fler tips och tricks och se till att du får ut det mesta av dina bilder i sökresultat.
så det är det folk. De 3 stegen för att ha optimerade bilder för din webbplats.
börja med att räkna ut dina bilddimensioner, spara dem korrekt för webben, Lägg till rätt titlar och optimera deras storlek. Slutligen lägger du till alt-taggar för att förbättra SEO via WordPress (det ska vara möjligt att lägga till ALT-taggar i alla innehållshanteringssystem, se dokumentationen för att ta reda på hur eller nå ut till support).,
hitta Ooptimiserade bilder
om du redan har laddat upp bilder till din webbplats och vill veta hur du hittar de som saktar ner din sida, kolla in följande video. Verktyg som GTMetrix eller Pingdom, eller med hjälp av webbläsarkonsolen kan du enkelt hitta bilder som är för stora för webben.
om du vill veta mer om att optimera din webbplats för hastighet, kolla in den här användbara guiden.
Flothemes
ge dig
Leave a Reply