Responsiva bilder: rätt storlek för telefon och dator

Börja i webbplatsens redigerare

Kontrollera i WordPress eller ett webbplatsverktyg först vad det befintliga bildblocket gör. Webbplatsen kanske redan skapar mindre versioner från en enda uppladdning.

1. Ladda upp ett skarpt original med tillräckliga detaljer för den största vy du behöver.
2. Välj en lämplig bildupplösning i blocket om inställningen finns. Ett smalare block innebär inte nödvändigtvis en mindre nedladdad fil.
3. Förhandsgranska sidan på en telefon och en dator. Kontrollera beskärningen, liten text och bildskärpan.

Webbplatsens ansvariga kan kontrollera att sidan levererar lämpliga storlekar. Om du redigerar HTML själv visar exemplen nedan hur du kopplar in de exporterade filerna.

Vad är responsiva bilder?

Responsiv layout anpassar sidan till skärmen. Responsiv bildleverans ändrar vilken fil som hämtas. En mindre CSS-visning minskar inte automatiskt nedladdad data.

Ett 3000-pixlars foto kan laddas helt för ett litet kort om alternativ saknas. Responsiva bilder erbjuder filer för tillgängligt utrymme och kan spara data med bibehållen tydlighet.

Två val skiljer sig: upplösningsbyte behåller kompositionen med olika mått; anpassad beskärning ändrar kompositionen när ett brett motiv inte fungerar smalt. MDN:s responsiva guide förklarar skillnaden.

Skärmbredd, visningsbredd och bildpixlar

Mät först bildens faktiska utrymme i CSS-pixlar. En telefon på 390 pixlar med 16 pixlars marginal på varje sida lämnar 358. Ett kort i tre datorkolumner kan vara bara 320 CSS-pixlar brett.

En CSS-pixel mäter den synliga storleken i sidans layout. På en skärm med hög pixeltäthet kan den använda flera fysiska skärmpixlar. En skarp bild kan därför behöva fler bildpixlar än den visade bredden.

Ta sedan hänsyn till pixeltäthet. Som planeringsvärde multiplicerar du visningsbredd med enhetens pixelkvot. För 358 CSS-pixlar vid 2× blir det ungefär 716 bildpixlar. Det hjälper exportval men garanterar inte en viss fil.

En dator behöver inte automatiskt största filen. En mycket liten bild kan däremot se mjuk ut på en tätpixlig telefon. Kontrollera verkligt utrymme och resultat.

Skapa användbara bildstorlekar

1. Hitta största avsedda bredden. Mät innehållskolumn eller kort, inte hela skärmen.
2. Välj representativa bredder. För en artikelbild begränsad till 800 CSS-pixlar är 400, 800, 1200 och 1600 en rimlig första testserie, inte ett allmänt krav.
3. Exportera från samma original. Använd Pixilos storleksverktyg med bibehållet bildförhållande. Spara källan.
4. Jämför format och kvalitet. Testa WebP eller JPG → AVIF / PNG → AVIF / WebP → AVIF när publiceringen stöder det. Besparingen ska inte komma från oläslig text eller förlorade detaljer.
5. Publicera och koppla filerna. Pixilo skapar bilder men konfigurerar inte HTML, CMS eller CDN.
6. Kontrollera publiceringen. Granska vald fil, mått och utseende vid flera bredder.

Förstora inte ett litet original bara för en målsiffra. Skalning återställer inte verkliga detaljer. Visa mindre eller skaffa bättre källa. Läs ändra storlek utan att sträcka bilden.

Kontrollera WordPress och andra CMS

CMS kan redan skapa flera storlekar och responsiv HTML. Granska sidan innan en parallell manuell lösning läggs till. Kontrollera att storlekar passar temat och hela hanteringen stöder formatet.

Tillägg eller CDN kan konvertera på begäran. Kontrollera det webbläsaren tar emot i stället för originalnamnet. Cache kan behålla gamla versioner efter byte. Bekräfta den nya leveransen före bedömning.

Läs optimera WordPress-bilder för konkreta steg. Sikta på förutsägbar leverans med tydliga roller.

Valfritt: använd srcset och sizes i HTML

Exemplet fyller fönstret minus totalt 32 pixlars marginal, upp till 800 CSS-pixlar. Namnen är exempel: publicera egna filer och ange verkliga sökvägar och mått.

