Så här visar du images i full storlek i WordPress (4 enkla sätt)

Sedan version 5.3 WordPress krymper automatiskt stora images för att förbättra website-prestandan. Det kan dock finnas tillfällen då du behöver visa högkvalitativa images i full storlek.

När vi till exempel måste visa upp högupplösta fotografier eller detaljerade produktbilder på våra WordPress-webbplatser, upptäcker vi att det är viktigt att visa dem i full storlek. Detta är också särskilt viktigt för onlinebutiker där bildkvaliteten kan göra eller bryta en försäljning.

I denna poradnik visar vi dig hur du visar bilder i full storlek på en WordPress-webbplats.

När ska du visa images i full storlek i WordPress?

Ett exempel på när du kan behöva visa bilder i full storlek i WordPress är om du driver en fotoportfölj eller en butik för grafisk design. Om du säljer ditt arbete som digitala nedladdningar, kanske du vill visa stora bilder för att visa potentiella klienter deras verkliga kvalitet.

Även om du run en WooCommerce store för fysiska ecommerce produkter, kan du fortfarande behöva visa några fullstora images. Du kan använda en produkt thumbnail-bild, som användare sedan kan clicka på för att se bildens originalstorlek och zooma in på objektets details.

Med det sagt kan stora images orsaka många problem. De kan göra din website långsammare, vilket i sin tur kan påverka sökmotorsoptimeringen (SEO) negativt.

Av denna anledning resizer WordPress nu automatiskt stora images när du uploadar dem. Om en image är större än 2560 pixlar i höjd och/eller bredd, kommer WordPress att proportionellt skala ner den till en mindre storlek, med bibehållande av originalbildens dimensioner.

De flesta hosting providers för WordPress limiterar också filstorleken som du kan uploada till mediabiblioteket. Detta kan vara ett hinder om du har många stora images som ska displayed.

Om du vill ändra limiten för storleken kan du läsa vår guide om hur du ökar den maximala storleken för uppladdare av filer i WordPress.

Låt oss nu se hur du kan visa images i full storlek på din WordPress website. Vi har 4 metoder för att göra detta. Vissa kan fungera bättre för enstaka images, medan andra är bättre för flera. Använd bara länkarna under för att hoppa direkt till din föredragna metod:

Metod 1: Använd URL:en för bilden i full storlek (bäst för enstaka images)

Om du bara vill visa en eller två stora bilder på din webbplats kan du helt enkelt lägga till dem med hjälp av originalbildernas webbadresser.

När du uploadar en image som överskrider de maximala dimensionerna kommer WordPress att skala upp den bilden för att skapa en mindre version. Den ursprungliga, större imagen förblir dock intakt.

Först går du till Media ” Bibliotek från WordPress dashboard. Se till att ändra din view till ”List view”.

Därefter hoverar du musen över din stora image. Leta efter den vars filnamn har ”-scaled” i slutet.

När knappen ”Copy URL” visas, clickar du på den.

När du har gjort det kan du klistra in bildens URL i webbläsarens adressfält och ta bort ”-scaled….” från slutet av bildens URL. Var noga med att ej ta bort formatet på bilden (.png, .jpg, .gif, och så vidare).

Så om URL:en för den skalade bilden är http://example-website.local/wp-content/uploads/2024/03/example-image-scaled.jpg, är URL:en för din ursprungliga image http://example-website.local/wp-content/uploads/2024/03/example-image.jpg.

När du besöker den URL:en kommer du att se imagen i dess ursprungliga dimensioner.

Nu kan du lägga till imagen var som helst på din website. Eftersom vi lägger till bilden med hjälp av en länk måste du embedda den i stället för att välja den från mediabiblioteket.

För att göra detta öppnar du Gutenbergs blockredigerare för det inlägg eller den sida där du vill använda bilden. Klicka sedan på ikonen ”+ Lägg till block” för att lägga till ett nytt block. Här kan du välja Imagely-blocket.

När du har gjort det klickar du på ”Insert from URL”.

Du kan sedan helt enkelt klistra in webbadressen till bilden i full storlek eller stor storlek i fältet och trycka på ”Enter” på tangentbordet.

När du är redo att gå live klickar du bara på ”Publicera” eller ”Uppdatera”. Du kan nu besöka den här sidan eller det här inlägget för att se bilden i full storlek i działanie.

Om du vill add to fler images i full storlek upprepar du samma procedur som beskrivs ovan.

Metod 2: Inaktivera skalning av images i WordPress (rekommenderas för flera filer)

Om du vill visa flera stora images är det bäst att inaktivera funktionen för skalning av image.

Ett sätt att göra detta är att lägga till kod i functions.php-filen i ditt theme. Om det är första gången du infogar kod i WordPress kan du först läsa vår guide om hur du lägger till customize-kod i WordPress.

Med detta sagt, om du vill göra hela upplevelsen mycket säkrare, föreslår vi att du använder WPCode. Det är det bästa code snippet pluginet för nybörjare, och det är ett mycket säkrare sätt att add to kod utan att oavsiktligt röra till dina theme-filer.

