Optimera Canva-bilder för webbplatser: export och komprimering

Kontrollera Canvas nedladdningsinställningar

För en vanlig nedladdning väljer du Dela → Ladda ned, sedan JPG för ett foto eller PNG för text och grafik. Välj sida och ladda ned. Kontrollera de sparade pixelmåtten. Saknar kontot storleks- eller kvalitetsreglage kan du ändra mått eller komprimera kopian efteråt.

Om alternativet Begränsa storlek finns, stöder Canva det för närvarande vid JPG- eller PNG-export av en enda sida. Enligt dokumentationen kan komplicerade bilder ändå överstiga den önskade gränsen. Kontrollera den sparade filen själv.

Spara en tydlig Canva-export innan du provar mindre versioner. Att först sänka JPG-kvaliteten i Canva och sedan komprimera eller konvertera igen kan ta bort detaljer två gånger. Skapa varje testversion från samma export av god kvalitet.

Använd ett bildformat för en bild på webbplatsen. PDF för utskrift är avsett för tryck, inte för att lägga en vanlig bild på en webbsida. Ett alternativ som låter mer högkvalitativt är inte automatiskt rätt. Kontrollera mått, utseende och filen som sidan faktiskt laddar.

Bestäm var Canva-bilden ska visas

En banner över hela sidans bredd, en bloggminiatyr och en liten logotyp har olika behov. Öppna sidan före exporten och kontrollera bildens visningsbredd, form och bakgrund. Ett kvadratiskt inlägg för sociala medier passar inte automatiskt i ett brett sidhuvud.

Skriv ner tre saker: ungefärlig visningsbredd, om genomskinlighet behövs och vad läsaren måste kunna urskilja. På en banner kan det vara en produkt och en kort text, i ett diagram varje ord och linje. Då kan du bedöma resultatet utifrån mer än filstorleken.

Om bilden innehåller en rubrik, ett stycke eller en knapp, överväg att lägga in dem direkt på webbsidan. Text i PNG eller JPG är en del av bilden och kan inte brytas om när skärmen blir smalare. En knapp ritad i Canva är också bara en bild om du inte lägger till en fungerande länk på webbplatsen. Använd helst bilden för illustrationen och sidan för viktig text och knappar.

Välj JPG, PNG eller SVG för bilden

Canva erbjuder JPG-, PNG- och SVG-export för olika ändamål. Aktuella alternativ finns i deras guide till nedladdningsformat. Tabellen hjälper dig att jämföra egna filer; inget format är alltid bäst.

JPG minskar filstorleken genom att ta bort vissa bilddetaljer. Det kallas komprimering med kvalitetsförlust. Det fungerar ofta bra för foton men kan ge suddiga kanter eller små märken runt bokstäver. PNG undviker den typen av skador, men ett foto i PNG kan ta betydligt mer plats. Inget av formaten rättar till oskärpa som redan finns i originalet.

SVG beskriver former och linjer så att de förblir skarpa vid förstoring. Ett foto inuti en SVG är däremot fortfarande ett foto: exporten tillför inga nya detaljer. Filen kan också förbli stor om den innehåller foton. Pixilos bildkomprimerare stöder inte SVG. Om din webbplats accepterar filen och bilden ser rätt ut kan du använda den direkt.

Efter nedladdningen kan du också prova WebP. Använd PNG → WebP för PNG-grafik eller JPG → WebP för JPG-foton. Jämför resultatet med Canva-exporten. Om filen blir större eller texten sämre, behåll den ursprungliga exporten. Vår guide till bildformat för webben förklarar när formaten passar.

Välj pixelmått som passar sidan

Kontrollera den största bredd som bilden visas i. Om en banner visas 800 pixlar bred, jämför en bild på 800 pixlar med en på 1600 på en högupplöst mobil- eller laptopskärm. Fler pixlar kan ge mer detaljer, men ökar mängden data som laddas ner. Jämför båda i stället för att automatiskt fördubbla varje bilds mått.

Behåll förhållandet mellan bredd och höjd, alltså bildförhållandet. En yta på 800 × 450 har proportionerna 16:9, precis som en bild på 1600 × 900. En kvadrat på 1600 × 1600 behöver beskäras eller få en annan placering. Om sidhuvudet är mycket högre på mobilen, anpassa bilden så att viktig information inte klipps bort på sidorna.

