Människor på webben har inte mycket tid att konsumera data, eftersom det finns mycket data. Det finns så mycket data att vi helt enkelt inte hinner läsa allt! Som innehållskurator för den moderna webben är din uppgift att maximera prestanda. Ju mer du uttrycker dig med färre ord, desto bättre blir du på ditt jobb.
Varför är bilder (så) viktiga?
Det finns många, många anledningar till varför du skulle (och borde) använda bilder i dina inlägg och artiklar:
- Bilder fungerar som visuella stimuli för en uppmaning till handling (CTA). En uppmaning kan vara vilken uppgift du vill att din besökare ska utföra. Vanliga uppmaningar inkluderar att prenumerera på ditt nyhetsbrev, dela din artikel på sociala medier eller köpa din produkt.
- Bilder förstärker den koppling som författaren försöker skapa med läsaren.
- Bilder förmedlar mer genom mindre.
Därför är det fundamentalt 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 avtryck i läsarens sinne.
Men vänta! Det finns ett problem!
Bilder tar upp cirka 63 % av den bandbredd som används av moderna webbplatser, så det blir allt viktigare att de är korrekt optimerade för hastighet.
En fördröjning på en sekund i sidladdningstider kan minska konverteringsfrekvensen med 7 %.
Vi har konstaterat att människor har kort uppmärksamhet (en av nackdelarna med den moderna innehållsproduktionstakten). Även om du använder rätt bilder, om de inte laddas upp inom den acceptabla tidsperioden, tappas intresset.
De flesta webbplatser har samma problem: de använder bra bilder, men sättet som bilden visas för besökaren på är dåligt. Stor storlek, dålig optimering, felaktig formatering, onödigt stora dimensioner (storlekar), bilder som inte svarar och slarviga SEO-misstag är några av de vanligaste problemen som den moderna webben står inför. I dagens artikel kommer vi att ge dig 10 enkla bildoptimeringstips som du kan använda för att undvika dessa problem.
1. Ändra storlek på bilder med stora dimensioner
“Extra pommes frites” är inte alltid bra
Det här är en klassiker. Anta att du behöver ett foto på 150 × 150 pixlar på sidan “Team” på din webbplats. Vanligtvis använder du en 5MP headshot, redigerar den lite och till sist laddar du upp den.
Såg du problemet? Vissa människor laddar upp den riktiga 5MP-bilden direkt! WordPress-temat laddar hela 5MP-bilden (det är 5 x 10^6 pixlar) och ber webbläsaren att skala ner den till den nödvändiga dimensionen 150x150px. I huvudsak visar webbläsaren endast 0,0045 % av originalbilden.
Det slutar med att du slösar bort din och dina besökares bandbredd (även om du visar bilden via ett innehållsleveransnätverk som Stackpath CDN), förbrukar mer hårddiskutrymme och ökar laddningstiden. Ingen av funktionerna är något du skulle vilja ha på din webbplats.
Ändra alltid storlek (och med ändra storlek menar jag minska) bilden till de mått som krävs och ladda sedan upp den!
Du behöver ingen snygg programvara för att göra detta; Det finns gratis onlineverktyg som ImageResize.org som du kan använda för att snabbt ändra storlek och optimera dina bilder. Ladda bara upp och ändra dina fotoinställningar. När du är klar laddar du ner din optimerade bild för att använda på din webbplats. De erbjuder också en snabb bildkompressor om du bara vill minska filstorleken.
Användbara verktyg:
- IrfanView är en fantastisk gratis programvara för att gruppändra storlek på dina bilder med avancerade alternativ som optimering, vattenstämpel och kanter.
- ImageMagick är ett avancerat verktyg med öppen källkod som kan användas på en mängd olika programmeringsspråk och operativsystem. Du kan skriva din egen applikation eller helt enkelt använda den via kommandoraden.
- ImageOptim (Mac) låter dig dra hela mappar och snabbt optimera flera bilder.
- TinyPNG är ett onlineverktyg för bildkomprimering med ett API.
2. Använd rätt bildformat
Formatet som används för bilden spelar en grundläggande roll. Som en allmän regel, använd PNG för vektorgrafik och datorgenererade bilder som clipart etc. JPEG för fotografier eller bilder med en mängd olika färger. För en detaljerad förklaring, kolla in detta fantastiska StackOverflow-svar.
3. Använd progressiva JPEG-filer
Baslinje JPG (normal) vs progressiv JPG
För den vanliga mannen är JPEG-filer av två typer: baslinje och progressiv. Visuellt är båda desamma. Skillnaden ligger i hur de laddas:
- Baslinje JPEG har bara ett lager, som innehåller hela bilden. På begäran laddas hela bilden upp på en gång.
- Progressiva JPEG-bilder komponerar bilden med flera lager. En progressiv JPEG-bild laddas lager för lager och ökar gradvis i kvalitet och ger dig i slutändan en förlustfri vy.
IrfanView stöder batchkonvertering med progressiv JPEG
Alla större bildförändringar låter dig spara bilder som progressiv JPEG.
4. Aktivera lat laddning
Lazy-Loading är en utmärkt resursbesparing teknik där en bild bara laddas när besökaren scrollar ner till bildvisningsramen. Tänk på en artikel: “15 av de mest bränslesnåla bilarna 2014.” Naturligtvis kommer denna artikel att innehålla minst 15 bilder. Och oavsett höjden på visningsenheten (skärm, surfplatta eller smartphone) får du inte plats med alla 15 bilderna i skärmramen. Du måste scrolla ner för att se alla bilder.
Med lazy loading aktiverat laddas bilder endast när en besökare är nära bilden. Med andra ord börjar bilderna laddas direkt när du scrollar ner för att se dem. De första bilderna laddas dock omedelbart, eftersom du redan är i visningsramen. Lazy Loading sparar bandbredd i båda ändar och förbättrar laddningstiden. Du kan använda lazy loading i WordPress med BJ:s lazy loading plugin.
5. Lägg till ett CDN
Genom att använda ett innehållsleveransnätverk (CDN) kommer bilden att visas från en server som är fysiskt närmare besökarens plats. Om en besökare från Indien begär en bild och CDN har en POP (punkt av närvaro, eller helt enkelt en server) i Tokyo och New York, kommer bilden att levereras från servern i Tokyo.
När du har mycket trafik bör du skapa ett CDN med WordPress för att minska laddningstiden och få övergripande prestanda.
Här på WPExplorer använder vi Cloudflare och har en extra lista över rekommenderade gratis CDN-tjänster som du kanske vill kolla in. Men att sätta upp ett CDN själv kan vara komplicerat, vilket är där ett plugin kan komma till användning.
Publikation Ladda ner media
Ett bra alternativ är Publitio Offload Media-plugin, som låter dig lagra dina mediefiler i Publitios molnbaserade mediahanterare. Med plugin installerat kan du enkelt flytta bort hela ditt mediebibliotek från dina servrar och till och med optimera bild- och videokvalitet när du gör det. När de har flyttats serveras bilderna snabbt från Publitio CDN. Detta frigör massor av serverutrymme och kan verkligen snabba upp din webbplats (särskilt om du har en billig värdplan med begränsat utrymme). Det finns till och med en enkel Sync Now-knapp för att automatiskt lägga till nya media till molnet när du redigerar nya inlägg. Och Publitios premiumplaner inkluderar ytterligare funktioner för anpassade CNAME, flera vattenstämplar och till och med videokryptering.
6. Ange ‘alt’-attributet
Attributet ‘alt’ beskriver bilden för sökmotorn. Texten du anger i det här fältet kommer att 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 trafik. Du bör alltid försöka inkludera din webbplats sökord i alt-taggen på dina bilder.
7. Optimera en komprimerad bild
Optimerade bilder är 40 % tydligare än vanliga bilder. Detta förbättrar laddningstiden och sparar bandbredd. Från Freddys lista över de bästa WordPress bildoptimeringsplugins rekommenderar vi WPSmush.it för att optimera dina bilder. Kraken.io är också ett utmärkt onlinealternativ för att komprimera bilder i en handvändning. Vi använder det hela tiden här på WPExplorer för att optimera utvalda bilder innan vi laddar upp dem till inlägg och temademos.
8. Responsiva bilder
Responsiv webbdesign finns här
Även om din webbplats är responsiv betyder det inte att dina bilder är det. Det betyder att huvudbilden du använder för en 22-tums skrivbordsskärm också visas på en 5-tums iPhone. När du laddar upp en bild ändrar WordPress storleken på den till flera versioner: thumbnail, medium, full size, etc. Utvecklaren kan ändra det. Ett välkodat tema kommer att tjäna den “medelstora” versionen av bilden, vilket sparar bandbredd.
Picturefill.WP-plugin kommer att ersätta bildtaggarna med en ny
9. Bildtexter
Undertexter är inte alltid nödvändiga, även om de i vissa fall krävs, till exempel skärmdumpar i en handledning. Bildtexter hjälper läsarna att bättre förstå ämnet, samtidigt som de ökar din SEO.
10. Bildfilens namn
Tänk på filnamnet från en sökmotors synvinkel. Använd samma text som i bildens “title”-tagg. Försök också att inkludera sökord som är mest relevanta för din webbplats.
Slutsats
Bild SEO är oerhört viktigt för alla webbplatser, oavsett om de är gamla eller nya. Människor som implementerar bild-SEO korrekt (ibland kan det vara ganska vardagligt), kan få en betydande mängd organisk trafik (den bästa typen av trafik) på lång sikt.
Har du en imponerande optimeringsteknik? Skjuta!
