1. 1. Leser for øyeblikket: Den ultimate guiden til WordPress Image Management
  2. 2. 3 Mindre kjente tips for bildebehandling i WordPress
  3. 3. WordPress Image SEO feil og hvordan du fikser dem

Visuell påvirkning er en av de viktigste funksjonene når det kommer til en påvirkelig plan for innholdsmarkedsføring. Velkommen til en helt ny postserie – The Ultimate Guide to Image Management i WordPress.


Den er designet for å gi deg verktøyene som er nødvendige for å administrere bildebeholdningen din i WordPress – helt fra tekniske optimaliseringer, SEO, CDN-integrasjon og bibliotekstyring. I denne flerpartsguiden vil vi bare anbefale de metodene, opplæringsprogrammene, plugins og temaene som vi har prøvd eller er anbefalt av bransjeeksperter.

Vi vil også unngå å blindt foreslå plugins som bruker mye bruk i WordPress-depotet. Snarere vil vi anbefale de som slår den perfekte akkorden mellom verdiforslag og ytelsesoptimalisering.

Du lurer kanskje på hvordan vi hadde gjort det. 24 000+ nedlastinger av vårt Totalt responsive WordPress-tema i ThemeForest er kanskje ikke en stor indikator.

Vel, vi har skurvet de beste bloggene fra de bransjeledende WordPress-vertsfirmaene (som WPEngine og Pagely) og lærte hva de lært når du serverer milliarder av sidevisninger på tusenvis av høyprofilerte klienter. Vi har komprimert all denne informasjonen for deg til ørsmå avsnitt og kulepunkter for din suksess på nettet. La oss komme i gang, skal vi?

Tekniske og ytelsesoptimaliseringstips for WordPress-bilder

Det er mange alternativer for optimalisering av bilder som er tilgjengelige i WordPress ikke legge unødvendig belastning på webserveren. Vi ser på noen av de vanligste tipsene for optimalisering av bilder for alle bør følg, sammen med noen få andre som kommer inn, er nyttige ved spesielle anledninger.

JPG eller PNG? Bruk riktig bildeformat

Det aller første trinnet i optimalisering av bilder er en god start. De sier at en godt begynt jobb er halvparten gjort. Det er akkurat tilfelle når det kommer til optimalisering av bilder i WordPress. Det hele starter med å velge riktig bildeformat. JPG og PNG er de to vanligste bildeformatene som brukes online i innholdsmarkedsføring.

Trikset er å forstå hvilket format du vil velge for hver type bilde. Å velge feil forårsaker en monumental økning i bildestørrelse. Her er reglene.

Når du skal bruke PNG-format?

For flate bilder – for eksempel vektorer, illustrasjoner, skrifter, logoer, bannere, former, bannere osv. – bruk alt som er opprettet i et vektorformat som EPS eller Adobe Illustrator (.AI) -format, bruk en PNG. Du vil ende opp med å få et optimalisert bilde med nesten null kvalitetstap. Hvis du bruker en JPG i dette tilfellet, vil du ikke gå på akkord med størrelsen, men det kan være tom for kvalitet. Ved høyere oppløsninger ville PNG faktisk være lettere uten kvalitetstap. JPG ville lide.

Ta hans eksempel. Vi lager et flatt bilde på 5000 piksler og lagrer det som JPG og PNG.

Eksempelbilde brukt til test

Flat Image
JPG233KB
PNG42KB

Kort sagt, JPG-bildet var 455% høyere enn PNG for samme oppløsning.

Når skal jeg bruke JPG-format?

For alt annet, bruk en JPG. Alt annet enn et flatt eller vektorbilde, bruk JPG. Bilder av mennesker, steder, ting osv. – bruk JPG. Nesten alle bilder under denne kategorien bruker JPG. Hvis du bruker PNG i stedet for en JPG, ville du støte på noen alvorlige ytelsesproblemer.

Du må være ekstra forsiktig i dette tilfellet. Hvis du bruker en JPG i stedet for en PNG, vil det være liten eller ingen skade. Imidlertid bruker du en blodig PNG i tilfelle en JPG, skaper du mye rom for skade. Ta en titt på dette eksemplet.

