Så optimerar du bilder i Elementor

Ett foto kan se litet ut i Elementor och ändå kräva en stor nedladdning. Redigeraren styr utseendet, medan WordPress, webbhotellet och optimeringstillägg påverkar vilken fil besökaren får. Den här guiden förklarar samspelet för bildwidgetar, containerbakgrunder och sidans första stora bild.

Välj lämplig bildupplösning i Elementor

Markera en Image-widget och öppna fliken Content. Leta efter Image Resolution, som i vissa widgetar eller äldre versioner heter Image Size. Här väljer du en WordPress-storlek som Medium, Large eller Full. Width och Max Width styr separat hur mycket plats bilden tar i layouten. Elementors dokumentation för Image-widgeten beskriver inställningarna.

Full betyder inte bara ”fyll kolumnen”. Inställningen väljer bildbilagan i full storlek som källa. För en stor uppladdning kan WordPress redan ha skapat en nedskalad fullstor version, så det är inte alltid kamerans orörda original. WordPress förklarar detta i sin referens för generering av bildstorlekar.

Webbläsaren påverkar också valet. Om den publicerade bilden har srcset och sizes kan webbläsaren välja bland tillgängliga filer utifrån layout, pixeltäthet och sin egen laddningslogik. Full garanterar därför inte att alla laddar den största filen. En lämplig widgetupplösning och en rimligt dimensionerad uppladdning är ändå bättre än att enbart lita på automatiken.

Måtten är exempel, inte krav från Elementor. Registrerade WordPress-storlekar beror på inställningar, tema och tillägg. Bilden behöver också tillräcklig höjd för beskärningen. Dubbel visningsbredd kan hjälpa på skärmar med hög pixeltäthet, men det är en avvägning mellan kvalitet och filstorlek, inte ett krav att exportera alla bilder med dubbla mått.

Custom kan vara användbart när standardstorlekarna inte passar. Kontrollera beskärningen och att den publicerade bilden fortfarande erbjuder lämpliga responsiva versioner. Custom förbättrar inte alltid leveransen och stänger inte heller alltid av responsiva bilder.

Att ändra Style → Width eller Max Width skalar inte om och komprimerar inte den sparade filen. Responsiva bildangivelser kan hjälpa webbläsaren att välja en mindre version, men en minskad visningsbredd bevisar inte att färre data hämtas.

Optimera containerbakgrunder för mobilen

En bild som läggs till via en containers eller sektions Style → Background blir normalt en CSS-bakgrund. Till skillnad från HTML-bilder har den inga attribut för srcset eller sizes. Om inget annat leveranssystem erbjuder alternativ kan mobiltelefonen därför ladda samma bakgrund som datorn.

Avgör först om bilden hör hemma som bakgrund. En dekorativ textur eller stämningsbild kan passa. Produktfoton, diagram och bilder med viktig information fungerar oftast bättre som Image-widgetar, med alternativtext och responsiva bildversioner.

Om bakgrunden behöver en annan komposition i mobilen:

1. Markera containern eller sektionen och öppna Style → Background.
2. Byt till mobilens brytpunkt med bakgrundsbildens responsiva kontroll, om din redigerare erbjuder den.
3. Välj en mobilkopia beskuren efter containerns proportioner. En hög huvudbildsyta kan behöva stående format, medan en låg banner fortfarande kan behöva liggande.
4. Välj Cover när bilden ska fylla ytan utan att förvrängas. Cover behåller proportionerna och beskär det som hamnar utanför containern.
5. Justera bakgrundens position så att motivet syns. Förhandsgranska både brytpunkten och närliggande skärmbredder.

Kontrollera containerhöjd, textkontrast och bildförfrågan på den publicerade mobilsidan. En annan beskärning kan förbättra kompositionen, men minskar överföringen bara om mobilversionen faktiskt ersätter den större filen. Att dölja en separat datorsektion garanterar inte att dess bilder aldrig hämtas.

Ladda den viktigaste huvudbilden utan dröjsmål

Largest Contentful Paint (LCP) mäter när det största synliga innehållselementet visas i den första skärmvyn. Det kan vara en huvudbild, bakgrundsbild eller textyta. Identifiera det faktiska LCP-elementet i en prestandarapport innan du ändrar bildprioriteringar.

Uppskjuten laddning, lazy loading, passar bilder längre ner på sidan. För en viktig huvudbild kan den fördröja starten eftersom webbläsaren först avgör när bilden behövs. Googles guide till LCP-optimering rekommenderar att LCP-bilden kan upptäckas tidigt och inte laddas med lazy loading.

