Standard WordPress – bildstorlekar och hur du lägger till anpassade storlekar

när du laddar upp en bild gör WordPress mycket arbete bakom kulisserna så att du kan servera bilden till dina besökare. Du kan piggyback på denna process och lägga till anpassade bildstorlekar för att spara behöva ändra storlek på bilder manuellt.

i det här inlägget förklarar jag hur och varför WordPress skapar olika bildstorlekar. Då ska jag lära dig hur du lägger till dina egna bildstorlekar genom att ändra funktionerna.php-fil, regenerera miniatyrer och Lägg till dina nya bildstorlekar i Gutenberg-bildblocket och/eller WordPress-slingan.

WordPress bildstorlekar förklaras

varje gång du laddar upp en bild i WordPress Media library, dessa är de ytterligare bildstorleksalternativ WordPress skapar som standard:

• miniatyr
• Medium
• Medium Large
• Large

om ditt tema anger ytterligare bildstorlekar skapar WordPress dem också.

WordPress bevarar också den ursprungliga storleken du laddar upp och namnger den Full som i full storlek.

du kan se alla dessa (med undantag för Medium_Large) i rullgardinsmenyn Gutenberg image block Bildstorlek när du infogar en bild på en sida eller ett inlägg.

varför skapar WordPress så många bilder?

bilder är som byxor. Du vill se till att du får rätt storlek. Byxor och bilder som är för små ser dumma ut och det är smärtsamt uppenbart för dig och alla andra att de inte passar rätt. För små bilder på din webbplats kommer att se utsträckta eller pixellerade ut.

däremot, om de är för stora, är det super slösigt. Du skulle inte sätta ett par byxor gjorda för en man på en bebis, eller hur? Det är så mycket extra tyg som inte ens behövs. Det barnet kommer att gå vilse i ett byxben 😉

bilderna är desamma. Om din bild är för stor för behållaren slösar du bort bandbredd och tid på att ladda ner den för att visas på din sida. Och för vad? Förgäves.

helst bör bilderna i full storlek du laddar upp vara tillräckligt stora för att passa den största bildbehållaren på din webbplats, men inte större. Sedan när du använder bilder på din webbplats, bör du använda den exakta storleken bild du behöver.

eftersom skalning av bilder för att skapa rätt storlek i Photoshop eller annan bildredigerare tar värdefull tid tar WordPress den här uppgiften och gör det åt dig. Tack, WordPress!

allt du behöver göra är att välja lämplig storlek när du infogar en bild på din webbplats för att få prestandafördelarna med att använda en bild som är precis rätt.

om WordPress – standardbildstorlekarna inte är perfekt dimensionerade för ditt tema kan du justera standardinställningarna i avsnittet Media > inställningar eller lägga till anpassade storlekar så att du har fler alternativ att välja mellan.

standardbildstorlekarna är följande:

• 150px kvadrat för miniatyrer
• 300px bredd för medelstora bilder
• 768px max bredd för medium_large bilder
• 1024px max bredd för stora bilder.

Medium_large lades till för att dra nytta av responsivt bildstöd, varför det inte ingår i inställningssidan. På tal om responsiva bilder …

responsiva bilder

alla dessa bilder i olika storlekar tjänar ett annat syfte, så du bör inte ställa in standardvärdena till noll för att hålla WordPress från att skapa dem, som vissa handledning föreslår.

WordPress lade till responsiva bilder till core i version 4.4. I stället för att fylla bild src attribut med webbadressen för bara en bild, WordPress också lagt srcset (uppsättning källor) som är en lista över webbadresser för bilder av olika storlekar.

Gissa vilka bilder den använder för att skapa den listan? Japp, WordPress använder samma bilder i olika storlekar som det skapar när du laddar upp en bild.

den erbjuder denna lista till webbläsaren så att den kan välja en bild som är lämplig för besökarens enhet. Om besökaren använder en mobil enhet får de en mindre bild i srcset. Om de besöker din webbplats på en stationär Retina-enhet får de den fullstora Retina-färdiga bildfilen du laddade upp. Återigen är det därför du bör ladda upp en bild som är tillräckligt stor för att fylla det behovet.

när du lägger till en anpassad bildstorlek lägger WordPress till den i srcset så länge den har samma bildförhållande. Om den anpassade bildstorleken Beskär bilden till en annan form kommer den att utelämnas från uppsättningen.

” webboptimering ”större bilder i WordPress

WordPress 5.3 introducerade ett nytt sätt att hantera stora bildfiler genom att upptäcka och generera en” webboptimerad maximal storlek ” av dem.

hur fungerar det?

när en ny bild laddas upp kommer WordPress att upptäcka om det är en ”stor” bild baserat på om dess höjd eller bredd är över big_image threshold.