Webbplatsen kan skicka mindre bildfiler till mobiler och större till stora skärmar. Det kallas responsiva bilder. Att ladda upp en enda stor bild räcker inte: webbplatsen måste skapa eller tillhandahålla versionerna och välja vilken som ska laddas. Kontrollera vad ditt webbplatsverktyg redan gör innan du skapar många kopior själv. Läs vår guide till responsiva bilder och MDN:s förklaring av responsiva bilder för mer information.

Kontrollera den nedladdade filens mått, inte bara storleken i Canva-redigeraren. Om nedladdningsstorleken inte går att ändra, börja med ett dokument nära de mått du behöver och kontrollera resultatet. Använd Pixilos verktyg för bildstorlek för att minska en för stor bild. Att förstora en liten JPG eller PNG återställer inte saknade detaljer.

Ladda ner grafik med genomskinlig bakgrund

Vissa nedladdningsval, till exempel transparent PNG, kräver en Canva-plan som stöder funktionen. Saknas ett val, kontrollera den länkade hjälpen för ditt konto. Du kan fortfarande optimera en vanlig JPG- eller PNG-nedladdning.

En bildvisare kan visa genomskinlig grafik mot vitt. En vit förhandsvisning visar därför inte i sig om bakgrunden är genomskinlig. Prova bilden på både ljus och mörk bakgrund och granska kanter och skuggor.

Att konvertera JPG till PNG tar inte bort bakgrunden. Om fotot har en vit rektangel bakom motivet försvinner den inte när du väljer PNG. Ta bort den oönskade bakgrunden i bilden före nedladdningen.

Om grafiken alltid ligger på samma enfärgade bakgrund kanske genomskinlighet inte behövs. Spara en genomskinlig version separat om du kan behöva den på andra platser. Vår guide till svarta eller vita bakgrunder hjälper dig att avgöra om bakgrunden finns i filen eller bara i appen som visar den.

instruktioner för export med genomskinlig bakgrund

Komprimera Canva-exporten med Pixilo

När mått och placering är rätt, öppna bildkomprimeraren. Du kan lägga till högst 20 JPG-, PNG- eller WebP-filer på högst 25 MB vardera. Pixilo behandlar dem en i taget på din enhet och behåller format, bredd och höjd. Ingen sida får överstiga 8000 pixlar och bilden får innehålla högst 32 miljoner pixlar. Exempelvis klarar 8000 × 4000 båda gränserna, men inte 8000 × 8000.

PNG komprimeras utan kvalitetsförlust: pixlar och färger förblir oförändrade. En PNG som Canva redan har komprimerat väl kanske bara blir lite mindre. JPG- och WebP-komprimering kan ändra små detaljer, så kontrollera resultatet. Om den nya filen inte är mindre behåller Pixilo originalet.

Använd ett konverteringsverktyg för att ändra format. Komprimeraren på startsidan behåller PNG som PNG. I PNG → WebP och JPG → WebP kan du justera kvaliteten efter att ha lagt till bilden och sedan välja Uppdatera resultaten för att tillämpa ändringen. Bilder med en sida över 4000 pixlar minskas proportionellt så att den längsta sidan blir 4000 pixlar. Kontrollera de nedladdade måtten om originalet är mycket stort.

Om ett uppladdningsformulär har en strikt filstorleksgräns, prova Komprimera till en målstorlek. Välj ett accepterat format och kontrollera minsta bredd och höjd. En mycket liten fil går inte alltid att få utan att text eller detaljer blir otydliga. Kontrollera alla krav, inte bara filstorleken.

Exempel: förbered en Canva-banner för en artikel

Anta att artikeln behöver en banner som visas i högst 800 × 450 pixlar. Bilden kombinerar ett foto och en kort text. Måtten är planeringsexempel, inte resultat från ett komprimeringstest.

1. Förbered kompositionen. Använd 16:9 och håll huvudmotivet synligt på både dator och mobil. Lägg artikelrubriken på webbsidan i stället för att upprepa en lång rubrik i bilden.
2. Ladda ner två versioner. Exportera om möjligt en JPG och en PNG på 1600 × 900 från samma design. Öppna båda och granska den korta texten. Exportera direkt från Canva, inte från en redan komprimerad kopia.
3. Jämför komprimeringen. Prova startsidans komprimerare på den export du föredrar. Testa även en WebP-kopia av PNG-filen om webbplatsen stöder den. Ge filerna olika namn så att du jämför rätt versioner.
4. Kontrollera på dator och mobil. Granska bannern i 800 × 450 och vid mobilens visningsbredd. Texten ska gå att läsa utan att zooma. Är den för liten, förenkla bilden eller flytta texten till sidan i stället för att komprimera mer.
5. Publicera din valda version. Kontrollera filen som webbplatsen faktiskt laddar, dess storlek och beskärning. Skapar webbplatsen mindre versioner automatiskt, kontrollera dem innan du uppdaterar övriga bilder.