oppsett: Jeg har lastet ned dette bildet fra Shutterstock, som veier rundt 10.3MB med en oppløsning på 6149 x 4562 – egentlig et 28MP arkivfoto. Med mindre vi forbereder noe som en utskriftsklar brosjyre, bruker vi ikke full oppløsning av bildet i bloggene våre. La oss si at vi har en fast maksimal bildestørrelse på bloggen vår 1600 piksler.

Eksperiment: Vi endrer størrelse på kildebildet til 1600px og lager fire versjoner – to for PNG-format og to for JPG. For hvert format (JPG / PNG), bruker vi (a) anbefale komprimeringsinnstillinger og (b) innstillinger for maksimal kompresjon.

Eksempelbilde for JEPG-eksperiment

resultater: Her er resultatene i et fint diagram som du kan følge:

Originalbilde (KB)

10870
Måloppløsning1600 piksler
FormatinnstillingerStørrelse (KB)% Reduksjon
JPGProgressiv, kvalitet = 8523198%
Ikke-progressiv, kvalitet = 8523998%
PNGKomprimering = 0557549%
Komprimering = 6185283%
Komprimering = 9175084%

Fra første øyekast kan man tro at 84% komprimering av PNG er bra nok mot 98% oppnådd i JPG. Det stemmer ikke helt. Hvis du ser nærmere på bildestørrelsene, vil du se at PNG veier litt over 1,7 MB mens JPG er 0,22 MB. Hvilket betyr, PNG er 8 ganger tyngre enn JPG versjon av samme bilde i samme oppløsning. Med andre ord, for samme bilde og oppløsning er JPG-versjonen 700% lettere enn PNG!

For samme bilde og oppløsning er JPG-versjonen 700% lettere enn PNG!

Som en tommelfingerregel, bruk PNG for flate bilder og JPG for alt annet.

Sjekkliste for å laste opp aksjebilder i blogger

Det er mange blogger der redaktører direkte laster opp fullversjon av bildet i blogginnleggene. Her er noen tips for å laste opp aksjebilder til blogger. Jeg bruker en gratis programvare som heter IrfanView som har mange fantastiske funksjoner. Jeg illustrerer hver og en for deg.

1. Endre størrelse på bildet

Først må du bestemme en maksimal oppløsning for alle bildene dine på WordPress-nettstedet. Ethvert bilde over den dimensjonen vil bli endret størrelse, med mindre det selvfølgelig er mindre.

IrfanView har en Batchkonvertering -funksjonen (trykk B etter lansering av appen) som kan bruke en liste over funksjoner på en haug med bilder på en gang. For våre formål inkluderer funksjonene størrelse på størrelse, beskjæring, tilsetning av et vannmerke osv.

2. Fjern EXIF-data

Bilder som er klikket på et vanlig kamera, har mye innebygd metadata – som ikke er bittesmå (men nyttige) biter med informasjon om bildet. Eksempler på slik info inkluderer GPS-koordinater for sted der bildet ble klikket, ISO-innstillinger, kameramodell osv.

EXIF info om et tilfeldig bilde klikket på iPhone-en min

Med mindre vi blogger, vil vi vanligvis ikke ha slik informasjon i et blogginnleggs bilde. Når du lagrer eller batchkonverterer bilder i IrfanView, blir EXIF-data vanligvis fjernet. Dette hjelper deg med å bevare personvernet ditt – spesielt din fysiske beliggenhet. Størrelsesforskjellen for de fleste bilder er omtrent 200-300 KB per bilde.

3. Lagre som progressiv JPG

IrfanView lagret JEPG-er som progressive som standard

Et progressivt JPG-bilde laster bildet lag for lag – og påskynder dermed lastetiden. Innholdsleveringsnettverk som KeyCDN har startet automatisk konvertering JPG-er til progressive JPG-er for å fremskynde levering av bilder og optimalisere lagring.

4. Still DPI til 72

DPI eller prikker per tomme er et mål på kvaliteten på bildet. En høy DPI-verdi brukes for utskriftsmateriale. For nettet er verdien 72 perfekt.

OK, så oppsummering av ovenstående, følgende er innstillingene mine. Jeg kjører denne funksjonen når jeg har samlet alle bildene til blogginnlegget mitt – før jeg laster opp bildene til WordPress.

