Optimer dine billeder med foruddefinerede billedstørrelser [WordPress Tip]

Optimering af billeder på en hjemmeside er en skræmmende opgave. Du kan vælge at bruge færre billeder, komprimerede billeder, sprites eller svg; listen fortsætter. Et sted hvor mange WordPress-websites bliver truet op, er at definere billedstørrelser, hvilket er en afgørende aspekt ved optimering af indholdsstunge websteder.

Billedstørrelser er afgørende, fordi billeder automatisk oprettes i henhold til størrelserne, der gives, når billederne uploades. Dette sikrer, at selvom du har et 3000px stort originalt billede, bruges det aldrig, hvis et 600px billede er nok. Ideelt set skal et 600px stort rum bruge et 600px bredt billede i stedet for at skalere ned en større.

I denne artikel vil jeg gå igennem hvilke billedstørrelser er og hvordan man definerer dem.

Hvordan WordPress håndterer billeder

Hvis du nogensinde har indsat et billede i en WordPress-artikel, skal du være kommet med billedstørrelsesvælgeren. Dette lader dig indsætte små, mellemstore og store versioner af billederne. De faktiske størrelser for disse kan ændres i WordPress-indstillingerne.

Når du uploader et billede via WordPress, genererer det versioner af disse billeder og gemmer dem separat. Hvis du for eksempel uploader et 1200 × 800 billede, kan WordPress oprette 100 × 100, 600 × 400 og 900 × 600 versioner. Når du indsætter et billede og vælger "medium", vil den faktiske mediumversion blive brugt i modsætning til en nedskalet version af originalen.

Dette er enormt gavnligt fordi det bevarer båndbredde på serveren og behandlingstid på klientcomputeren. Jeg synes, det kommer ikke som nogen overraskelse, at at downloade et 600 × 400 billede er hurtigere end at downloade et 1200 × 800 billede.

Hvis der bruges et større billede, der skal nedskaleres, browseren skal tage sig af beregningerne for at få det til at ske. Selv om dette ikke tager timer, kan det være mærkbart på billed-tunge websites.

Det rigtige billede på det rigtige sted

Det endelige mål bør være at Brug altid passende billedstørrelser. Hvis du har brug for et 440 × 380 billede, så tag et billede med den nøjagtige størrelse fra serveren. Der er to hovedsteder, hvor du bruger uploadede billeder: fremhævede billeder og billeder i indlæg - jeg vil anbefale at fokusere på fremhævede billeder først.

I alle sammen med de mest visuelt rettede artikler betyder det ikke noget, om et in-post-billede er 220px eller 245px bredt. Hvilken version du har til rådighed, vil være lige så brugbar. Fremhævede billeder vises dog normalt ved almindelige størrelser. For artikellister kan du bruge en 178 × 178 thumbnail, til artiklens overskrifter kan du bruge et 1200 × 600 bredt billede.

Ud over disse kan du også beholde en separat miniature / medium / stor størrelse som defineret i indstillingerne til giver dig nem adgang til bestemte dimensioner når du tilføjer billeder til indlæg.

Så hvad det hele handler om er dette: Ville det ikke være godt, hvis vi havde to ekstra billedstørrelser, som vi kunne bruge til fremhævede billeder? Disse billedstørrelser vil blive oprettet lige sammen med resten, når et billede uploades. Den gode nyhed er, at WordPress har dækket dig med en ret simpel funktion.

Oprettelse af billedstørrelser

Ved at bruge add_image_size () funktion Du kan definere alle de billedstørrelser, dit websted har brug for. Lad os lave de to eksempler, der er nævnt ovenfor. Placer koden nedenfor i dit tema's funktioner.php-fil eller i et plugins fil.

 add_image_size ('featured_thumbnail', 178, 178, true); add_image_size ('featured_wide', 1200, 600); 

Som du kan se, tager denne funktion fire parametre. Den første parameter giver dig mulighed for at angive et navn for størrelsen. Den anden parameter er den maksimale bredde, den tredje, den maksimale højde. Den fjerde parameter sætter hårdt beskæring. Hvis indstillet til ægte, billedet oprettes med den nøjagtige størrelse, du angiver.

Når dette er tilføjet til dit tema eller plugin to nye versioner af hver fil, du uploader, oprettes af WordPress.

Brug af billedstørrelser

Disse billedstørrelser kan bruges i en række funktioner, der omhandler hentning af medier. Lad os se på fremhævede billeder først. the_post_thumbnail () bruges almindeligt til at vise et indlægs fremhævede billede. Følgende kode kan placeres i en WordPress-loop:

 the_post_thumbnail ('featured_thumbnail'); 

Den første parameter i denne funktion giver dig mulighed for at angive den billedstørrelse, der skal bruges. Da jeg har angivet "featured_thumbnail", vil 178 × 178 versionen af ​​denne fil blive brugt.

Der er en række andre funktioner som f.eks wp_get_attachment_image ()og wp_get_attachment_image_src () som også bruger parameteren for billedstørrelse. Når du bruger en sådan funktion, skal du altid angive en passende billedstørrelse.

Regenerering miniaturer

Hvis du allerede har et websted på plads, kan du ikke optimere dine artikler efterfølgende, blot ved at definere en billedstørrelse. Billedstørrelser tages kun i betragtning, når et nyt billede uploades, så de anvendes ikke på billeder, der allerede findes i systemet.

Frygt ikke, pluggen Regenerate Thumbnails vil gøre tingene bedre! Dette plugin kan regenerere miniaturebillederne for alle dine billeder under hensyntagen til alle definerede billedstørrelser. Det kan også målrette et bestemt billede, hvilket er nyttigt, hvis du bare har nogle få, eller du laver nogle test.

Når dine miniaturebilleder er regenereret, skal du se de optimerede versioner, der er indlæst på dit websted. Du kan tjekke dette ud ved at se billedets kilde. Hvis du uploadede 'example.jpeg' og du ser 'example.jpeg' som kilde til dit featuredbillede, er noget ikke rigtigt. Hvis du ser “eksempel-178 × 178.jpeg” så er alt godt; Det optimerede billede vises.

Responsive Images

Et problem med at opretholde et optimeret websted er lydhørhed. Når jeg ser en artikel på iPad, vil et billede i en stor størrelse blive nedskaleret, da den maksimale bredde bliver 786px eller deromkring.

Den nemmeste løsning er at bruge et plugin som Hammy. Hammy arbejder baseret på indholdets bredde på din side (i modsætning til browservinduets bredde) og kan tjene optimerede billeder baseret på det. Dette er især praktisk for mobile brugere, hvor processorkraft og båndbredde kan være et problem.

Yderligere billedoptimering

Som jeg nævnte i introduktionen er der utallige måder at optimere billeder på. Fra sprites til billedkompression kan mange teknikker bruges til at reducere belastningstiderne, der kommer hånd i hånd med billeder. Ashutosh KS har skrevet en stor artikel, der viser 9 WordPress-plugins til forbedring af billedets ydeevne, foreslår jeg at give det en læse!

Jeg foreslår også at tage et kig på Hassle Free Responsive Images, som viser dig, hvordan du tilføjer støtte til billedelementet, noget du vil bruge, hvis du vil skrive din egen kode.