• Börja med Elementors automatik: Aktivera Optimized Image Loading i prestandainställningarna nedan och kontrollera den publicerade sidan.
• Kontrollera andra system för lazy loading: Cache- eller bildoptimeringstillägg kan påverka resultatet. Om ett tillägg fördröjer huvudbilden, undanta bilden eller elementet i det tillägget.
• Skilj på direkt laddning och prioritet: En HTML-bild utan lazy loading kan börja laddas normalt. loading="eager" begär uttryckligen detta, medan fetchpriority="high" är en separat prioritetssignal. Om alla bilder får hög prioritet försvinner nyttan.
• Granska huvudbilder som är bakgrunder separat: De använder inte bildelementets laddningsattribut. Om bakgrunden är LCP-elementet och hämtningen börjar sent, undersök när CSS eller laddningsskriptet gör bildadressen tillgänglig. Mindre bildmått löser inte den fördröjningen ensamt.
• Utvärdera bildspel högst upp: En enda statisk bild är lättare att prioritera. Behåller du ett bildspel, kontrollera om dolda bilder konkurrerar med den första synliga under laddningen.

Reservera bildens utrymme före laddningen

Cumulative Layout Shift (CLS) mäter oväntade förflyttningar av synligt innehåll. Om webbläsaren inte vet hur mycket plats bilden behöver kan text och knappar flytta sig när den visas. Bildmåtten hjälper den att reservera utrymme.

1. Behåll bredd- och höjdattribut: WordPress normala bildkod innehåller dem vanligtvis. De anger proportionerna och kan fungera tillsammans med responsiv CSS.
2. Definiera bildytan: Reservera utrymme för enhetligt beskurna kort med lämpligt bildförhållande eller uttryckliga layoutmått. Använd widgetens kontroller eller CSS aspect-ratio vid behov. Om bilden ska fylla en fast ram bevarar object-fit: cover proportionerna under beskärningen.
3. Prova mallar med olika innehåll: Förhandsgranska inlägg med liggande, stående och saknade utvalda bilder i Theme Builder eller Loop Grid. Ge kortet en förutsägbar bildyta och välj en reservbild om mallen behöver det.

En CSS-bakgrund ger inte containern någon naturlig höjd. Utrymmet bestäms av layout, innehåll, utfyllnad eller minsta höjd. Kontrollera dessa inställningar vid varje brytpunkt i stället för att förvänta dig att bakgrundsfilen håller sektionen öppen.

Kontrollera gallerier, karuseller och ljuslådor var för sig

Ett galleri ska både ge en kompakt överblick och visa tillräckligt med detaljer när någon öppnar en bild. Det kan kräva olika filer.

• Välj upplösning efter den synliga bilden eller kortet: En karusell med fyra små bilder behöver inte samma upplösning som en enda bild över hela bredden. Kontrollera mobilen också, där färre samtidiga bilder kan göra varje bild bredare.
• Skilj på förhandsvisning och förstoring: Välj lämplig widgetupplösning för rutnätet och ställ in Media File-länkar samt Lightbox om besökaren behöver en större vy. Optimera även den större filen. Kontrollera förfrågningarna före och efter öppning eftersom förladdning kan variera.
• Granska loopmallen: Justera Featured Image-widgeten i själva loopobjektet för arkivkort och Loop Grids. Upprepade överdimensionerade bilder kan göra hela arkivsidan tung trots små kort.

Välj ett format som passar bilden

Jämför format med samma mått och en kvalitet du faktiskt skulle publicera. Det finns ingen fast procentuell besparing för alla bilder.

• WebP: En bra utgångspunkt för foton och många illustrationer. Stöder förstörande och förlustfri komprimering samt genomskinlighet. Prova JPG till WebP eller PNG till WebP och granska små detaljer och kanter.
• JPG: Praktiskt för foton när någon annan del av arbetsflödet kräver det. Justera kvaliteten genom att jämföra resultat, inte genom att behandla en viss procentsats som universell.
• PNG: Användbart för förlustfri grafik, skärmbilder och arbetsflöden som kräver formatet. Genomskinlighet i sig kräver inte PNG framför WebP. PNG-foton är ofta mycket större än lämpliga exporter med kvalitetsförlust.
• AVIF: Värt att jämföra för foton om WordPress, webbhotellet och optimeringsflödet stöder det. Prova både bearbetning efter uppladdning och den publicerade leveransen innan hela biblioteket konverteras.
• SVG: Passar vektorlogotyper och ikoner. Använd betrodda källor och följ Elementors anvisningar för SVG-uppladdning, inklusive filrensning och försiktighetsåtgärder.