Batchkonverteringsinnstillinger i IrfanView for en typisk WordPress-blogg

5. Optimaliser bildene dine

Uansett om du har brukt JPG eller PNG, må du optimalisere bildet. Det er mange virkelig online verktøy som hjelper deg med å optimalisere bildene og lagre en mye av plass.

Jeg snakker om tjenester som TinyPNG eller TinyJPG som ganske enkelt optimaliserer PNG / JPG-bildene med noen avanserte algoritmer.

Optimaliserte bilder i TinyPNG

For å være ærlig, vet jeg ikke hvordan algoritmene fungerer, men de gjør det, og jeg har alltid vært i stand til å få en reduksjon på 50-70% uansett hvordan jeg sparer dem best.

Du kan også kjøpe pro versjon av tjenesten som en Photoshop-plugin for $ 50 USD. Både Windows- og Mac-versjoner er tilgjengelige. For mine formål er online-versjonen (kombinert med Lagre i Dropbox funksjon) fungerer best.

Innstillinger for bildeoptimalisering i WordPress

Så langt har vi lært trinnene om å få startet Ikke sant. Hva om du har snublet over dette innlegget og allerede har lastet opp hundrevis av bilder? Vel, her er noen plugins som kan hjelpe deg med det:

EWWW Cloud Image Optimizer

Denne pluginen er en gaffel fra den originale og veldig populære EWWW Image Optimizer plugg inn. Samler over 500 000 nedlastinger, og disse pluginene for optimalisering av bilder lar deg optimalisere bilder når de lastes opp til WordPress.

Det som skiller det fra konkurransen er dens evne til å optimalisere eksisterende bilder i databasen din, noe som resulterer i et enormt ytelsesdump. Det sparer også betydelige båndbreddekostnader siden mesteparten av trafikken din kommer fra gamle artikler. Du kan også velge å aktivere tapt bildekomprimering (som knapt er synlig med det blotte øye), men kan spare mye plass og båndbredde. Når det gjelder optimaliseringsteknologi, kan den bruke TinyPNG eller TinyJPGs API for å optimalisere nye og eksisterende bilder.

Men her er problemet. Mange verter (inkludert WPEngine) tillater ikke EWWW Image Optimization-plugin siden det legger mye ekstra belastning på serveren. Hvis du på en eller annen måte klarer å omgå serverbegrensningene, kan du risikere at kontoen din blir suspendert på grunn av brudd på retningslinjene.

Det er her EWWW Cloud Optimizer plugin kommer til å spille. Den laster av all beregning som kreves for å optimalisere bildene til skyen, og erstatter ganske enkelt de uoptimerte bildene med de optimaliserte bildene. Siden praktisk talt null CPU-strøm brukes til komprimering, er det ingen ekstra belastning på avstandsmaskinen. Dette er gyldig for alle nye og eksisterende bildekonvertering på ditt WordPress-nettsted.

Planer og priser: Som en kan forvente, er ikke plugin-en gratis siden utvikleren må betale skyregningsregningene. Imidlertid prising er ekstremt rimelig og koster $ 9 USD for 3000 bildeoptimaliseringer for et forhåndsbetalt abonnement.

EWWW Cloud Optimizer-pluginen er designet vakkert. Medieskanneren forteller deg hvor mange bilder du trenger å optimalisere før du kjøper. Basert på serverens bilder, kan du kjøpe en relevant forhåndsbetalt plan.

TinyPNG WordPress-plugin

Dette er en flott plugin for optimalisering av bilder som integreres direkte med TinyPNG / JPG-tjenesten. Det automatisk nye og eksisterende bilder lastet opp til WordPress mediebibliotek. Denne pluginen tilbyr en gratis plan med 100 bildeoptimaliseringer per måned.

Freddy hadde samlet en liste over plugin-er for optimalisering av bilder for en stund tilbake – les den hvis du vil vite mer om emnet.

Konklusjon

Dette bringer oss til slutten av det første innlegget i denne serien. I den neste artikkelen, lær deg godt hvordan noen mindre kjente tips og triks for optimalisering av bilder, slik som å forhindre hotlinking, hente bilder fra eksterne servere og lignende. Har du noen tips under komme i gang kategori? Gi oss beskjed i kommentarene nedenfor.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me