Anteckna vilka mått och vilket format som fungerade för den platsen. Använd dem som utgångspunkt för liknande bilder, men kontrollera varje resultat. En enkel illustration och ett detaljrikt foto kan kräva olika inställningar trots samma mått.

Åtgärda suddig text eller oväntat stora filer

Den nedladdade bilden är redan suddig

Öppna Canva-filen innan du komprimerar. Är den redan suddig, gå tillbaka och kontrollera originalfotot, textstorleken och nedladdningsmåtten. Canvas hjälp för suddiga nedladdningar beskriver vanliga orsaker. Komprimering rättar inte till ett oskarpt foto eller text sparad i en för liten bild.

Filen är skarp på enheten men suddig på webbplatsen

Webbplatsen kan förstora en liten miniatyr, komprimera igen eller visa en äldre sparad version. Öppna bilden från den publicerade sidan i en ny flik om webbläsaren tillåter det och kontrollera måtten. Använd vid behov utvecklarverktygen för att hitta den faktiska filen. En större Canva-export hjälper inte om sidan fortfarande laddar miniatyren.

PNG-filen blir knappt mindre

Det går bara att ta bort en begränsad mängd data utan att ändra bilden. En PNG med foton eller detaljerade strukturer kan förbli stor, särskilt om den redan är väl komprimerad. Prova JPG när genomskinlighet inte behövs. WebP stöder också genomskinlighet, men kontrollera text och kanter efter konverteringen. Behåll PNG om den ser bättre ut, eller minska måtten endast om bilden förblir tydlig.

Bilden ser sämre ut efter två konverteringar

Gå tillbaka till Canva-exporten av god kvalitet. Undvik upprepade JPG → WebP → JPG-konverteringar. Varje sparning med kvalitetsförlust kan försämra bilden; den sista konverteringen återställer inte tidigare förluster. Skapa varje alternativ från samma källa och jämför direkt med den.

Kontrollera den publicerade sidan, inte bara filen

• Kontrollera bilden som laddas. Sidan ska visa den nya filen eller en lämplig version skapad av webbplatsen, inte en gammal eller onödigt stor kopia.
• Granska mobilbeskärningen. Håll motivet synligt och placera inte viktig text nära kanter som layouten kan dölja.
• Lägg viktig information som vanlig text på sidan. Besökaren ska inte behöva förstora en bild för att läsa den enda uppgiften om ett pris, en instruktion eller en uppmaning.
• Beskriv bilder som förmedlar information. Lägg till alt-text: en kort beskrivning för personer som inte kan se bilden. Beskriv vad som är viktigt i just den här sidans sammanhang. Rent dekorativa bilder behöver vanligtvis tom alt-text. Följ Googles råd om bild-SEO utan att fylla beskrivningarna med sökord.
• Kontrollera sidans laddning. En mindre fil hjälper, men tidpunkten då laddningen börjar spelar också roll. Läs vår guide om bilder och Core Web Vitals om huvudbilden fortfarande visas sent.

Vanliga frågor

Ska jag alltid ladda ner Canva-bilder som PNG?

Nej. Prova PNG för genomskinlig grafik och skarp text, och JPG för foton utan genomskinlighet. Jämför filerna i sidans verkliga visningsstorlek i stället för att använda samma format för allt.

Kan jag optimera Canva-bilder utan betalda exportinställningar?

Ja. Ladda ner en tillgänglig JPG eller PNG, kontrollera måtten och ändra storlek, komprimera eller konvertera kopian med Pixilo. Det låser inte upp betalda Canva-funktioner och skapar inte genomskinlighet som saknas i källan.

Blir bilden alltid bättre med dubbla exportmått?

Nej. En större export kan bli skarpare på en högupplöst skärm men rättar inte till ett litet eller suddigt foto i bilden. Jämför båda på sidan och använd den större bara när den ger en märkbar fördel.

Behöver webbilder en särskild DPI-inställning?

Fokusera på bredd och höjd i pixlar och hur stor bilden visas. Att bara ändra DPI-värdet tillför inga detaljer. Vår guide till DPI, PPI och pixlar förklarar skillnaden mellan webb och tryck.

Garanterar WebP bättre placering i sökresultaten?

Nej. Ett formatbyte garanterar ingen placering. En användbar bild, tydlig text runt den, relevanta beskrivningar och en effektiv sida är bättre mål än att välja en viss filändelse för dess egen skull.