Vår guide till bildformat för webben förklarar fördelar och begränsningar mer ingående.

Förbered varje bild för sin plats på sidan

Spara originalet separat och exportera en webbversion. Då förblir även fullstorleksfilen hanterbar, vilket är viktigt för bakgrunder och bilder som öppnas från gallerier.

1. Mät största avsedda visningsstorlek: Kontrollera dator och mobil. En bild bredvid text på datorn kan bli bredare när den fyller en hel rad på surfplatta.
2. Beskär efter layouten: Ta bort onödigt utrymme med beskärningsverktyget utan att förlora motivet. Lämna plats för eventuell text ovanpå bilden.
3. Ändra storlek på en kopia: Jämför lämpliga mått med verktyget för bildstorlek. Förstora inte ett litet original bara för att nå en förinställd bredd.
4. Komprimera och kontrollera: Använd bildkomprimeraren och jämför exporten i avsedd visningsstorlek. En huvudbild på 100–200 kB eller en innehållsbild under 100 kB kan vara en utgångspunkt. Detaljer, mått och sidans totala datamängd avgör vad som är rimligt.
5. Namnge och beskriv: Använd ett beskrivande filnamn som office-reception.webp. Ge betydelsebärande bilder alt-text som förklarar deras funktion; dekorativa bilder behöver normalt tom alt-text. Följ Googles riktlinjer för bild-SEO utan att fylla något av fälten med sökord.

Om ett tillägg optimerar filen igen efter uppladdning, jämför den slutligen levererade bilden. Upprepad förstörande komprimering kan skada fina strukturer och text även när varje enskild kvalitetsinställning verkar rimlig.

Kontrollera Elementors prestandainställningar för bilder

Enligt Elementors aktuella dokumentation finns inställningarna i WordPress under Elementor → Editor → Settings → Performance. Äldre installationer kan ha en annan menystruktur. Den officiella guiden till prestandainställningar skiljer på flikarna Performance och Features.

• Optimized Image Loading: Hjälper till att prioritera den troliga LCP-bilden och hanterar lazy loading längre ner. Se Elementors guide till laddningsoptimering. Kontrollera resultatet, särskilt när andra tillägg också ändrar bildernas HTML-kod.
• Lazy Load Background Images: Skjuter enligt Elementors dokumentation upp bakgrundsbildernas laddning, utom den första. Kontrollera att bakgrunden överst på din faktiska sida laddas i tid.

Gör en ändring i taget, töm berörda cacheminnen och testa den publicerade sidan. Inställningarna påverkar laddningen men ersätter inte lämpliga mått eller komprimering av filerna.

Kontrollera den publicerade sidan

Börja med att granska utseendet som utloggad: är beskärningen rätt, är texten läsbar och förblir layouten stabil när bilder visas? Undersök leveransen närmare om en bild fortfarande är tung, suddig eller långsam.

1. Öppna den publicerade sidan i ett privat fönster. Öppna utvecklarverktygen, välj Network, filtrera på Img och aktivera Disable cache medan verktygen är öppna.
2. Ladda om och sortera bildförfrågningar efter överförd storlek. Börja med de största filerna och bilder som syns direkt.
3. Kontrollera adress och förhandsvisning för att hitta bildens verkliga mått. Jämför med visningsstorlek och pixeltäthet. En 2400-pixelsfil i ett 350-pixelskort bör undersökas; 700 pixlar kan vara lämpligt på en 2×-skärm.
4. Granska HTML-bildens srcset och sizes om webbläsaren ständigt väljer för stora filer. Kontrollera laddnings- och prioritetsattribut på själva <img>-elementet, inte bara widgeten runt det.
5. Byt till mobilemulering före en ny omladdning och kontrollera vilka bakgrunds- och bildversioner som hämtas. Bekräfta utseendet på en riktig telefon också.

Kör PageSpeed Insights före och efter ändringen under jämförbara förhållanden. Titta på LCP-elementet och bildrelaterade resultat i stället för bara totalpoängen. En liten huvudbild som börjar laddas sent har ett annat problem än en stor bild som börjar direkt.

Om en gammal bild finns kvar, kontrollera först widgetens filval och brytpunkter. Töm sedan relevanta sid-, optimerings- och CDN-cacheminnen. Om gammal Elementor-CSS pekar på den gamla bakgrunden, använd funktionen för att återskapa filer eller CSS under Tools; namnet varierar mellan versioner. Att återskapa CSS skapar inte saknade WordPress-miniatyrstorlekar.

