Optimera dina bilder med fördefinierade bildstorlekar [WordPress Tips]

Optimera bilder på en webbplats är en skrämmande uppgift. Du kan välja att använda färre bilder, komprimerade bilder, sprites eller svg; listan fortsätter. En plats där många WordPress-webbplatser blir uppklarade är att definiera bildstorlekar, vilket är en viktig aspekt av att optimera innehålls tunga platser.

Bildstorlekar är viktiga eftersom bilder skapas automatiskt i enlighet med storlekarna som ges när bilder laddas upp. Detta säkerställer att även om du har en 3000px bred originalbild, används den aldrig om en bild på 600px är tillräckligt. Helst ett 600x breddutrymme bör använda en 600px bred bild istället för att skala ner en större.

I denna artikel går jag igenom dig vilka bildstorlekar är och hur man definierar dem.

Hur WordPress hanterar bilder

Om du någonsin har satt in en bild i en WordPress-artikel borde du ha kommit av bildstorleksväljaren. Detta låter dig infoga små, medelstora och stora versioner av bilderna. De faktiska storlekarna för dessa kan ändras i WordPress-inställningarna.

När du laddar upp en bild via WordPress genererar den versioner av dessa bilder och lagrar dem separat. Om du till exempel lägger upp en 1200 × 800 bild kan WordPress skapa 100 × 100, 600 × 400 och 900 × 600 versioner. När du sätter i en bild och väljer "medium" används den verkliga medietypen, i motsats till en krympt version av originalet.

Detta är enormt fördelaktigt för det sparar bandbredd på servern och bearbetar tid på klientdatorn. Jag tycker att det inte kommer någon överraskning att ladda ner en 600 × 400 bild är snabbare än att ladda ner en 1200 × 800 bild.

Om en större bild används som måste nedskalas, webbläsaren behöver ta hand om beräkningarna för att detta ska ske. Även om detta inte tar timmar kan det vara märkbart på bildhårda webbplatser.

Rätt bild på rätt plats

Det ultimata målet bör vara att Använd alltid lämpliga bildstorlekar. Om du behöver en 440 × 380 bild, ta sedan en bild med den exakta storleken från servern. Det finns två huvudplatser där du använder uppladdade bilder: utvalda bilder och inlägg-bilder - jag rekommenderar att du fokuserar på utvalda bilder först.

I alla utom de mest visuellt riktade artiklarna spelar det ingen roll om en in-post bild är 220px eller 245px bred. Vilken version du har tillgänglig skulle vara lika användbar. Utvalda bilder visas dock oftast i vanliga storlekar. För artikelartiklar kan du använda en 178 × 178 miniatyrbild, för artikelrubriker kan du använda en 1200 × 600 bredbild.

Utöver dessa kan du också ha en separat miniatyr / medium / stor storlek som definieras i inställningarna till ger dig enkel åtkomst till specifika dimensioner när du lägger till bilder i inlägg.

Så vad det hela beror på är detta: Skulle det inte vara bra om vi hade två extra bildstorlekar som vi skulle kunna använda för utvalda bilder? Dessa bildstorlekar skapas rätt bredvid resten när en bild laddas upp. Den goda nyheten är att WordPress har täckt dig med en ganska enkel funktion.

Skapa bildstorlekar

Genom att använda add_image_size () funktionen Du kan definiera alla bildstorlekar som din webbplats behöver. Låt oss skapa de två ovan nämnda exemplen. Placera koden nedan i ditt temas funktioner.php-fil eller i en plugins fil.

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

Som du kan se tar den här funktionen fyra parametrar. Den första parametern låter dig ställa in ett namn för storleken. Den andra parametern är maximal bredd, den tredje, maximal höjd. Den fjärde parametern anger hård beskärning. Om den är satt till true, bilden kommer att skapas med den exakta storleken du anger.

När detta har lagts till i ditt tema eller pluggar du in, kommer två nya versioner av varje fil du skapar att skapas av WordPress.

Använda bildstorlekar

Dessa bildstorlekar kan användas i ett antal funktioner som handlar om att hämta media. Låt oss titta på utvalda bilder först. the_post_thumbnail () används vanligtvis för att visa en inläggets utvalda bild. Följande kod kan placeras i en WordPress-loop:

 the_post_thumbnail ('featured_thumbnail'); 

Den första parametern i den här funktionen låter dig ange bildstorleken som ska användas. Eftersom jag har angett "featured_thumbnail" kommer 178 × 178-versionen av den här filen att användas.

Det finns ett antal andra funktioner som wp_get_attachment_image ()och wp_get_attachment_image_src () som också använder parametern för bildstorlek. När du använder en sådan funktion bör du alltid ange en lämplig bildstorlek.

Regenerering Miniatyrbilder

Om du redan har en webbplats på plats kan du inte optimera dina artiklar efterhand, bara genom att definiera en bildstorlek. Bildstorlekar beaktas endast när en ny bild laddas upp, så de tillämpas inte på bilder som redan finns i systemet.

Fruktan inte, pluggen Regenerate Thumbnails kommer att göra saker allt bättre! Denna plugin kan regenerera miniatyrerna för alla dina bilder, med hänsyn till alla definierade bildstorlekar. Det kan också rikta in en specifik bild, vilket är användbart om du bara har några, eller du gör några test.

När dina miniatyrer är regenererade bör du se de optimerade versionerna som laddas på din webbplats. Du kan kolla detta genom att visa bildkällan. Om du laddade upp 'example.jpeg' och du ser "example.jpeg" som källa för din utvalda bild, är något inte rätt. Om du ser “exempel-178 × 178.jpeg” då är allt bra; Den optimerade bilden visas.

Responsive Images

En svårighet att upprätthålla en optimerad webbplats är responsivitet. När jag tittar på en artikel på iPad kommer en in-post bild av en stor storlek att bli nedskalad eftersom maximal bredd blir 786px eller så.

Den enklaste lösningen är att använda ett plugin som Hammy. Hammy fungerar baserat på innehållets bredd på ditt tema (i motsats till webbläsarens fönsterbredd) och kan servera optimerade bilder baserat på det. Detta är särskilt användbart för mobila användare där processorkraft och bandbredd kan vara ett problem.

Ytterligare bildoptimering

Som jag nämnde i introduktionen finns det otaliga sätt att optimera bilder. Från sprites till bildkomprimering kan många tekniker användas för att minska belastningstiderna som kommer hand i hand med bilder. Ashutosh KS har skrivit en stor artikel som visar 9 WordPress-plugins för att förbättra bildresultatet, föreslår jag att det blir läst!

Jag föreslår också att du tittar på Hassle Free Responsive Images som visar hur du lägger till stöd för bildelementet, något du vill använda om du vill skriva din egen kod.