Den ultimata guiden för WordPress Image Management

  1. 1. Läser för tillfället: Den ultimata guiden för WordPress Image Management
  2. 2. 3 Mindre kända tips för bildhantering i WordPress
  3. 3. WordPress Image SEO-fel och hur man fixar dem

Visuell påverkan är en av de viktigaste funktionerna när det gäller en betydelsefull marknadsföringsplan. Välkommen till en helt ny postserie – The Ultimate Guide to Image Management i WordPress.


Den är utformad för att ge dig de verktyg som krävs för att hantera dina bildtillgångar i WordPress – direkt från tekniska optimeringar, SEO, CDN-integration och bibliotekshantering. I den här flerpartsguiden kommer vi bara att rekommendera de metoder, handledning, plugins och teman som vi har provat eller rekommenderas av branschexperter.

Vi kommer också att undvika att blinda föreslå plugins som använder en hög användning i WordPress-förvaret. Vi rekommenderar snarare de som slår det perfekta ackordet mellan värdeproposition och optimering av prestanda.

Du kanske undrar hur vi skulle göra det. 24 000+ nedladdningar av vårt Totalt responsiva WordPress-tema i ThemeForest kanske inte är en bra indikator.

Tja, vi har skurat de bästa bloggarna från de branschledande WordPress-värdföretagen (som WPEngine och Pagely) och lärde mig vad de lärt sig när man serverar miljarder sidvisningar över tusentals högprofilerade klienter. Vi har komprimerat all denna information till dig i små stycken och punktpunkter för din framgång online. Låt oss komma igång, ska vi?

Tekniska och prestandaoptimeringstips för WordPress-bilder

Det finns en hel del alternativ för bildoptimering som finns i WordPress inte lägga onödig belastning på webbservern. Vi tittar på några av de vanligaste tipsen för optimering av bilder för alla skall följ, tillsammans med några andra som kommer in, är praktiska vid speciella tillfällen.

JPG eller PNG? Använda rätt bildformat

Det allra första steget i bildoptimering är en bra start. De säger att ett väl börjat jobb är hälften gjort. Det är exakt fallet när det gäller bildoptimering i WordPress. Allt börjar med att välja rätt bildformat. JPG och PNG är de två vanligaste bildformaten som används online i innehållsmarknadsföring.

Tricket är att förstå vilket format du ska välja för varje bildtyp. Att välja fel orsakar en monumental ökning i bildstorlek. Här är reglerna.

När du ska använda PNG-format?

För platta bilder – som vektorer, illustrationer, teckensnitt, logotyper, banners, former, banners etc. – kan du använda PNG för allt som skapas i ett vektorformat som EPS- eller Adobe Illustrator (.AI) -format. Du får en optimerad bild med nästan noll kvalitetsförlust. Om du använder en JPG i det här fallet kompromissar du inte med storleken utan kommer att få slut på kvalitet. I högre upplösningar skulle PNG faktiskt vara lättare utan kvalitetsförlust. JPG skulle drabbas.

Ta hans exempel. Vi skapar en platt bild på 5000px och sparar den som JPG och PNG.

Exempelbild som används för test

Platt bild
JPG233KB
PNG42 kB

Kort sagt var JPG-bilden 455% högre än PNG för samma upplösning.

När du ska använda JPG-format?

För allt annat, använd en JPG. Allt annat än en platt eller vektorbild, använd JPG. Foton av människor, platser, saker etc. – använd JPG. Nästan alla bilder under denna kategori använder JPG. Om du använder PNG istället för en JPG, skulle du stöta på några allvarliga prestationsproblem.

Du måste vara extra försiktig i det här fallet. Om du använder en JPG istället för en PNG, skulle det vara liten eller ingen skada. Men om du använder en blodig PNG i händelse av en JPG, skapar du mycket utrymme för skador. Ta en titt på det här exemplet.

