Hur man optimerar bilder för WordPress, en komplett guide

Hur man optimerar bilder för WordPress, en komplett guide

Människor på webben har inte mycket tid att konsumera data – eftersom det finns så mycket av det senare. Det finns så mycket data att vi helt enkelt inte har tid att läsa allt! Som en innehållskurator för den moderna webben är din uppgift att maximera genomströmningen. Ju mer du uttrycker med mindre ord, desto bättre är du på ditt jobb.


Varför är bilder (så mycket) viktiga?

Det finns många, många skäl till att dina (och borde) använda bilder i dina inlägg och artiklar:

  • Bilder fungerar som visuella stimulanser för en uppmaning (CTA). En CTA kan vara vilken uppgift du vill att din besökare ska utföra. Vanliga CTA inkluderar prenumeration på ditt nyhetsbrev, dela din artikel över sociala medier eller köpa din produkt.
  • Bilder förbättrar den koppling som författaren försöker skapa med läsaren.
  • Bilder förmedlar mer genom mindre.

Det är därför mycket viktigt att vi använder rätt bilder i våra presentationer (blogginlägg, informell rapport, faktisk PowerPoint-presentation etc.) för att lämna ett märke i läsarnas sinne!

Men vänta! Det finns ett problem!

Bilder tar upp cirka 63% av bandbredden som används av moderna webbplatser, så det blir allt viktigare att de är korrekt optimerade för hastighet.

En sekunders fördröjning av sidbelastningstiderna kan minska konverteringsgraden med 7%

Vi har fastställt att människor har ett kort uppmärksamhetsområde (en av nackdelarna med den moderna innehållsproduktionshastigheten). Även om du använder rätt bilder, om de inte laddas inom den acceptabla tidsramen, försvinner intresset.

10 vanligaste fel i bildoptimering

De flesta webbplatser har ett problem – de använder utmärkta bilder, men hur bilden serveras till besökaren är dålig. Stor storlek, dålig optimering, felaktigt format, onödigt stora dimensioner (storlekar), svarsfria bilder och slarviga SEO-fel är några av de vanligaste problemen som den moderna webben står inför. I dagens artikel kommer vi att ta itu med dessa problem!

1. Stora dimensioner

“Extra frites” är inte alltid bra

Den här är en klassiker. Anta att du behöver ett foto på 150 × 150 pixlar på webbplatsens “Team” -sida. Vanligtvis kommer du att använda en 5MP-huvudbild, redigera den lite och slutligen ladda upp den.

Har du upptäckt problemet? Vissa människor laddar direkt upp den faktiska 5MP-bilden! WordPress-temat laddar hela 5MP-bilden (det är 5 x 10 ^ 6 pixlar) och ber webbläsaren att krympa den till den önskade dimensionen 150x150px. I huvudsak visar webbläsaren bara 0,0045% av originalbilden!

Du slösar bort både din och din besökares bandbredd (även om du serverar bilden via ett innehållsleveransnätverk som Stackpath CDN), förbrukar mer hårddiskutrymme och ökar laddningstiden. Ingen av funktionerna är något du vill ha på din webbplats.

Ändra alltid storleken (och genom att ändra storlek på bilden menar jag storleken) bilden till önskade dimensioner och ladda upp den!

ImageResize.org

Du behöver inte snygg programvara för att göra detta – det finns gratis verktyg online ImageResize.org Du kan använda för att snabbt ändra storlek och optimera dina bilder. Ladda bara upp och justera dina fotoinställningar. När du är klar ladda ner din optimerade bild som du kan använda på din webbplats. De erbjuder också en snabb Bildkompressor om du bara vill minska filstorleken.

Hjälpsamma verktyg:

  • Irfanview är ett utmärkt freeware för att ändra storlek på dina bilder med avancerade alternativ som optimering, vattenstämpel och gränser.
  • ImageMagick är ett avancerat öppen källkodsverktyg som kan användas på olika programmeringsspråk och operativsystem. Du kan skriva din egen app eller helt enkelt använda den via kommandoraden.
  • ImageOptim (Mac) låter dig dra hela mappar och snabbt optimera flera bilder.
  • TinyPNG är ett online-komprimeringsverktyg med ett API.

2. Felaktigt bildformat

shutterstock_108312266

Det format som används för bilden spelar en viktig roll. Använd som regel en tumregel PNG för vektorgrafik och datorgenererade bilder som clipart etc. Använd JPEG för fotografier eller bilder med olika färger. För en detaljerad förklaring, kolla in detta fantastiskt StackOverflow-svar.

3. Använder inte progressiva JPEG: er

Baslinje (Normal) JPG kontra Progressiv JPG

Baslinje (Normal) JPG kontra Progressiv JPG

