Så exporterar du foton till en webbportfolio

En fotoportfolio ska laddas smidigt och samtidigt visa arbetets kvalitet. Tygstruktur, löv, jämna himlar och hudtoner kan vara viktigare här än i en liten tjänsteillustration. En bra miniatyr kan se dålig ut i ett stort galleri.

Målet är filer som bevarar relevanta detaljer i besökarnas faktiska visningsstorlekar. Guiden visar hur du väljer och testar exporter, även när publiceringsplattformen bearbetar dem igen.

Planera för galleriet, inte bara miniatyren

Lista alla vyer: rutnät, projektsida, ljuslåda eller bred inledningsbild. Samma foto kan vara kvadratiskt beskuret i rutnätet och visas helt när det öppnas. En miniatyrexport räcker inte till en mer detaljerad stor vy.

Läs plattformens bildanvisningar innan du skapar förinställningar. Vissa skapar flera storlekar, andra visar uppladdningen direkt. Adobe Portfolio sparar exempelvis originalet i full upplösning och skapar mindre versioner. Uppladdad källa och levererad bild är därför skilda saker att kontrollera.

Kontrollera även om originalstorleken går att ladda ned. Ladda inte upp en tryckmaster bara för att galleriet normalt visar en mindre variant. Webbexporten ska tåla att göras tillgänglig via sidans funktioner.

Ta reda på storleken i den öppnade vyn

1. Börja i webbplatsbyggaren. Läs galleri- och uppladdningsanvisningar samt layoutinställningar. Leta efter största visningsbredd eller höjd; uppladdningsgränsen är något annat.
2. Öppna ett publicerat testgalleri. Använd det bredaste fönster du vill stödja och öppna bilden som en besökare, även i ljuslådan. Prova också ett stående foto som kan begränsas av fönsterhöjden.
3. Mät bara om plattformen inte ger användbara mått. Högerklicka på bilden i datorns webbläsare och välj Inspektera. Elementmarkeringen eller layoutrutan kan visa CSS-bredd och höjd. Mät bilden, inte galleriramen. Källfilen i en separat flik visar i stället filens pixelmått.

Om visningsstorleken är osäker, börja med plattformens aktuella rekommendation och testa det öppnade galleriet innan du sparar en gemensam förinställning. Utgå från visningen, inte en gissning baserad på kameraupplösningen.

Välj pixelmått efter layouten

Utgå från största visningen och bedöm sedan värdet av extra pixlar. Vid 1 200 CSS-pixlars bredd kan en källa på 2 400 ge 2× detalj, om sajten verkligen levererar den storleken. Det är ett räkneexempel, inte en regel för alla portfoliofoton.

6 000 × 4 000 skalat till 2 400 pixlars bredd blir 2 400 × 1 600. Vid 1 200 × 800 CSS-pixlar finns två bildpixlar i vardera riktningen per CSS-pixel. Ett stående original på 4 000 × 6 000 med långsidan 2 400 blir däremot 1 600 × 2 400. Samma långsideinställning ger alltså inte samma bredd.

Dubbla mått ger fyra gånger fler pixlar: 1 200 × 800 är 960 000, medan 2 400 × 1 600 är 3 840 000. Filstorleken fyrdubblas inte nödvändigtvis, men överföring och avkodning kostar mer. Jämför en mindre och en 2×-version i galleriet. Behåll extra pixlar när skillnaden motiverar dem och leverera mindre filer till mindre vyer.

Använd storleksverktyget med låsta proportioner för mindre kopior av en befintlig webbexport. Behövs annan komposition, beskär först. Sträck inte ett porträtt till liggande format.

Små skärmar bör inte ladda största filen för varje miniatyr. Webbplatsbyggaren kan sköta detta; en egen sajt kan behöva responsiv bildkod. Guiden om responsiva bilder förklarar samspelet mellan visningsstorlek och bildkälla.

För vanlig skärmvisning betyder pixelmått mer än PPI-märkningen. En fil som är 2 400 pixlar bred förblir det om bara upplösningsmetadata ändras. För utskrift gäller ett annat samband; se DPI, PPI och pixlar.

Välj format och färghantering medvetet

Börja med ett format plattformen stöder

JPG är en praktisk början för foton. PNG passar transparens och grafik men blir ofta onödigt stort för fotografier. WebP och AVIF kan passa om plattformen stöder dem eller du styr bildleveransen. MDN:s formatreferens beskriver egenskaper och stöd.

