Den ultimative guide til WordPress Image Management

  1. 1. I øjeblikket læser: Den ultimative guide til WordPress Image Management
  2. 2. 3 Mindre kendte tips til billedhåndtering i WordPress
  3. 3. WordPress Image SEO fejl og hvordan fikser man dem

Visuel påvirkning er en af ​​de vigtigste funktioner, når det kommer til en indflydelsesrig marketingplan for indhold. Velkommen til en splinterny postserie – Den ultimative guide til billedstyring i WordPress.


Det er designet til at give dig de nødvendige værktøjer til at administrere dine billedaktiver i WordPress – lige fra tekniske optimeringer, SEO, CDN-integration og bibliotekshåndtering. I denne flerpartsguide vil vi kun anbefale de metoder, tutorials, plugins og temaer, som vi har prøvet eller er anbefalet af brancheeksperter.

Vi vil også undgå blindt at foreslå plugins, der bruger en høj anvendelse i WordPress-oplagringsstedet. Snarere vil vi anbefale dem, der slår den perfekte akkord mellem værdiproposition og ydeevneoptimering.

Du kan undre dig over, hvordan vi ville gøre det. 24.000+ downloads af vores Totalt responsive WordPress-tema i ThemeForest er muligvis ikke en stor indikator.

Vi har fundet de bedste blogs fra de førende WordPress-hostingfirmaer (som WPEngine og Pagely) og lærte hvad de lært, når der serveres milliarder af sidevisninger på tværs af tusinder af højprofilerede klienter. Vi har komprimeret alle disse oplysninger til dig i små afsnit og punkttegn for din online succes. Lad os nu komme i gang, skal vi?

Tekniske tip og ydelsesoptimeringstips til WordPress-billeder

Der er ganske mange billedoptimeringsindstillinger tilgængelige i WordPress, der gør ikke læg unødvendig belastning på webserveren. Vi ser på nogle af de mest almindelige tip til billedoptimering, som alle har skulle gerne følg sammen med et par andre, der kommer, godt med i særlige lejligheder.

JPG eller PNG? Brug af det korrekte billedformat

Det allerførste trin i billedoptimering er en god start. De siger, at et godt begyndt job er halvt gjort. Det er nøjagtigt tilfældet, når det kommer til billedoptimering i WordPress. Det hele starter med at vælge det rigtige billedformat. JPG og PNG er de to mest almindelige billedformater, der bruges online i indholdsmarkedsføring.

Tricket er at forstå, hvilket format der skal vælges for hver billedtype. At vælge det forkerte medfører en monumental stigning i billedstørrelse. Her er reglerne.

Hvornår skal du bruge PNG-format?

For flade billeder – som f.eks. Vektorer, illustrationer, skrifttyper, logoer, bannere, figurer, bannere osv. – skal du bruge et PNG til alt, hvad der oprettes i et vektorformat som EPS eller Adobe Illustrator (.AI). Du ender med at få et optimeret billede med næsten nul kvalitetstab. Hvis du bruger en JPG i dette tilfælde, går du ikke på kompromis med størrelsen, men kan løbe tør for kvalitet. Ved højere opløsninger ville PNG faktisk være lettere uden kvalitetstab. JPG ville lide.

Tag hans eksempel. Vi opretter et fladt billede ved 5000px og gemmer det som en JPG og PNG.

Prøvebillede brugt til test

Fladt billede
JPG233KB
PNG42KB

Kort sagt var JPG-billedet 455% højere end PNG for den samme opløsning.

Hvornår skal du bruge JPG-format?

Brug alt andet til en JPG til alt andet. Alt andet end et fladt eller vektorbillede skal du bruge JPG. Billeder af mennesker, steder, ting osv. – brug JPG. Næsten alle fotos i denne kategori bruger JPG. Hvis du bruger PNG i stedet for en JPG, ville du støde på nogle alvorlige præstationsproblemer.

Du skal være ekstra forsigtig i dette tilfælde. Hvis du bruger en JPG i stedet for en PNG, ville der være lidt eller ingen skade. Men hvis du bruger en blodig PNG i tilfælde af en JPG, skaber du meget plads til skader. Se på dette eksempel.