<img
  src="/images/coast-800.webp"
  srcset="/images/coast-400.webp 400w,
          /images/coast-800.webp 800w,
          /images/coast-1200.webp 1200w,
          /images/coast-1600.webp 1600w"
  sizes="(max-width: 832px) calc(100vw - 32px), 800px"
  width="1600" height="1067"
  alt="Klippig kust vid ett lugnt blått hav">

w-värden måste motsvara verkliga bredder. sizes beskriver förväntad visningsbredd för valet men bestämmer inte synlig storlek. CSS måste stämma med beskrivningen.

Här fungerar en behållare på högst 800 pixlar och display: block; width: 100%; height: auto;. Kopiera inte detta sizes till ett annat rutnät. Att beskriva ett litet kort som 100vw kan ge onödigt stora nedladdningar.

Webbläsaren kan väga in täthet och andra förhållanden. Förvänta dig en lämplig version, inte ett garanterat namn. Blanda inte breddvärden med täthetsvärden som 2x i samma lista. Se MDN:s srcset-referens.

När telefonen behöver en annan beskärning

En bred banner kan bli för låg på telefonen och motivet för litet. Fler pixlar löser inte kompositionen. Skapa ett tätare utsnitt och välj det med medievillkor i picture.

Använd beskärningsverktyget med eftertanke och behåll sammanhang. Kontrollera överlagrad text; ett bra utsnitt kan placera motivet under en rubrik eller knapp.

Olika kompositioner kräver mer underhåll. Använd dem när den smala layouten behöver det. Om bildförhållanden skiljer sig ska rätt plats reserveras vid varje brytpunkt. picture-referensen förklarar valet.

Mått, uppskjuten laddning och huvudbild

Ange korrekta width och height för att visa bildförhållandet före laddning. Med proportionell CSS kan utrymme reserveras. Kontrollera det om CSS låser båda måtten eller ändrar utsnitt.

Bilder långt under första vyn kan använda loading="lazy". En viktig direkt synlig bild bör normalt laddas utan uppskjutning. Att försena huvudbilden kan skada även med liten fil. Se web.dev:s laddningsguide.

Om mätningar identifierar en bild som Largest Contentful Paint, överväg fetchpriority="high" för den. Prioritera inte allt. Responsiva mått löser inte långsamma serversvar eller sen upptäckt av huvudbilden.

Testa responsiva bilder

1. Öppna publicerad sida vid telefon-, surfplatte- och datorbredder.
2. Kontrollera visningsbredd och vald URL. currentSrc visar vald resurs.
3. Kontrollera överförd storlek i nätverksförfrågan. Stäng av cache vid behov för nytt test.
4. Granska text, kanter och utsnitt i normal storlek.
5. Ladda om vid varje bredd. Att ändra ett redan laddat fönster motsvarar inte alltid ett nytt besök.
6. Mät före och efter under jämförbara förhållanden.

Om telefonen fortfarande hämtar stora filer, kontrollera srcset, verkliga breddvärden och sizes. Vid oskärpa, kontrollera källmåtten före högre kvalitet. Vid sträckning, korrigera proportionerna i stället för större fil.

Responsiva bilder och SEO

Responsiv leverans minskar onödig bilddata utan att garantera placeringar. Använd relevant bild och användbar alternativtext. Behåll img med giltigt src i picture. Googles dokumentation behandlar upptäckt och responsiv HTML.

För laddning, layoutförskjutningar och upplevelse, läs bilder och Core Web Vitals. Mät verkliga sidan; en mindre fil bevisar inte att alla mått förbättras.

Vanliga frågor

Räcker width: 100%?

Det kan anpassa visningen till behållaren men skapar inte mindre nedladdningsfiler. Du behöver lämpliga filer och responsiv HTML.

Behövs en bild för varje telefon?

Nej. Ge ett hanterbart urval storlekar. Webbläsaren väljer utan att varje modell identifieras.

Ska alla bilder vara dubbla visningsbredden?

Nej. En 2×-version hjälper vissa skärmar, inte alla. Väg skärpa mot filstorlek och erbjud mindre versioner.

Kan Pixilo lägga till srcset på min webbplats?

Pixilo skapar bildfilerna. Webbplats, mall, CMS eller bildtjänst måste publicera dem och konfigurera leveransen.

Sammanfatta medChatGPT (öppnas i en ny flik)Grok (öppnas i en ny flik)Google (öppnas i en ny flik)Perplexity (öppnas i en ny flik)Claude (öppnas i en ny flik)