Uppstart: Jag har laddat ner den här bilden från Shutterstock, som väger runt 10.3MB med en upplösning av 6149 × 4562 – väsentligen ett 28MP lagerfoto. Såvida vi inte förbereder något som en utskriftsklar broschyr, kommer vi inte att använda fullständig upplösning av fotot i våra bloggar. Låt oss säga att vi har en fast maxbildstorlek på vår blogg 1600px.

Experimentera: Vi ändrar storlek på källbilden till 1600px och skapar fyra versioner – två för PNG-format och två för JPG. För varje format (JPG / PNG) kommer vi att använda (a) rekommendera komprimeringsinställningar och (b) inställningar för maximala komprimeringar.

Exempel på JEPG-experiment

Resultat: Här är resultaten i ett fint diagram för dig att följa:

Originalbild (KB)

10870
Målupplösning1600px
FormaterainställningarStorlek (KB)% Reduktion
JPGProgressiv, kvalitet = 8523198%
Icke-progressiv, kvalitet = 8523998%
PNGKomprimering = 0557549%
Komprimering = 6185283%
Komprimering = 9175084%

Från en första anblick kan man tro att 84% komprimering av PNG är tillräckligt bra mot de 98% som uppnåtts i JPG. Det är inte helt sant. Om du tittar närmare på bildstorlekarna ser du att PNG väger drygt 1,7 MB medan JPG är 0,22 MB. Vilket betyder, PNG är 8 gånger tyngre än JPG version av samma bild med samma upplösning. Med andra ord, för samma bild och upplösning är JPG-versionen 700% lättare än PNG!

För samma bild och upplösning är JPG-versionen 700% lättare än PNG!

Som tumregel använder du PNG för platta bilder och JPG för allt annat.

Checklista för att ladda upp stockfoton i bloggar

Det finns massor av bloggar där redaktörer direkt laddar upp den fullständiga versionen av bilden i sina blogginlägg. Här är några tips för att ladda upp stockfoton till bloggar. Jag använder en gratis programvara som heter IrfanView som har många fantastiska funktioner. Jag illustrerar var och en för dig.

1. Ändra storlek på bilden

Först måste du bestämma en maxupplösning för alla dina bilder på din WordPress-webbplats. Alla bilder ovanför den dimensionen skulle ändras i storlek, såvida den naturligtvis inte är mindre.

Irfanview har en Batchkonvertering -funktion (tryck B efter att ha startat appen) som kan tillämpa en lista över funktioner på ett gäng bilder på en gång. För våra ändamål inkluderar funktionerna storleksändring, beskärning, tillsättning av vattenstämpel osv.

2. Ta bort EXIF-data

Foton som klickas på en vanlig kamera har många inbäddade metadata – vilket bara är små (men användbara) bitar med information om bilden. Exempel på sådan information inkluderar GPS-koordinater för plats där bilden klickades, ISO-inställningar, kameramodell osv.

EXIF-information om ett slumpmässigt foto klickade på min iPhone

Om vi ​​inte fotograferar blogg, vill vi i allmänhet inte sådan information i bilden av ett blogginlägg. När du sparar eller batchkonverterar bilder i IrfanView tas EXIF-data vanligtvis bort. Detta hjälper dig att bevara din integritet – särskilt din fysiska plats. Storleksskillnaden för de flesta foton är cirka 200-300 kB per bild.

3. Spara som progressiv JPG

IrfanView sparade JEPG: er som progressiva som standard

En progressiv JPG-bild laddar bilden lager för lager – vilket påskyndar lasttiden. Nätverk för innehållsleverans som KeyCDN har startat konvertera automatiskt JPG till progressiva JPG för att snabba på leverans av bilder och optimera lagring.

4. Ställ DPI på 72

DPI eller prickar per tum är ett mått på bildkvaliteten. Ett högt DPI-värde används för tryckmaterial. För webben är värdet 72 perfekt.

Okej, så sammanfattar ovanstående, följande är mina inställningar. Jag kör den här funktionen när jag har sammanställt alla bilder för mitt blogginlägg – innan jag laddar upp bilderna till WordPress.