Konvertera inte hela samlingen innan publiceringskedjan kontrollerats. Plattformen kan avvisa formatet eller koda om bilden. Jämför den bild det färdiga galleriet levererar, inte bara din uppladdning.

Exportera med färghantering

För en vanlig portfolio med standarddynamik, SDR, är sRGB en praktisk utgångspunkt. Exportera i en bildredigerare med färghantering och bädda in profilen om det går. Att konvertera färgerna till sRGB är inte samma sak som att enbart tilldela en sRGB-profil till färgvärden från en annan färgrymd. Adobes frågor och svar om färg förklarar Lightrooms färghantering.

Brett färgomfång och HDR kräver kompatibel export och publicering. Använd dem avsiktligt med plattformsstöd. Redigerarens förhandsvisning bevisar inte vad besökaren ser.

Jämför export och publicering på samma enhet med bekanta referenser, exempelvis hud eller neutrala ytor. Skärmar kan ändå skilja sig åt. Ändras färgen oväntat på samma enhet, undersök plattformens bearbetning och profiler före den kreativa redigeringen. Färgguiden hjälper till.

Hitta komprimeringsnivån med ett litet testurval

En kvalitetsprocent har inte samma effekt i alla exportprogram. Siffran styr en viss kodare; den anger inte procent av fotots konstnärliga eller tekniska kvalitet.

Välj bilder som gör olika fel synliga. En jämn himmel kan avslöja färgband, medan hår, gräs och tyg visar om fina strukturer försvinner. Mörka områden kan få block eller utsmetat brus. Arkitektur visar skador längs tunna kanter med hög kontrast. Ta med sådana motiv som du faktiskt publicerar.

1. Utgå från samma redigerade källa. Behåll mått och färginställningar så att det är komprimeringen du jämför.
2. Skapa två eller tre kvalitetsvarianter. På en JPG-skala 0–100 kan 75, 85 och 95 vara testpunkter, inte allmänna rekommendationer.
3. Kontrollera bilden i två storlekar. Bedöm först den storlek som besökaren faktiskt ser. Granska därefter vid 100 % eller 1:1 för att upptäcka förlorade strukturer, block och ljusa konturer runt kanter. 100 % är inte samma sak som att anpassa till fönstret och innebär inte nödvändigtvis förstoring. Adobe beskriver Lightrooms 1:1-vy som visning med faktiska bildpixlar.
4. Jämför filstorlek efter utseende. Behåll den mindre filen bara om viktiga detaljer finns kvar. Stor kvalitetsförlust för liten besparing hjälper sällan.
5. Publicera ett test och jämför igen. Plattformens bearbetning kan ändra resultatet. Kontrollera rutnät, öppnad bild och mobilvy innan hela serien exporteras.

Det finns inget universellt kilobytemål för portfoliofoton. En detaljrik skog kan kräva mer data än ett enkelt studiomotiv med samma mått. Välj minsta fil som klarar din granskning och bedöm sedan hela sidans laddning.

Uppmätt exempel: ett foto, tre JPG-exporter

Vi testade ett foto av Alperna och Medelhavet från NASA:s Earth Observatory. Källa: NASA/JSC, ISS Crew Earth Observations Facility, bild ISS073-E-3320. Källan var redan JPG. Vi skalade den en gång till 2 400 × 1 348 och sparade en PNG-arbetskopia så att alla exporter började med samma pixlar. PNG återställer inte tidigare förluster.

Den 17 oktober 2026 konverterade vi samma PNG i Pixilos PNG-till-JPG-verktyg med 75, 85 och 95 i Microsoft Edge 155.0.4283.45. Måtten ändrades inte. Värdena gäller denna webbläsarkodare, inte motsvarande Lightroom-inställningar eller garanterade resultat för andra foton.

Varje detaljfil visar samma 240 × 160 pixlar utan ytterligare skalning. Sidan kan anpassa förhandsvisningarna till skärmen. Öppna fullstorleksfilerna i 100 % för pixeljämförelse. Granska bergsryggar och struktur: lägre inställning sparar byte men kan släta ut dem. Filen med 95 är nästan dubbelt så stor som 85, men det avgör inte om skillnaden är viktig i ditt galleri.

Du kan ladda ned PNG-arbetskopian (6 464 084 byte) och upprepa testet. Ett flygfoto avgör inte rätt inställning för porträtt, konst eller alla landskap. Använd metoden på representativa egna bilder.

Exempel: skapa en exportförinställning i Lightroom Classic

