Bildstorlekar för WordPress är mer komplext än du kan tänka dig. Det är viktigt att förstå hur bildstorlekar fungerar i WordPress, vilka standardbildstorlekar som finns och hur du kan definiera anpassade bildstorlekar för att hantera din webbplats effektivt.
Med denna kunskap under bältet kommer du kunna se till att du har rätt typ av bilder i lämpliga storlekar på rätt plats så att du kan få ut det mesta av din strategi för visuellt innehåll.
Dessa taktiker kommer också att förbättra delningsvärdet av dina inlägg, vilket kommer att leda till mer synlighet och trafik. Statistik visar att läsare bara kommer ihåg 10% av textinnehållet de läser efter tre dagar, men denna siffra går upp till 65% om du lägger till visuellt tilltalande bilder i ditt innehåll.
I denna omfattande guide lär du dig allt du behöver veta om bildstorlekar för WordPress.
Nyfiken? Nu sätter vi i gång!
Föredrar du att titta på videoversionen?
Hur WordPress hanterar de bilder du laddar upp
Att ladda upp bilder till WordPress är ganska enkelt, men mycket pågår i WordPress backend när det hanterar dem.
Det första WordPress gör när du laddar upp en bild är att skapa tre olika storlekar av din bild. Det betyder att du får fyra bilder för var och en du laddar upp:
- Miniatyr
- Medium
- Stor
- Ursprunglig Storlek
WordPress skapar alla dessa olika storlekar för att visa dina bilder i lämpligast storlek för varje besökare. Din webbplats kommer alltid att visa rätt bilder för dina läsare baserat på enheten de använder, vilket snabbar upp och förbättrar deras upplevelse på din webbplats.
Du kan alltid redigera dina bilder manuellt för att skapa dessa ytterligare storlekar, men att göra det korrekt i ett verktyg som Photoshop är inget litet projekt. Det kommer att innebära en hel del tråkigt arbete, vilket är anledningen till att WordPress besparar dig besväret.
WordPress bildstorlekar: viktiga saker att komma ihåg
Innan vi går in på de mer tekniska aspekterna av WordPress bildstorlekar bör du känna till ett par saker.
Vi har diskuterat hur WordPress skapar tre standardbildstorlekar för dig, men vad händer om du behöver en annan storlek än WordPress-standarden? Tänk om du vill ha fler storlekar totalt?
Goda nyheter! Du kan göra det enkelt. WordPress låter dig ändra standardbildstorlekar och lägga till så många ytterligare storlekar som du vill. Vi förklarar detta mer detaljerat om en liten stund.
Men innan vi kommer till det borde du veta att det finns specifika krav för att detta ska fungera som du vill.
Ett av dem är att du borde prova att ladda upp dina bilder i den största storleken du kommer att behöva. Medan WordPress kommer att göra den mindre för mindre enheter, kommer det att använda full storlek (originalstorlek) där bilden måste vara som störst.
Antag att du laddar upp en bild som är mindre än den största storleken du har definierat i WordPress. I så fall kommer WordPress inte att visa den speciella bilden i den största storleken korrekt. Dessutom kommer det att bli en märkbar kvalitetsförlust.
Med det sagt måste du också se till att du inte laddar upp bilder som är större än vad den största storleken behöver vara. WordPress kommer aldrig att använda sådana bilder eftersom de är för stora och kommer att äta upp onödigt utrymme på din server.
Således bör du kontrollera storleken på den bild du laddar upp och se till att det är den största storleken den behöver vara innan du laddar upp den till WordPress, men inte större än så.
Var och hur lagrar WordPress dina bilder?
När det gäller din adminpanel lagrar WordPress dina uppladdade bilder i mediabiblioteket. Du kan se alla dina uppladdade bilder genom att sväva med musen över Media och klicka på Bibliotek.
Du kan sortera dem efter medietyp (bild, video, ljud, etc.) och datum. Observera dock att du bara kan sortera bilderna efter datum om du inte har inaktiverat den här funktionen under Inställningar.
Det finns också en sökruta till höger för att hjälpa dig att spåra upp din uppladdade bild. Skriv bara in ett ord som du använde i titeln, bildtexten eller beskrivningen av din bild för att hitta den.
Dina bilder lagras i webbplatsens mappar för uppladdningar (wp-content/uploads/). För att komma åt den här mappen måste du använda en FTP/SFTP-klient. Det kommer att finnas flera underkataloger i din webbplats uploads-mapp som lagrar dina bilder efter uppladdningsdatum (förutsatt att du har lämnat möjlighet att Sortera efter datum påslagen i dina Inställningar).
Du kan också skapa egna mappar för dina mediafiler, men vi rekommenderar att du bara gör det om du anser dig vara en avancerad användare.
Vilka är WordPress standard-bildstorlekar?
När det gäller WordPress och bildstorlekar tittar vi alltid på fyra olika, med din ursprungliga bildfil och de tre olika storlekarna WordPress skapar som standard:
- Miniatyrstorlek: 150px (kvadrat)
- Medelstor: Maxbredd och höjd på 300px
- Stor: Maxbredd och höjd på 1024px
- Fullstor: Den ursprungliga storleken på din bild
Återigen, som vi nämnde tidigare, bör du ladda upp dina bilder i 1024px om du bara planerar att använda dessa standardbildstorlekar. Det gör att dina bilder kan visas korrekt även vid den största storleken, vilket kanske inte är möjligt om din bild är av mindre storlek än den största storleken WordPress använder (vilket är 1024px som standard).
Vad är den perfekta bildstorleken i WordPress?
WordPress-bilder är avgörande för läsarengagemanget. Ungefär som omslaget till en bok kan en speciellt utvald bild erbjuda en förhandsvisning av vad som komma skall i innehållet.
De visas oftast med WordPress-inlägg, men de kan också inkluderas med sidor och anpassade inläggstyper. Och eftersom den utvalda bilden kan visas av sökmotorer och sociala medie-sajter är det viktigt att välja rätt storlek.
Även om det finns olika åsikter om ämnet är den allmänna åsikten att den ideala storleken för utvalda bilder i WordPress ungefär 1200 x 630 pixlar. En bild med dessa mått borde passa din webbplats bra oavsett hur stor eller liten dina läsares skärmstorlekar är.
Det är också värt att notera att för att dina sidor ska passa Google Discover-flödet (en bra källa till ytterligare trafik från Google) säger Google att din WordPress-bildstorlek måste vara minst 1200 pixlar bred.
Men är detta standardstorlek för WordPress utvalda bild?
Det kan komma som en överraskning men WordPress innehåller faktiskt inte en utvald bild-storlek. Istället kommer utvalda bilder som standard återgå till sin ursprungliga uppladdningsstorlek om de inte begränsas av webbplatsens design, eller om du inte väljer en av WordPress andra standardstorlekar (som ”Medium” eller ”Stor”).
Men många WordPress-teman – inklusive WordPress standardtema, Twenty Twenty One – ställer in sina egna anpassade bildstorlekar för utvalda bilder, så var noga med att kontrollera ditt temas inställningar först.
Vad är den perfekta bildstorleken for en WordPress-header?
I likhet med utvalda bilder kan en header-bild ge dina läsare en smygtitt på sidans tema och ton. Även om de inte lika ofta delas över sökresultatsidor eller sociala medier är det fortfarande viktigt för webbplatsens hastighet och integritet att de har rätt storlek.
Eftersom en header ofta är beroende av webbplatsens design kan de variera mycket vad gäller mått och storlek. Det finns inget som passar alla scenarier så det är bäst att ta hänsyn till webbplatsens design och responsivitet innan du väljer din header-storlek för WordPress.
Temautvecklare rekommenderar dock att WordPress-headers borde hålla sig till ett 16:9-förhållande, till exempel:
- 1920 × 1080 pixlar
- 1280 × 720 pixlar
- 1152 × 648 pixlar
Precis som med utvalda bilder ställer WordPress inte in en standardstorlek för header-bilder. Ditt tema kan dock ha ett alternativ för att anpassa headerns storlek genom temainställningarna under menyn Utseende.
Så här ändrar du standardbildstorlekar (och när du skulle behöva göra det)
Medan WordPress standard-bildstorlekar fungerar bra för de flesta användare kan vissa så klart ha annorlunda krav. Du kanske föredrar en något större storlek för dina miniatyrer eller en mindre storlek för de stora bilderna.
Att ändra standardbildstorlekar i WordPress skulle vara meningsfullt om du ofta redigerar de flesta av de bilder du laddar upp eftersom WordPress standardbildstorlekar inte är lämpliga för dina syften.
Innan du lägger till nya anpassade bildstorlekar på standardbildstorlekarna, var medveten om att du kommer lagra många fler bildfiler på din webbplats databas än du behöver. Det kan leda till prestandaproblem för din webbplats och förbrukar mer utrymme än vad som behövs.
Detsamma gäller för bildbaserade webbplatser som måste hålla sig till specifika bildstorlekar. Fotografer, designer och andra som visar tunga bilder vill ha konsekventa storlekar överallt över hela webbplatsen för att skapa ett enhetligt intryck.
På samma sätt kan vissa målsidor också behöva visa särskilda bildstorlekar, och WordPress standardstorlekar kanske inte är lämpliga då. Och en e-butik behöver vanligtvis använda större miniatyrer, som visar mer detaljer.
Det finns gott om andra orsaker till att ändra standardbildstorlekar, men du fattar idén.
WordPress förstår det också, så de låter dig ändra dessa standardvärden.
Steg för att ändra WordPress standardbildstorlekar
Här är steg-för-steg-processen för att ändra standardbildstorlekar i WordPress.
Steg 1: Håll musen över Inställningar och klicka på Media:
Steg 2: Ändra storlekarna till vad du vill genom att redigera siffrorna som vi gjorde nedan:
Steg 3: Klicka på Spara Ändringar längst ner.
Nu borde alla bilder du laddar upp från och med nu vara i dessa nya standardstorlekar.
Vissa handledningar där ute kommer att föreslå att du matar in ”0” för standardbildstorlekar. Vi rekommenderar inte detta även om det kan hjälpa dig att spara på utrymme.
Om du ändrar dessa värden till ”0”, kommer WordPress att använda din fullstora (ursprungliga) bild på alla platser och över alla enheter, vilket skulle leda till en massiv ökning av bandbreddsanvändningen för din webbplats. Vidare skulle detta nästan säkert sakta ner sidladdningstiden för sektioner som visar många av dessa bilder.
Så här lägger du till anpassade bildstorlekar till WordPress
Om du behöver ändra alla dina tidigare WordPress-bilder till dessa nya storlekar kan du använda flera bra plugin, som vi kommer att gå igenom i detalj nedan.
För användare som brukar använda många olika typer av bilder kan det vara viktigt att ha fler bildstorlekar än de tre standardstorlekar WordPress erbjuder.
Standardbildstorlekarna kan räcka för standardtyperna av bilder, men för något som popup-grafik, widgetar, eller slider-bilder kommer du förmodligen att behöva fler bildstorlekar.
Anpassade bildstorlekar ger dig flexibiliteten att förbättra funktionaliteten av din WordPress-sajt och spara massor av tid på att ändra storlek på dina bilder en efter en.
Nu när vi har fastställt det som vår baslinje, låt oss ta en närmare titt på processen med att lägga till dessa anpassade bildstorlekar till din WordPress-sajt.
Det finns två alternativ här. Det första är att använda ett plugin som hanterar allt för dig med bara några klick. Det andra är det manuella sättet att lägga till de nödvändiga kodsträngarna i webbplatsens filer.
Låt oss ta plugin-metoden först.
Lägg till anpassade bildstorlekar med hjälp av Image Regenerate & Select Crop
Pluginet Image Regenerate & Select Crop gör mer än Regenerate Thumbnails (vi diskuterar det nedan), vilket möjliggör mer anpassning och funktionalitet.
Utöver att låta dig ändra standardbildstorlekar gör detta plugin det också möjligt att regenerera alla befintliga bilder för att matcha dina föredragna bildstorlekar, ställa in standardbeskärningsalternativ för bilder, och regenerera miniatyrer.
När det är installerat och aktiverat kan du skapa så många nya anpassade bildstorlekar som du vill via WordPress vanliga Inställningar > Media-sida.
Lägg till anpassade bildstorlekar manuellt
Även om det är en relativt enkel process är det allra första du bör göra att skapa en säkerhetskopia av din webbplats om något går fel när du gör dessa justeringar. När säkerhetskopieringen är klar, gå över till adminpanelen för din WordPress-sajt.
Där svävar du med musen över Utseende i menyalternativen och välj Redigerare (detta kan heta Temaredigeraren i vissa fall).
Hitta sedan functions.php-filen och kontrollera om följande kod redan finns där (använd sökfunktionen för att hitta den snabbt). Om den redan finns där, behöver du inte göra någonting.
Om den inte finns där måste du lägga till den här strängen i filen:
add_theme_support( 'post-thumbnails' );
När du har lagt till den här koden klickar du på Uppdatera fil längst ner för att aktivera funktionen som låter dig skapa anpassade bildstorlekar.
Nu är det dags att lägga till koden för de specifika anpassade bildstorlekar du vill ha. Leta efter strängen ”add_image_size” i din functions.php-fil eftersom det är där du måste göra dina ändringar:
add_image_size( 'my-custom-image-size', 800, 640 );Specifikt bör du uppdatera det som finns inuti de enkla citattecknen med det du vill kalla din nya anpassade bildstorlek. Vi föreslår att det hålls enkelt och beskrivande (t.ex. ”main-post-image”).
När du har tagit hand om namnet måste du deklarera själva bildstorlekarna. Det första siffervärdet är bildbredden, och den andra är bildhöjden.
Här är en skärmdump som visar vår testkod som läggs till i functions.php-filen:
Att förstå beskärning
När en bild görs mindre utan beskärning är det bara en krympt version av originalet. Men när den är ”beskuren” eller klippt tas den beskurna delen bort från den färdiga bilden.
Det är precis som att fysiskt klippa upp en bild. Om du tar din sax till ett porträtt och klipper bort allt under personens axlar, har du ”beskärt” den bilden. Det fungerar på samma sätt digitalt.
Syftet är att minska en bilds filstorlek, eftersom beskärning inte är rätt val. Du skulle då ta bort element som du kanske vill behålla samtidigt som du fortfarande har en stor filstorlek. Med det sagt kan beskärning vara bra för bildstorlekar som måste passa ett specifikt mått perfekt, som utvalda bilder eller profilbilder.
Motiven kan bli för små för något som utvalda bilder. De borde fortfarande få den exponering de behöver när de ändras utan beskärning. Så räkna ut vad som fungerar bäst för de olika typerna av bilder du använder och ställ in beskärningsfunktionen i enlighet därmed.
När du lägger till anpassade bildstorlekar kan du få WordPress att automatiskt beskära bilderna baserat på den storlek du ställer in och den ursprungliga storleken. Du måste lägga till ”true” I slutet av koden.
Återigen, här är vårt ovanstående exempel med beskärningsfunktionen aktiverad.
add_image_size( 'name-for-your-custom-image', 800, 640, true );Men om du inte vill beskära bilderna kan du antingen lägga ”false” i stället för ”true” eller utelämna båda. Att inte ställa in någon av dem gör att koden automatiskt antar att alternativet är ”false”. Därmed kommer WordPress inte att beskära dina bilder.
Lägga till en anpassad bildstorlek till ditt tema
När du har skapat de anpassade bildstorlekar du behöver, måste du också uppdatera koden i ditt tema. Att göra detta kommer att göra att ditt tema visar dessa anpassade bildstorlekar som du vill ha.
Om du är nybörjare på att redigera kod, se till att skapa en säkerhetskopia av din webbplats igen innan du utför detta.
Nu måste du hitta din temafil i post loop och lägga till följande kod till den:
the_post_thumbnail( 'your-specified-image-size' );För att hitta den här filen, klicka på Temaredigeraren under Utseende. Leta efter index.php-filen här – det här är temafilen där den post loop finns som du behöver redigera.
När du har hittat den, lägg till koden som nämns ovan enligt bilden nedan:
Återigen, det vore bäst om du ersatte den ”new-homepage-feature”-delen med namnet på den anpassade bildstorleken du har skapat.
När du har lagt till den här koden och uppdaterat filen ser du den anpassade bildstorleken i mediebiblioteket. Ladda upp en ny bild för att prova.
Uppdatera gamla miniatyrer
Att skapa och lägga till anpassade bildstorlekar känns bra men det ger dig en till öppen uppgift: hur är det med alla gamla bilder du redan har laddat upp?
Oroa dig inte för det – några bra WordPressplugin passar mycket bra för denna uppgift! Låt oss se hur de kan hjälpa dig att ta hand om dina gamla miniatyrer.
Pluginet Regenerate Thumbnails
Regenerate Thumbnails låter dig automatiskt ladda upp bilderna i de nya storlekarna, inklusive alla anpassade bildstorlekar du har lagt till.
För att installera det, håll muspekaren över Plugin i menyn och klicka på Lägg till nytt. Skriv sedan ”Regenerate Thumbnails” i sökrutan.
Installera Regenerate Thumbnails genom att klicka på Installera Nu.
När installationen är klar klickar du på Aktivera för att börja använda det.
Sväva sedan över Verktyg till vänster och klicka på Regenerate Thumbnails:
Du kan klicka på Regenerera miniatyrer för alla [#] bilagor för att producera nya bildstorlekar för alla dina gamla bilder också.
Som du kan se från bilden ovan kommer Regenerate Thumbnails också att lista alla bildstorlekar som för närvarande är aktiva på din webbplats.
Du kan hitta några bildstorlekar du inte kände till. Ofta skapas dessa av plugin, speciellt om de är till för att förbättra utseendet, designen eller funktionaliteten på din webbplats.
Att använda WordPress inbyggda bildstorleksredigerare
Som vi tryckt på tidigare bör du bara skapa anpassade bildstorlekar som du använder ofta. För bildstorlekar du planerar att använda endast vid sällsynta tillfällen, är det mer logiskt att manuellt redigera bildstorlekar med hjälp av WordPress inbyggda bildstorleksredigerare.
Vi ger dig en snabb genomgång som förklarar hur du snabbt och enkelt kan använda den inbyggda redigeraren för att redigera bildstorlekar.
Klicka först på Media som tar dig till mediebiblioteket. Klicka sedan på bilden vars storlek du vill justera.
Klicka sedan på Redigera Bild nedanför bilden:
Du ser den aktuella bildstorleken och kan justera den här. Lägg bara in den bildstorlek du vill ha och klicka sedan på Skala, och du är klar..
Storleksjusteringen sparar automatiskt så fort du klickar på Skala. Om du inte gillar den nya bildstorleken av någon anledning kan du alltid återgå till den ursprungliga storleken med hjälp av Återställ originalbild (precis under fältet för bildstorlek).
Redigera bilder i WordPress Gutenberg
Om du använder Gutenberg, kan du snabbt redigera bildstorleken på dina bilder när du lägger till dem under skapandet av ett inlägg.
Som du kan se i bilden ovan, när du laddar upp en bild när du skapar ett inlägg i Gutenberg kan du välja de befintliga bildstorlekarna eller ändra bildstorleken från höger inom inläggsalternativet.
Om du har lagt till dina nya anpassade bildstorlekar till din temafil hittar du dem alla i rullgardinsmenyn för bildstorlek.
Du kommer också att kunna ändra bildstorlek med hjälp av fältet nedanför den. Allt du behöver göra är att mata in önskad storlek i fälten, och bilden ändras automatiskt till dina nya specifikationer.
Optimera dina bilder
Ingen bildrelaterad guide är någonsin komplett utan att prata om bildoptimering. Vi har diskuterat optimering av bilder i detalj, men några extra snabba tips kan inte skada.
När allt kommer omkring, när du lägger till anpassade bildstorlekar måste du veta hur du optimerar dina bilder för att säkerställa att de inte påverkar webbplatsens prestanda eller förbrukar mer serverresurser än de behöver.
Med det sagt, här är några snabba tips som hjälper dig att komma i gång med bildoptimering.
Bestäm filtyp
Att helt enkelt välja rätt filtyp för dina bilder kan minska deras storlek avsevärt. Medan det finns många olika typer av bildfiler är de allra flesta antingen JPEG eller PNG.
JPEG är lätt vinnaren när det gäller färgglada bilder. Du kan också ytterligare komprimera JPEG-filer för att minska filstorleken med bara en mycket liten minskning av kvaliteten (om du gör det rätt).
Å andra sidan är PNG vanligtvis ett bättre alternativ för teckningar, text, de flesta skärmdumpar och grafik.
Ändra storlek på bilder
Att ändra storlek på bilder är ett snabbt och enkelt sätt att minska filstorleken på dina bilder. Som tumregel bör du se till att alla bilder på din webbplats bara är så stora som de behöver vara.
Om webbplatsens maximala bredd är 1200px är det ingen poäng att ha en enda bild på din webbplats med en bredd som är större än maximalt 1200px.
Vi har också nämnt vikten av att inte skapa nya anpassade bildstorlekar om du inte behöver, så kom ihåg det också.
Dra nytta av destruktiv kompression
Destruktiv kompression är ett bra sätt att minska filstorleken ytterligare när du redan har optimerat dina bilder med andra metoder.
Det innebär att bli av med vissa bilddata, ta bort det som inte skulle göra stor skillnad för bildkvaliteten men kan bidra till att minska filstorleken avsevärt.
Använd latladdning
Latladdning hjälper dig att prioritera laddning av bilder på webbplatsens sidor. Den laddar bilder allteftersom besökarens bläddrar nedför sidan. Det betyder att bilderna längst upp laddas omedelbart, men allt längre ner laddas inte förrän användaren bläddrar vidare.
Det finns mer att säga om det, men du hittar allt i vår guide för bildoptimering, så låt oss i stället hoppa direkt till vissa bildoptimeringsplugin du kan använda.
Bildredigeringsplugin för WordPress
Det fina med att använda dessa plugin är att du kan utföra avancerad bildoptimering med bara några klick utan att behöva fiffla med avancerade verktyg eller kod. Dessutom är de flesta av dessa plugin gratis, optimerar ett visst antal bilder eller använder grundläggande optimeringsfunktioner.
- Imagify: Imponerande anpassad nivå av komprimering och andra bildoptimeringsfunktioner
- Kraken: Användbar förlustfri komprimering, men bara om du köper premiumversionen
- TinyPNG: Stöder både förstörande komprimering och fungerar med en mängd olika bildtyper
- Optimole: För CDN och latladdning, som är mycket effektiva sätt att optimera dina bilder
Sammanfattning
Du kan nu allt som finns att veta om WordPress bildstorlekar och hur du får ut det mesta av de funktioner och anpassning som WordPress erbjuder i detta avseende. Det borde nu vara mycket lättare att optimera webbplatsens prestanda och funktionalitet nu när du vet hur du hanterar dina WordPressbilder från början till slut.
Du kan skapa egna bildstorlekar och hantera dem antingen direkt via temats kod eller med hjälp av ett plugin som är byggt för den specifika uppgiften. Kom ihåg att uppdatera dina gamla miniatyrer när du planerar att uppdatera en bild – också en lätt uppgift, tack vare de hjälpsamma plugin vi har listat ovan.
Utelämnade vi något? Lämna en kommentar nedan om du har problem med att förstå något om bildstorlekar i WordPress!
Lämna ett svar