standardtröskelvärdet är 2560px (detta kan ändras med det nya big_image_size_threshold – filtret).

om en bilds höjd eller bredd ligger över denna tröskel kommer den att skalas ner – med tröskeln som används som maxhöjd och maxbreddsvärde.

den nedskalade bilden kommer att användas som den största tillgängliga storleken.

vill du inaktivera skalningen?

skalningen styrs av filtret big_image_size_threshold.

återvändande false från filtret återuppringning kommer att inaktivera det (enligt nedan):

add_filter( 'big_image_size_threshold', '__return_false' );

WordPress miniatyrer och Dagens Bildstorlek

vi har nu nått den del av vår handledning där vi kommer att riva upp hela miniatyr/Dagens bild röran. I grund och botten handlar problemet om detta; eftersom WordPress upprätthåller bakåtkompatibilitet när det utvecklas förändras namnen på saker, men funktionerna hänvisar fortfarande till saker med sina gamla namn.

WordPress Thumbnails bildstorlek introducerades i version 2.9 men ändrades snabbt till utvalda bilder i version 3.0, men tyvärr fastnade namnet. Så du hör ofta utvalda bilder som kallas miniatyrer i handledning och även i funktionsnamnen.

här är några exempel:

• om ditt tema inte har utvalda bilder och du vill aktivera den funktionen lägger du till add_theme_support( 'post-thumbnails' ); i funktionsfilen.
• för att visa WordPress-bildstorleken i ett tema använder du funktionen the_post_thumbnail().

miniatyrer och utvalda bilder delar en standardstorlek på 150px med 150px. Om du använder the_post_thumbnail() funktion utan ett argument för att ange storleken, kommer den att använda standard 150px kvadratstorlek.

för att göra detta mindre förvirrande för dig själv så att du faktiskt kan använda rätt storlek, föreslår jag att du skapar en anpassad bildstorlek och namnger den med-stor eller något liknande. Då, när du vill använda den bilden i you ’ re the loop, använder du the_post_thumbnail('featured-large').

innan du börjar skapa anpassade bildstorlekar i WordPress

när du börjar skapa anpassade bildstorlekar, undvik att gå överbord och skapa bilder för alla tänkbara ändamål. Annars kommer du att bränna genom utrymme på din värd och om du använder en bildoptimeringstjänst som debiterar dig per bild, kommer du att gå igenom din bildbidrag mycket snabbare.

om din plan låter dig optimera 100 bilder men varje uppladdning genererar ytterligare 9 storlekar som också måste optimeras, kommer du att nå din gräns när du laddar upp 10 bilder. Tänk på detta när du lägger till anpassade storlekar och väljer bildoptimeringsplaner.

Smush Pro har inga bildoptimeringsgränser och levereras med ett CDN så att du kan hålla serverns lagringsutrymme klart. Du kommer att kunna lägga till fler anpassade bildstorlekar än vad du normalt skulle göra. Tänk på det som motsvarar att sätta flowy MC Hammer byxor istället för små skinny jeans på dessa barn eftersom tyget är billigt:)

prova Smush Pro gratis i 7 dagar.

så här lägger du till anpassade bildstorlekar i WordPress

här är koden vi kommer att lägga till i vår funktionsfilen för att lägga till bildstorlekar:

add_image_size( 'the-name-for-custom-image-size', 600, 400, true );

denna funktion accepterar 4 parametrar i denna ordning:

1. namnet du ger din anpassade bildstorlek
2. bildbredden i pixlar
3. bildhöjden i pixlar
4. ska bilden beskäras för att passa bredden och höjden du angav ovan

beskärning

beskärningsparametern är en boolesk, så du använder sant eller falskt. Om du lämnar det helt, kommer det som standard att vara falskt.

om du ställer in beskärningsparametern till true, kommer WordPress att beskära din bild så att den passar de dimensioner du anger när den skapar den anpassade bilden.

till exempel, om din anpassade bildstorlek är en 600px med 600px kvadrat och du ställer in beskärning till true, så om du laddar upp en 600px med 800px rektangulär bild, kommer 200px att hakas av för att göra bilden fyrkantig.

add_image_size( 'custom-image-square', 600, 600, true );

att ställa in beskärningsparametern till true är till hjälp för bildstorlekar som måste vara exakta, som utvalda bilder eller postarkivbilder som måste passa en viss dimension perfekt.

för bilder som kan ha mer svängrum, till exempel WordPress-postbildstorleken och bilder på sidor som tenderar att ha varierande höjder och bredder, kan du ställa in beskärning till false. Detta ändrar storlek på bilderna, men det ändrar inte bildens form eller skär av några pixlar.

ta en titt på vår image SEO-guide om du försöker driva trafik till dina webbplatser med dina bilder.

regenererande miniatyrer

ett av de viktigaste stegen när antingen:

