Webbplatsbildkontroll
Optimera webbplatsbilder: kontrollera sidan innan publicering
Använd denna guide för att se vad webbläsaren verkligen laddar, välj rätt storlek för varje bild, fixa HTML och kontrollera sidan innan publicering.
Snabbt svar
Kontrollera den live-sidan innan du exporterar en ny fil
Den snabbaste bildåtgärden är ofta inte en ny konverterare. Hitta först tunga förfrågningar, saknade storlekar, en latladdad LCP-bild eller metadata som fortfarande pekar på en gammal fil. Börja med sidan och exportera sedan bara det som måste ändras.
Kontrollera först
Börja med vad webbläsaren laddar ner
Designfiler och mediamappar visar inte vad användarna verkligen får. Webbläsaren visar vilken bild-URL som laddas, hur stor den visas, om sidan reserverar utrymme och om en stor fil återanvänds där en liten skulle räcka.
Vilken URL laddas?
Öppna sidan och skriv ner den verkliga bild-URL:en, överföringsstorlek, visad storlek och om webbläsaren valde förväntad version.
Hur stor är bilden?
Mät det synliga området istället för att gissa från källfilen. Kort, innehållskolumner och sociala bilder bör inte dela en export.
Är den i första skärmen?
Hitta sannolik LCP-bild, undvik att av misstag latladda den och håll mindre viktiga bilder utanför första laddningen.
Stämmer metadata överens?
Kontrollera alt-text, Open Graph-bild, JSON-LD-bild, närliggande text och filnamn så att sidan berättar en tydlig historia.
Bildplan
Planera varje viktig bild före konvertering
En bildplan håller denna guide separat från konverteringsartiklar. Den frågar vad varje bildområde behöver: storlek, laddningsordning, reserv, metadata-roll och en slutlig kontroll som bekräftar att sidan använder rätt fil.
| Bildområde | Beslut | Risk | Kontrollera |
|---|---|---|---|
| Huvudbild | Ange sannolik LCP-bild, exakta dimensioner, laddningsordning och en reservväg. | Latladdning eller för stora filer kan fördröja den första användbara bilden. | Jämför visad storlek, förfrågningsstorlek och laddningsbeteende i första skärmen. |
| Artikelinnehållsbild | Definiera versioner för innehållsbredd och reservera utrymme med bredd och höjd. | Sidan kan ladda en källbild som är mycket bredare än läskolumnen. | Kontrollera skrivbords- och mobilbredder och verifiera vald srcset-kandidat. |
| Upprepad kortbild | Skapa små versioner för listor, nav, relaterade kort och arkivsidor. | En återanvänd artikelbild kan lägga mycket vikt till en listningssida. | Skanna listningssidan och bekräfta att upprepade kort inte laddar fullständiga artikelbilder. |
| Metadata-bild | Förbered Open Graph- och JSON-LD-bilder som planerade filer, inte slumpmässiga rester. | Förhandsvisningar för sök och delning kan visa gamla, beskurna eller orelaterade bilder. | Inspektera renderade metataggar och strukturerad data för den slutgiltiga URL:en. |
När planen säger att filer behöver nya versioner, använd guide för bildkonvertering för att välja nästa steg. Använd Guide för JPG till WebP för vanlig WebP-arbete och AVIF-guiden endast för stora foton som fortfarande behöver mer besparing.
Bildstorlekar
Ange tydliga storlekar för varje bildområde
Responsiva bilder fungerar bara när HTML matchar layouten. Mät området, välj några användbara bredder, reservera bildförhållandet och undvik att skicka en stor originalfil bara för att den finns.
Enkel kontroll: om ett 360 px-kort laddar ner en 2400 px-fil är inte komprimering huvudproblemet. Sidan behöver en mindre bildversion eller så pekar HTML på fel fil.
Laddningsordning
Låt den första bilden laddas med avsikt
Bilden som formar första skärmen behöver en annan regel än bilder längre ner på sidan. Hitta sannolik LCP-bild, undvik att latladda den av misstag och håll lägre bilder tysta tills de behövs.
- 1
Namnge LCP-bilden
Om den första meningsfulla bilden sannolikt blir Largest Contentful Paint, latladda den inte av misstag.
- 2
Håll lägre bilder tysta
Bilder under första vyområdet bör normalt använda latladdning och asynkron avkodning.
- 3
Kontrollera CSS-bakgrunder
En beskuren bakgrund kan fortfarande ladda ner en stor fil. Använd en korrekt stor fil för det synliga området.
- 4
Kontrollera upprepade förfrågningar
En liten kortbild blir kostsam när samma för stora fil upprepas flera gånger.
HTML
Använd responsiv HTML för det uppmätta området
För viktiga bilder, gör webbläsarens val tydligt. Exemplet nedan visar breddalternativ, storlekar, fasta dimensioner och reserv. Ändra laddningsbeteende baserat på området, inte av vana.
<picture>
<source
type="image/avif"
srcset="/images/article/product-640.avif 640w,
/images/article/product-960.avif 960w,
/images/article/product-1280.avif 1280w"
sizes="(max-width: 768px) 100vw, 720px" />
<source
type="image/webp"
srcset="/images/article/product-640.webp 640w,
/images/article/product-960.webp 960w,
/images/article/product-1280.webp 1280w"
sizes="(max-width: 768px) 100vw, 720px" />
<img
src="/images/article/product-960.jpg"
alt="Skärmdump av instrumentpanelen som visar uppladdningsflödet"
width="960"
height="540"
loading="lazy"
decoding="async" />
</picture>Sök och delning
Få bilder, alt-text och metadata att berätta en enhetlig historia
Bild-SEO handlar inte bara om att lägga till nyckelord. Den synliga bilden, närliggande text, hjälpsam alt-text, Open Graph-taggar och JSON-LD-bildlänkar ska tydligt beskriva samma sida. Dekorativa bilder bör förbli dekorativa.
När kontrollen hittar svaga sociala förhandsvisningar, fortsätt med Öppna Graph image guide. När schema och metataggar är problemet, använd Blazor metadata-guide för att hålla JSON-LD och sidmetadata konsekventa.
Steg
En enkel bildkontroll för varje sida
- 1
Öppna den riktiga sidan
Börja från den aktuella URL:en, inte från resursmappen. Registrera de bilder som faktiskt laddas.
- 2
Skapa bildplanen
För varje viktig bild, skriv ner målbredd, bildförhållande, laddningsordning, reserv och metadata-roll.
- 3
Konvertera bara det som ändrats
Använd konverteringsverktyg endast för filer som kontrollen hittade, istället för att exportera hela mediamappen igen.
- 4
Uppdatera HTML och metadata
Peka srcset, storlekar, dimensioner, Open Graph och JSON-LD-bildlänkar till de förberedda filerna.
- 5
Verifiera webbläsarens output
Kontrollera sidan, nätverksförfrågningar, social metadata, strukturerad data och mobil layout.
- 6
Behåll regeln till nästa gång
Dokumentera bildbesluten så att framtida uppdateringar inte börjar med gissningar igen.
Verktygstips
Använd PixelPress när du vet vilka filer som ska konverteras
När kontrollen visar att en mapp behöver nya WebP- eller AVIF-filer kan PixelPress konvertera dem lokalt. Originalen förblir orörda och utmatningsmappen är lätt att granska.
Checklista
Bildchecklista innan publicering
Använd denna lista innan en artikel, landningssida eller produktsida går live. Den fångar sidproblem som konvertering ensam kan missa.
Vanliga frågor
Vad är en webbplatsbildkontroll?
En webbplatsbildkontroll granskar bilderna som en riktig sida laddar, och jämför dem med synlig layout, laddningsordning, responsiv HTML, alt-text, metadata och strukturerade datalänkar.
Är bildoptimering samma sak som att konvertera till WebP eller AVIF?
Nej. Konvertering är bara ett steg. Sidan kan fortfarande vara långsam om HTML pekar på fel fil, storlekar saknas, LCP-bilden latladdas eller metadata-bilder är gamla.
Hur hittar jag bilden som påverkar prestandan mest?
Börja med första skärmen och nätverksförfrågningarna. Leta efter den största synliga bilden, för stora upprepade kortbilder, CSS-bakgrunder och filer vars visade storlek är mycket mindre än den nedladdade bilden.
Bör varje bild ha alt-text?
Nej. Användbara bilder bör ha hjälpsam alt-text. Dekorativa bilder bör hållas utanför innehållshistorien och inte bli nyckelordsbehållare.
Var passar PixelPress in i detta arbetsflöde?
PixelPress passar in efter att kontrollen visar vilka filer som behöver ny WebP- eller AVIF-output. Det kan hjälpa med lokal batchkonvertering medan sidkontrollen fortfarande bestämmer storlekar, laddningsordning, metadata och slutkontroller.