För den vanliga mannen är JPEG av två typer – Baseline och Progressive. Visuellt är båda samma. Skillnaden ligger i hur de laddas:

  • Baslinjen JPEG har bara ett lager – som innehåller hela bilden. På begäran laddas hela bilden på en gång.
  • Progressiva JPEG: er komponerar bilden med flera lager. En progressiv JPEG-bild laddas lag för lager, som gradvis ökar i kvalitet, vilket i slutändan ger dig en förlustfri vy.
IrfanView stöder batchkonvertering med progressiv JPEG

IrfanView stöder batchkonvertering med progressiv JPEG

Med alla större bildresizers kan du spara bilder som progressiv JPEG.

4. Använder inte Lazy Load

Lazy-Loading är ett utmärkt resursbesparing teknik där en bild laddas endast när besökaren rullar ner till bildens vy. Överväg en artikel – “15 av de mest bränsleeffektiva bilarna 2014”. Naturligtvis kommer den här artikeln att innehålla minst 15 bilder. Oavsett skärmens enhets höjd – bildskärm, surfplatta eller smartphone kan du inte passa alla 15 bilderna i visningsramen. Du måste bläddra ner för att se alla bilder.

När Lazy Loading är aktiverat kommer bilder att laddas endast när en besökare är i närheten av bilden. Med andra ord börjar bilderna laddas precis när du bläddrar nedåt för att se dem. De första få bilderna laddas emellertid omedelbart eftersom du redan är i visningsramen. Lazy Loading sparar bandbredd i båda ändarna och förbättrar lasttiden! Du kan använda Lazy Loading i WordPress med BJ Lazy Load Plugin.

5. Använder inte ett CDN

cdn-nätverk

Användning av ett innehållsleveransnätverk (CDN) kommer att betjäna bilden från en server som är fysiskt närmast besökarens plats. Om en besökare från Indien begär en bild och CDN har en POP (punkt för närvaro, eller helt enkelt en server) i Tokyo och New York, kommer bilden att serveras från servern i Tokyo.

När du har betydande trafik bör du ställa in ett CDN med WordPress för att sänka din laddningstid och få total prestanda. Här på WPExplorer rekommenderar vi CloudFlare. För nyfödda webbplatser rekommenderar vi en lista med gratis CDN-tjänster du kan prova.

6. Att inte förklara attributet ‘alt’

Attributet ‘alt’ beskriver bilden för sökmotorn. Texten du anger i det här fältet visas för användaren om bilden inte kan laddas. Många människor tenderar att lämna dessa fält tomma. Detta är mycket skadligt för SEO och du tappar trafiken. Du bör alltid försöka inkludera webbplatsens sökord i bildernas alt-tagg.

7. Inte optimera bilder

penna-crayons-points

Optimerade bilder är 40% lättare än vanliga bilder. Detta förbättrar belastningstiden och sparar bandbredd. Från Freddys lista över de bästa WordPress Image Optimization Plugins rekommenderar vi WPSmush.it för att optimera dina bilder. Kraken.io är också ett utmärkt onlinealternativ för att komprimera bilder på en vits. Vi använder det hela tiden här på WPExplorer för att optimera presenterade bilder innan vi laddar upp dem till inlägg och temademonstrationer.

8. Responsiva bilder

Responsive Web Design är här

Responsive Web Design är här

Även om din webbplats är lyhörd betyder det inte att dina bilder är det. Det betyder att rubrikbilden du använder för en 22 ”skrivbordsskärm serveras också till en 5” iPhone. När du laddar upp en bild ändras storlek på WordPress i flera versioner – miniatyrbild, medium, full storlek osv. Detta kan ändras av utvecklaren. Ett välkodat tema kommer att tjäna bilden med ”medelstor” och sparar därmed bandbredd.

De Picturefill.WP plugin kommer att ersätta bildtaggar med en ny element som skulle tjäna olika bilder baserat på mediefrågor. Det är ganska experimentellt (det betyder att det finns buggar) och bör inte användas på en live-webbplats.

9. Bildtexter

Bildtexter är inte alltid nödvändiga, även om det i vissa fall krävs – till exempel skärmdumpar i en handledning. Bildtexter hjälper läsarna att förstå ämnet bättre och samtidigt öka din SEO.

10. Bildfilnamn

Tänk på filnamnet ur en sökmotors synvinkel. Använd samma text som du skulle göra i “titel” -taggen på bilden. Försök också att inkludera dina sökord som är mest relevanta för din webbplats.

Slutsats

hjälte-11

Image SEO är avgörande för alla webbplatser – gamla eller nya. Folk som implementerar image SEO ordentligt (det kan vara ganska vardagligt ibland), stå för att få en betydande mängd organisk trafik (den bästa typen av trafik) i långa loppet.

Har du en fantastisk optimeringsteknik? Avfyra!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map