1. ändra WordPress standardbildstorlekar
2. lägga till anpassade bildstorlekar eller
3. växla över till ett nytt tema som har olika anpassade storlekar

regenererar miniatyrer.

i det här sammanhanget hänvisar miniatyrer till alla ytterligare bilder som WordPress skapar, inklusive de anpassade bildstorlekarna som ingår i ditt tema och de som du skapar via din funktions-fil.

när du ändrar hur WordPress skapar ytterligare bilder kommer det bara att påverka de bilder du laddar upp framöver. Det uppdaterar inte bilderna som redan finns i ditt mediebibliotek.

för att ändra de bilder du redan har laddat upp måste du använda det populära plugin-programmet Regenerate Thumbnails.

när du har installerat det hittar du det i avsnittet Verktyg.

när du återskapar miniatyrbilderna i dina nya storlekar har du möjlighet att ta bort gamla oanvända bildstorlekar för att frigöra serverutrymme.

så här lägger du till anpassade bildstorlekar i rullgardinsmenyn i Gutenbergs bildblock

du behöver bara lägga till koden nedan i funktionsfilen om du vill att dina anpassade bildstorlekar ska visas i rullgardinsmenyn i Gutenbergs bildblock. Om du skapade en anpassad bildstorlek för att använda bakom kulisserna för ditt tema kan du hoppa över det här steget.

vi kommer att haka på filtret image_size_names_choose.

i matrisen lägger jag till namnet på den anpassade storleken som jag angav i funktionen add_image_size och namnet som jag vill visas i rullgardinsmenyn inom parentes.

som jag lärde mig när jag gjorde denna handledning måste du regenerera miniatyrbilder innan bilden visas i rullgardinsmenyn.

WordPress Lägg till Bildstorlek Full Code Snippet

därefter kombinerar vi allt vi lärde oss i ett kodblock med ett verkligt exempel.

låt oss säga att du vill lägga till anpassade bildstorlekar i din blogg.

här är de bildstorlekar du vill lägga till:

• en 1600px med 400px utvald bild
• en 800px storlek som sträcker sig över bredden på din bloggs innehållsavsnitt

eftersom vårt tema för närvarande inte stöder utvalda bilder börjar vi med det.

du ser då mina anpassade storlekar. Lägg märke till att jag inte beskär bilderna som kommer att spänna över bredden på blogginnehållet. Jag kommer hårt beskära mina bilder eftersom jag vill att de ska rada upp precis rätt.

den enda bilden jag vill lägga till i Gutenberg-rullgardinsmenyn är bloggbilden eftersom jag kommer att använda WordPress-bildstorleken i mitt tema.

när jag har lagt till den här koden i min functions.php – fil är nästa steg att regenerera miniatyrer.

för att använda min anpassade utvalda bild för mina inlägg i slingan lägger jag till följande till single.php eller index.php

se hur jag lade till 'featured-large' i the_post_thumbnail() funktion? Det kommer att visa min presenterade bilden under mina blogginlägg titlar, ovanför mitt innehåll.

anpassade bildstorlekar bästa praxis

här är några fler tips så att du inte stöter på problem med att skapa anpassade bilder i WordPress.

1. ladda alltid upp den största filen du kan. Om din bildstorlek är för liten kan WordPress inte skapa alla storlekar som behövs för att betjäna dina bilder ordentligt på en mängd olika enheter.
2. om du behöver ändra storlek på standardstorleken medium_large, använd funktionen update_option(). Du kan använda samma funktion för att uppdatera alla andra WordPress-standardbildstorlekar.
3. om du befinner dig utanför WordPress-slingan kan du använda funktionen get_the_post_thumbnail() för att använda en av dina anpassade bilder.
4. här är mer om mjuk beskärning och hård beskärning när du skapar anpassade bildstorlekar om du stöter på problem.

det är allt som finns att lägga till anpassade bildstorlekar

när du förstår hur anpassade bildstorlekar i WordPress fungerar kan du ändra dem för att passa dina behov och spara mycket tid. Att få dina bildstorlekar rätt hjälper dig också att förbättra din webbplatsprestanda och sökmotorrankning, så det är en viktig sak att få rätt.

om du verkligen vill ta din bildoptimering till en annan nivå, kolla in Smush. Vi har lagt till en fantastisk CDN till Smush Pro som har automatisk bildstorleksändring, vilket hjälper dig att undvika att hantera att ändra dina funktioner fil för att lägga till egna bildstorlekar.

det finns också andra fantastiska bildoptimeringsfunktioner som är inbyggda, som Lat laddning och konvertering av bilder till nästa genformat. Prova Smush Pro gratis i 7 dagar och se hur bildoptimeringsfunktionerna kan förbättra din webbplats.

taggar:

• kod
• bilder