Varför ser bilderna på min webbplats suddiga ut?

Hitta steget där bilden blir suddig

Bilden fotograferas eller skapas, exporteras, laddas upp, bearbetas automatiskt och visas. Ta reda på när detaljer först försvinner. Ändra en sak åt gången.

Öppna originalet med 100 % zoom, sedan filen du laddade upp och sist bilden som den publicerade sidan hämtar. Jämför samma öga, etikett eller text. Små förhandsvisningar döljer skillnader; kraftig zoom visar pixlar även i bra foton. Är originalet oskarpt eller rörelseoskärpt behövs en bättre källa eller ett nytt foto. Är bara exporten dålig, rätta till den först.

Välj kontroll utifrån symtomet

Kontrollera filen som sidan faktiskt laddar

Ett publiceringssystem kan behålla det stora originalet men visa en miniatyr eller mellanstor version. Öppna bildens begäran i webbläsarens nätverkspanel. Kontrollera filens pixelmått och jämför med utrymmet på sidan.

En miniatyr på 300 pixlar förstoras i en artikelspalt på 900 pixlar. Hela originalet kan vara onödigt stort: välj en lämplig mellanversion i blocket eller mallen, i stället för att komprimera miniatyren igen. Bildkällan kan ändras med fönsterbredden. Testa telefon och dator; se vår guide om responsiva bilder och MDN:s beskrivning av bildval och pixeltäthet.

Välj tillräckligt med pixlar för platsen

För ett foto som visas 600 CSS-pixlar brett kan du jämföra 600 och 1200 bildpixlar, även på en telefon med hög pixeltäthet. Kontrollera detaljer och filstorlek. Det är testalternativ, ingen allmän regel.

Skapa en kopia från ett tillräckligt stort original med storleksverktyget och lås proportionerna. Att förstora 300 pixlar till 1200 återskapar inte fotografiska detaljer. Läs om lämpliga bildstorlekar för webbplatser. En tät beskärning runt ett litet ansikte minskar också antalet tillgängliga pixlar; kontrollera måtten efter beskärning.

Granska komprimering och liten text var för sig

Blockiga övertoningar, utsmetade strukturer och störningar runt bokstäver kan bero på för hård förlustkomprimering. Exportera från bästa källan med samma mått och mindre komprimering. Att spara en skadad JPG som PNG bevarar felen.

Läs den minsta viktiga texten i skärmbilder och diagram i avsedd visningsstorlek. Jämför PNG med nuvarande export med hjälp av JPG- och PNG-guiden. För liten text kan kräva en ny layout. Spara separata varianter från originalet, med mått och format i namnet, i stället för att upprepat konvertera förlustkomprimerade kopior.

100 % betyder här bildens verkliga pixelstorlek i ett bildvisningsprogram: en bildpixel visas som en skärmpixel. Webbläsarens sidzoom är en annan inställning.

Exempel: en skarp uppladdning blir en suddig artikelbild

Ett foto på 2400 × 1600 är skarpt lokalt men suddigt i ett 600 pixlar brett block. Sidan laddar en miniatyr på 300 × 200. Detta är ett illustrativt exempel, inte en mätning från en viss webbplats.

1. Behåll originalet och bekräfta att sidan använder miniatyren.
2. Välj en lämplig större version i blocket eller mallen.
3. Jämför 600 × 400 och 1200 × 800 vid samma visningsbredd.
4. Kontrollera telefon, dator och de faktiska filstorlekarna.
5. Behåll den minsta versionen som visar viktiga detaljer.

Rätt bildversion löser pixelbristen; mer komprimering tillför inget. Syns fortfarande den gamla bilden, kontrollera begärd adress och uppdatera relevant cache innan du exporterar igen.

Vanliga frågor

Blir bilden skarpare av ett annat DPI-värde?

Att bara ändra upplösningsetiketten tillför inga pixlar. Kontrollera pixelmått, visning och laddad version. Se DPI, PPI och pixlar.

Tar WebP bort oskärpa?

Ett nytt format återställer inte förlorade detaljer. Utgå från ett skarpt original och jämför kvalitet och storlek.

Varför ser bilden bra ut i mediebiblioteket?

Biblioteket och sidan kan visa olika versioner i olika storlekar. Jämför den publicerade filen med förhandsvisningen.