Exempel: en bild bredvid en textkolumn

Anta att ett teamfoto från början är 4800 × 3200 pixlar och 5,4 MB. Kolumnen är ungefär 550 pixlar bred på datorn, men bilden fyller en hel rad vid surfplattans brytpunkt.

1. Kontrollera den bredaste placeringen: Om bilden blir cirka 700 pixlar bred på surfplattan, använd den bredden när du jämför exporter i stället för enbart den smalare datorkolumnen.
2. Förbered beskärning och mått: Om 4:3 passar kompositionen, jämför 1000 × 750 och 1400 × 1050 pixlar. Kontrollera ansikten och andra viktiga detaljer i slutlig visningsstorlek.
3. Jämför komprimering: Prova WebP med måttlig kvalitet och granska resultatet. Anteckna verklig filstorlek; ett detaljerat gruppfoto kan kräva mer data än ett enkelt porträtt med samma mått.
4. Ställ in widgeten: Ladda upp vald export, lägg till lämplig alt-text och välj Image Resolution. För en 1400-pixelsbild kan Full behövas för att den större versionen ska finnas tillgänglig. Kontrollera sidans responsiva bildfiler.
5. Kontrollera resultatet: Granska datorns och mobilens förfrågningar, skärpa och layoutstabilitet. Längre ner kan lazy loading passa; som LCP-bild ska fotot laddas snabbt.

Lös vanliga bildproblem i Elementor

Varför ser bilden suddig ut?

Kontrollera widgetens Image Resolution, originalets mått och filen som webbläsaren faktiskt väljer. En 300-pixelsminiatyr blir mjuk i en 600-pixelskolumn, men högre upplösning återställer inte detaljer som saknas i originalet. Kontrollera också komprimering och beskärningar som förstorar en liten del. Se vår guide till suddiga webbplatsbilder.

Varför saknas mobilbakgrunden eller är fel beskuren?

Kontrollera bilden vid mobilens brytpunkt, ärvda inställningar, synlighet och containerhöjd. Cover fyller containern genom att beskära. Om motivet försvinner, ändra position eller beskärning. Proportionerna ska inte förvrängas. Om filen inte laddas alls, kontrollera förfrågan efter fel innan du ändrar beskärningen.

Varför syns inte bildändringar på den publicerade sidan?

Bekräfta att rätt widget, mall och brytpunkt uppdaterades. Kontrollera bildadressen för att skilja en gammal fil från gammal styling. Töm berörda cacheminnen och återskapa Elementors CSS om den fortfarande pekar på föregående bakgrund. Upprepade uppladdningar utan att hitta orsaken kan skapa onödiga kopior.

Vanliga frågor

Ska jag alltid undvika Full?

Nej. Full kan passa en fil som redan förberetts för sin plats. Kontrollera källans mått, responsiva versioner och den nedladdade filen. Full är inte ett sätt att fylla kolumnen; det styrs av layoutinställningar.

Komprimerar Elementor uppladdade bilder automatiskt?

Sidbyggarens upplösnings- och laddningskontroller komprimerar inte uppladdningen. WordPress skapar bildstorlekar och använder formatspecifika kvalitetsinställningar, men garanterar inte ett optimerat bibliotek. Elementor erbjuder också den separata produkten Image Optimizer, och webbhotellet eller tillägg kan ge liknande bearbetning. Kontrollera befintliga system innan du lägger till ett nytt.

Kan jag ladda upp WebP direkt?

WordPress stöder WebP-uppladdningar. Webbhotellet behöver också lämpligt bildbehandlingsstöd för att skapa mindre versioner. Testa därför en fil genom uppladdning, widgetval och publicerad leverans innan hela biblioteket konverteras.

Vilka mått passar en huvudbild?

Utgå från största visningsstorlek och beskärning. En bredd på 1600–1920 pixlar är en rimlig start för många datorlayouter, men ingen Elementor-gräns eller garanti för skärpa på alla skärmar. Kontrollera behovet av mobilbeskärning och jämför filstorlek med synliga detaljer.

Förbättrar bildoptimering placeringen på Google?

Den kan förbättra laddning och sidupplevelse, men högre placeringar garanteras inte. Googles vägledning om sidupplevelse förklarar att Core Web Vitals används i rankningssystemen, men bra värden ensamma garanterar inte toppositioner. Relevanta bilder, beskrivande filnamn och användbar alt-text hjälper också sökmotorer att förstå innehållet. Se vår guide till alt-text och filnamn.