Anta att största obeskurna gallerivyn är 1 200 × 800 CSS-pixlar och det redigerade originalet 6 000 × 4 000. Jämför en JPG på 2 400 × 1 600 med en mindre version. Välj bilden och öppna File → Export i Lightroom Classic. Adobes exportdokumentation förklarar panelerna; namn och alternativ kan variera.

• File Settings: välj JPEG och sRGB för SDR-exemplet. Testa kvalitet i Lightroom i stället för att kopiera webbläsartestets siffror.
• Image Sizing: aktivera Resize to Fit och välj Width & Height. Ange en ram på 2 400 × 1 600 pixlar för det liggande fotot. Bilden ryms utan att sträckas; ett porträtt tvingas inte till samma mått. Behåll Don't Enlarge för förinställningar som även används på mindre original.
• Output Sharpening: jämför avstängd skärpning med Sharpen For: Screen, Amount: Standard. Granska kanter och struktur i slutlig visningsstorlek. Stäng av eller minska om glorior eller hårda kanter uppstår.
• Metadata: behåll nödvändiga beskrivnings- och upphovsrättsfält och kontrollera borttagning av plats- och personuppgifter.
• Export Location: spara i en separat webbexportmapp. Skilj testfilerna åt med namn så att rätt granskad version publiceras.

Ladda upp en kandidat, granska det öppnade galleriet och prova mobilen. Spara förinställningen efter testet. Porträtt och miniatyrer kan behöva andra ramar; ompröva när layouten ändras.

Använd Pixilo när ett extra steg behövs

Kan fotoredigeraren ge rätt mått, format och kvalitet i en export, börja där. Pixilo hjälper med en redan färdig bild som behöver mindre mått, nytt utsnitt eller komprimeringsjämförelse.

Bildkomprimeraren ger en lättare kopia, och storleksverktyget minskar onödiga pixlar. Det tar JPG, PNG och WebP upp till 25 MB per fil. Exportera en mindre arbetskopia i redigeraren om originalet är större. RAW, färgprofilkonvertering och exportskärpning kräver en redigerare som stöder dem.

Undvik upprepade JPG-exporter. Samla helst ändringarna före en slutexport och jämför alltid från samma förberedda källa, inte genom att komprimera förra nedladdningen igen.

Granska metadata, filnamn och vattenstämplar

Kontrollera GPS och personuppgifter separat från komprimering enligt metadataguiden. Lägger du till en synlig märkning med vattenstämpelverktyget, granska placeringen i rutnät och storbild. Låt inte märket ta över. Det hindrar inte kopiering.

Hitta steget där kvaliteten förändrades

1. Kontrollera den redigerade källan. Saknas detaljer där kan exportinställningar inte återställa dem.
2. Kontrollera exportfilen lokalt. Förlorad struktur eller nya glorior kräver separat granskning av mått, komprimering och skärpning.
3. Kontrollera galleriets levererade fil. Är exporten bra men sidan dålig, granska vald bildversion, utsnitt och visningsstorlek. En uppsträckt miniatyr kräver en annan lösning än överkomprimering.

Ändra ett steg i taget. Galleriet kan också vara långsamt för att många stora filer hämtas samtidigt. Testa en ny sidladdning och den första öppnade bilden, inte bara växling mellan redan laddade foton.

Granska det publicerade galleriet

• Miniatyrutsnitt och öppnade bilder visar avsedd komposition.
• Viktig struktur finns kvar utan störande komprimeringsskador i himlar och mörka partier.
• Storbilden är inte en för liten miniatyr som förstorats.
• Färgerna är rimliga vid jämförelse mellan export och publicering på samma enhet.
• Mobilsidan laddas smidigt utan att hämta den största filen för varje miniatyr.
• Publika filer och länkar innehåller bara avsedda versioner och metadata.

Vanliga frågor

Ska jag alltid välja högsta JPG-kvalitet?

Nej. Filen kan bli mycket större utan användbar skillnad i avsedd storlek. Testa krävande motiv och bedöm både utseende och besparing.

Måste alla foton ha samma mått?

Nej. Enhetlig presentation kräver inte att allt sträcks till samma form. Låt layouten avgöra vilka utsnitt som behöver vara lika och vilka som ska behålla originalproportionerna.

Kan webbexporten också användas för tryckleverans?

Utgå inte från det. Utskrift och kundleverans kan behöva andra mått, skärpning, färghantering och metadata. Förbered leveransen från redigeringsoriginalet enligt kraven.