Batchkonverteringsinställningar i IrfanView för en typisk WordPress-blogg

5. Optimera dina bilder

Oavsett om du har använt JPG eller PNG, måste du optimera din bild. Det finns många allvarligt fantastiska onlineverktyg som hjälper dig att optimera dina bilder och spara en massa av rymden.

Jag pratar om tjänster som TinyPNG eller TinyJPG som helt enkelt optimerar dina PNG / JPG-bilder med några avancerade algoritmer.

Optimerade bilder i TinyPNG

För att vara ärlig vet jag inte hur algoritmerna fungerar, men de gör det och jag har alltid kunnat få en minskning på 50-70% oavsett hur jag bäst sparar dem.

Du kan också köpa pro version av tjänsten som ett Photoshop-plugin för $ 50 USD. Både Windows- och Mac-versioner är tillgängliga. För mina ändamål onlineversionen (tillsammans med Spara i Dropbox funktion) fungerar bäst.

Image Optimization Plugins i WordPress

Hittills har vi lärt oss stegen att få satte igång höger. Tänk om du har snubblat över det här inlägget och redan har laddat upp 100-bilder? Nåväl, här är några plugins som hjälper dig med det:

EWWW Cloud Image Optimizer

Denna plugin är en gaffel från den ursprungliga och mycket populära EWWW Image Optimizer plugin. Genom att samla över 500 000 nedladdningar tillåter dessa inställningar för optimering av bilder när de laddas upp till WordPress.

Det som skiljer det från tävlingen är dess förmåga att optimera befintliga bilder i din databas, vilket resulterar i en enorm prestationsbult. Det sparar också betydande bandbreddskostnader eftersom större delen av din trafik kommer från gamla artiklar. Du kan också välja att aktivera tappad bildkomprimering (som knappt är synlig med blotta ögat) men kan spara mycket utrymme och bandbredd. När det gäller optimeringsteknik kan den använda TinyPNG eller TinyJPGs API för att optimera nya och befintliga bilder.

Men här är problemet. Många värdar (inklusive WPEngine) tillåter inte EWWW Image Optimization-plugin eftersom det lägger mycket extra belastning på servern. Om du på något sätt lyckas kringgå serverbegränsningarna kan du riskera att ditt konto stängs av på grund av policyöverträdelser.

Det är här EWWW Cloud Optimizer plugin kommer att spela. Den laddar ner all beräkning som krävs för att optimera bilderna till molnet och ersätter helt enkelt de opimatiserade bilderna med de optimerade bilderna. Eftersom praktiskt taget noll CPU-effekt används för komprimering finns det ingen ytterligare belastning på avskiljaren. Detta gäller för alla nya och befintliga bildkonverteringar på din WordPress-webbplats.

Planer och priser: Som man kan förvänta sig är plugin inte gratis eftersom utvecklaren måste betala molnberäkningsräkningarna. Men prissättning är extremt rimligt och kostar 9 USD för 3000 bildoptimeringar för ett förbetalt prenumeration.

EWWW Cloud Optimizer-plugin är vackert designat. Mediescannern berättar hur många bilder du behöver optimera innan du gör ett köp. Baserat på serverns bilder kan du köpa en relevant förbetald plan.

TinyPNG WordPress-plugin

Detta är en annan fantastisk bildoptimeringsplugin som integreras direkt med TinyPNG / JPG-tjänsten. Det automatiskt nya och befintliga bilder laddas upp till WordPress mediebibliotek. Detta plugin erbjuder en gratis plan med 100 bildoptimeringar per månad.

Freddy hade sammanställt en lista över inställningar för bildoptimering en stund tillbaka – läs den om du vill veta mer om ämnet.

Slutsats

Detta tar oss till slutet av det första inlägget i denna serie. I nästa artikel kan du lära dig hur några mindre kända bildoptimeringstips och tricks som att förhindra hotlinking, hämta bilder från fjärrservrar och liknande. Har du några tips under komma igång rätt kategori? Låt oss veta i kommentarerna nedan.

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