Opsætning: Jeg har downloadet dette billede fra Shutterstock, som vejer rundt 10.3MB med en opløsning på 6149 × 4562 – hovedsageligt et 28MP stock foto. Medmindre vi forbereder noget som en udskrivningsklar brochure, bruger vi ikke fuld opløsning af billedet i vores blogs. Lad os sige, at vi har en fast maksimal billedstørrelse på vores blog af 1600 pixels.

Eksperiment: Vi ændrer størrelsen på kildebilledet til 1600px og opretter fire versioner – to til PNG-format og to for JPG. For hvert format (JPG / PNG) bruger vi (a) anbefaler komprimeringsindstillinger og (b) maksimale komprimeringsindstillinger.

Eksempelbillede til JEPG-eksperiment

Resultater: Her er resultaterne i et dejligt diagram, som du kan følge:

Originalbillede (KB)

10870
Målopløsning1600 pixels
FormatIndstillingerStørrelse (KB)% Reduktion
JPGProgressiv, kvalitet = 8523198%
Ikke-progressiv, kvalitet = 8523998%
PNGKomprimering = 0557549%
Komprimering = 6185283%
Komprimering = 9175084%

Fra et første øjekast kunne man tro, at 84% komprimering af PNG er godt nok mod 98% opnået i JPG. Det er ikke helt sandt. Hvis du kigger nærmere på billedstørrelserne, ser du, at PNG vejer lidt over 1,7 MB, mens JPG er 0,22 MB. Hvilket betyder, PNG er 8 gange tungere end JPG version af det samme billede i samme opløsning. Med andre ord, for det samme billede og opløsning er JPG-versionen 700% lettere end PNG!

For det samme billede og opløsning er JPG-versionen 700% lettere end PNG!

Brug som en tommelfingerregel PNG til flade billeder og JPG til alt andet.

Tjekliste til upload af stock-fotos i blogs

Der er masser af blogs, hvor redaktører direkte uploader den fulde opløsning af billedet i deres blogindlæg. Her er et par tips til at uploade stockfotos til blogs. Jeg bruger en gratis software kaldet IrfanView, som har en masse fantastiske funktioner. Jeg illustrerer hver enkelt for dig.

1. Ændr størrelse på dit billede

For det første skal du beslutte en maksimal opløsning for alle dine billeder på dit WordPress-sted. Ethvert billede over denne dimension ændres til størrelse, medmindre det selvfølgelig er mindre.

IrfanView har en Batchkonvertering -funktion (tryk på B, når appen er lanceret), som kan anvende en liste over funktioner på en masse billeder på én gang. Til vores formål inkluderer funktionerne ændring af størrelse, beskæring, tilføjelse af et vandmærke osv.

2. Fjern EXIF-data

Fotos, der er klikket på et almindeligt kamera, har en masse indlejrede metadata – hvilket ikke er andet end små (men nyttige) oplysninger om billedet. Eksempler på sådan info inkluderer GPS-koordinater for sted, hvor billedet blev klikket, ISO-indstillinger, kameramodel osv.

EXIF info om et tilfældigt foto klikket på min iPhone

Medmindre vi fotoblogger, ønsker vi generelt ikke sådan information i et blogindlægs billede. Når du gemmer eller batchkonverterer billeder i IrfanView, fjernes EXIF-data typisk. Dette hjælper med at bevare dit privatliv – især din fysiske placering. Størrelsesforskellen for de fleste fotos er ca. 200-300 KB pr. Billede.

3. Gem som progressiv JPG

IrfanView gemte JEPG’er som progressive som standard

Et progressivt JPG-billede indlæser billedet lag for lag – og dermed fremskynder belastningen. Indholdsleveringsnetværk som KeyCDN er startet automatisk konvertering JPG’er til progressive JPG’er for at fremskynde levering af billeder og optimere lagring.

4. Indstil DPI til 72

DPI eller prikker pr. Tomme er et mål på billedets kvalitet. En høj DPI-værdi bruges til udskrivningsmateriale. For internettet er en værdi på 72 perfekt.

Okay, så opsummerer ovenstående, og det følger mine indstillinger. Jeg kører denne funktion, når jeg har samlet alle billederne til mit blogindlæg – før jeg uploader billederne til WordPress.