Dessutom, om du uppdaterar ditt WordPress-tema, kommer koden inte att skrivas över, och den kommer att förbli intakt i WPCode.

För att börja måste du installera och aktivera WordPress plugin på din adminpanel. När du är klar, gå till Code Snippets ” Add Snippet.

Här väljer du ”Add Your Custom Code (New Snippet)” och klickar på knappen ”Use snippet”.

Skriv nu in en titel för det anpassade code snippet. Detta kan vara vad som helst som hjälper dig att identifiera snippet i WordPress dashboard.

Därefter öppnar du dropdown ’Code Type’ och väljer ’PHP Snippet’.

I code editor, add to följande code snippet:

add_filter( 'big_image_size_threshold', '__return_false' );

När du är klar rullar du bara till ”Insertion” section. WPCode kan add your kod till olika locations, till exempel efter varje post, endast front-end eller endast admin.

För att använda det custom PHP snippet över hela din WordPress blogg eller site, klicka på ”Auto Insert” om det inte redan är valt. Öppna sedan dropdown för ”Location” och välj ”Run Everywhere”.

Efter det är du redo att rulla högst upp på vyn och klicka på ”Inaktiverad” toggle för att ändra den till ”Aktiv”. Slutligen klickar du på ”Save Snippet” för att göra PHP-snippet live.

Om du nu uploadar en stor bild kommer WordPress att använda de ursprungliga dimensionerna i stället för att resize bilden. På så sätt har du alltid tillgång till en image i full storlek.

Metod 3: Inaktivera skalning av image med ett plugin (för kompletta Beginnare)

Om du tycker att kodmetoden är för skrämmande, kan du inaktivera skalning av image med Perfect Images. Detta gratis plugin allow you to create additional image sizes in WordPress, update your media metadata, and more.

Först måste du installera och aktivera pluginet Perfect Images. För mer detaljer om hur du installerar ett plugin, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Efter aktivering, heada till Meow Apps ” Perfect Images och kontrollera boxen Inaktivera bredvid ’Image Threshold’.

WordPress kommer nu inte längre att add to attributet ”-scaled” till någon image, så du kan uploada stora media files och WordPress kommer att visa dem i full storlek som standard.

Metod 4: Öppna WordPress Images i full width i en Lightbox (Bäst för Galleries)

Det sista alternativet är att lägga till en lightbox med bilder i full storlek på din webbplats, vilket är perfekt om du skapar ett bildgalleri, en slider eller en fotoportfölj.

Denna metod allow you att visa mindre thumbnails images när page först hämtar. Besökarna kan sedan clicka på en thumbnail för att se en fullstor image i en popup.

Tänk bara på att du måste inaktivera skalning av images i förväg med hjälp av någon av metoderna ovan. Om du inte gör det kommer din lightbox att visa den nedskalade versionen av dina stora images.

När du har inaktiverat skalning av images är det dags att skapa ett gallery. Vi rekommenderar att du använder Envira Gallery, eftersom det är det bästa pluginet för bildgallerier för WordPress på marknaden.

När du har installerat och aktiverat Envira Gallery kan du följa vår Step-by-Step tutorial om hur du lägger till ett gallery med lightbox-effekt i WordPress.

Vill du använda ett annat plugin för gallery? Kolla in NextGEN Gallery. Under våra tester fann vi att detta plugin är det bästa för Pro-fotografer eller konstnärer, eftersom det erbjuder massor av funktioner för att visa och sälja dina images professionellt.

Bonus tips: Optimera dina Images för bättre hastighet och sökmotorsoptimering

Att displayed images i full storlek på WordPress kan vara bra för att ge dina website besökare en tydligare view av dina bilder. Med det sagt kan dessa bilder också sakta ner din websites hämtartider och påverka din sökmotorsoptimering negativt.

Därför rekommenderar vi att du optimerar dina images för att öka prestandan på din WordPress website.

Du kan till exempel komprimera storleken på imagen för att göra den mindre och snabbare att hämta. EWWW Image Optimizer är ett bra alternativ, eftersom det stöder en mängd olika format som PNG, JPEG, WebP, SVG och PDF.

En annan metod för att optimera images är att förhindra att WordPress automatiskt genererar standard WordPress-bildstorlekar.

När du uploadar en image till WordPress skapas flera kopior med olika valfria alternativ för storlek. Detta kan vara användbart när du behöver visa imagen som en thumbnail eller en medelstor storlek av originalfilen.

Om du inte använder dem kan de dock ta upp mycket plats i ditt förråd, så vi föreslår att du tar bort dem om det behövs.

Om du vill ha fler tips och tricks för optimering av images kan du kontrollera dessa guider:

• Bra WordPress tillägg för hantering av images (Updated)
• Så här optimerar du enkelt image-filer för webben utan att förlora kvalitet
• Beginner’s Guide to Image SEO – Optimera images för search engines
• Hur man enkelt lazy loadar images i WordPress

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du visar bilder i full storlek i WordPress. Du kan också gå igenom vår przewodnik om hur du kan förhindra bildstöld i WordPress och hur du lägger till text ovanpå en bild i WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.