Batchkonverteringsindstillinger i IrfanView til en typisk WordPress-blog

5. Optimer dine billeder

Uanset om du har brugt JPG eller PNG, skal du optimere dit billede. Der er en masse alvorligt awesome online værktøjer, der hjælper dig med at optimere dine billeder og gemme en masse af plads.

Jeg taler om tjenester som f.eks TinyPNG eller TinyJPG, der simpelthen optimerer dine PNG / JPG-billeder med nogle avancerede algoritmer.

Optimerede billeder i TinyPNG

For at være ærlig ved jeg ikke, hvordan algoritmerne fungerer, men de gør det, og jeg har altid været i stand til at få en reduktion på 50-70%, uanset hvor bedst jeg gemmer dem.

Du kan også købe pro version af tjenesten som et Photoshop-plugin til $ 50 USD. Både Windows- og Mac-versioner er tilgængelige. Til mine formål er online versionen (kombineret med Gem i Dropbox funktion) fungerer bedst.

Plugins til billedoptimering i WordPress

Indtil videre har vi lært trinnene til at komme startede højre. Hvad hvis du har snublet over dette indlæg nu og allerede har uploadet 100s billeder? Nå, her er nogle plugins til at hjælpe dig med det:

EWWW Cloud Image Optimizer

Dette plugin er en gaffel fra den originale og vildt populære EWWW Image Optimizer plugin. Samlet over 500.000 download giver dette billedoptimeringsplugins dig mulighed for at optimere billeder, når de uploades til WordPress.

Det, der adskiller det fra konkurrencen, er dets evne til at optimere eksisterende billeder i din database, hvilket resulterer i en enorm ydelsesbump. Det sparer også betydelige båndbreddeomkostninger, da det meste af din trafik kommer fra gamle artikler. Du kan også vælge at aktivere tabt billedkomprimering (som næppe er synligt med det blotte øje), men kan spare en masse plads og båndbredde. Med hensyn til optimeringsteknologi kan den bruge TinyPNG eller TinyJPGs API til at optimere nye og eksisterende billeder.

Men her er problemet. En masse værter (inklusive WPEngine) tillader ikke EWWW Image Optimization plugin, da det lægger en masse ekstra belastning på serveren. Hvis du på en eller anden måde formår at omgå serverbegrænsningerne, kan du risikere, at din konto bliver suspenderet på grund af overtrædelser af politikken.

Det er her, EWWW Cloud Optimizer plugin kommer til at spille. Det indlæser al den beregning, der kræves for at optimere billederne til skyen, og erstatter simpelthen de uoptimerede billeder med de optimerede. Da praktisk talt nul CPU-strøm bruges til komprimering, er der ingen ekstra belastning på adskillelsen. Dette er gyldigt for alle nye og eksisterende billedkonverteringer på dit WordPress-sted.

Planer og priser: Som man kunne forvente, er plugin ikke gratis, da udvikleren skal betale skyregningsregningerne. Dog prisfastsættelse er ekstremt rimelig og koster $ 9 USD for 3000 billedoptimeringer for et forudbetalt abonnement.

EWWW Cloud Optimizer-pluginet er designet smukt. Mediescanneren fortæller dig, hvor mange billeder du har brug for at optimere, inden du foretager et køb. Baseret på din servers billeder kan du købe en relevant forudbetalt plan.

TinyPNG WordPress Plugin

Dette endnu et fantastisk billedeoptimeringsplugin, der integreres direkte med TinyPNG / JPG-tjenesten. Det automatisk nye og eksisterende billeder uploadet til WordPress mediebibliotek. Dette plugin tilbyder en gratis plan med 100 billedoptimeringer pr. Måned.

Freddy havde samlet en liste over billedoptimerings plugins for et stykke tid tilbage – læs den, hvis du gerne vil vide mere om emnet.

Konklusion

Dette bringer os til slutningen af ​​det første indlæg i denne serie. I den næste artikel kan du godt lære, hvordan nogle mindre kendte tip og tricks til billedoptimeringsoptagelser, såsom at forhindre hotlinking, hentning af billeder fra eksterne servere og lignende. Har du nogle tip under Kom godt i gang kategori? Fortæl os det i kommentarerne herunder.

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