Hur du optimerar dina bilder för att vara SEO-vänliga (komplett guide)

Din webbplats prestanda är beroende av flera faktorer som sträcker sig från den specifika webbhotell du väljer, över att följa riktlinjerna för webbplatstillgänglighet, till de bildfilstorlekar du använder.


Om du formaterar dem för rätt storlek kan det dock minska kvaliteten på grund av de ändringar du gör. Den goda nyheten är att du kan upprätthålla optimal bildkvalitet och få rätt storlek med några tekniker och trick.

Vad är bildoptimering?

dimensioner för bildoptimeringWebbsidor kan uppleva en betydande avmattning när stora bilder finns. Detta kan minska laddningstiderna och göra den totala upplevelsen underdel för dina besökare.

Att minska filstorleken är bildoptimering. Du kan använda ett skript eller ett plugin för detta.

Detta resulterar i snabbare laddningstider för dina sidor. Förlustfri och förlustkomprimering är de två vanligaste optimeringsmetoderna.

Fördelarna med bildformatering

genomsnittliga bildstorlekar på webbenDet uppskattas att cirka 54 procent av den totala vikten på en webbsida beror på bilder.

När du arbetar med webbplatsoptimering bör dina bilder vara din första uppgift på grund av detta. Fördelarna med bildformatering inkluderar:

  • Förbättrad sidhastighet
  • Det är snabbare att skapa säkerhetskopior
  • Mindre serverlagringsutrymme krävs
  • Förbättrad SEO med rätt SEO-plugin
  • Mindre bandbredd används

Hur man förbättrar prestanda med bildoptimering

Målet är att balansera acceptabel kvalitet och lägsta filstorlek jämnt. Det finns mer än ett sätt för dig att göra detta. Innan du laddar upp är komprimering av dina bilder ett vanligt alternativ. Du kan använda ett verktyg eller ett plugin för detta ändamål (här är några).

Det är viktigt att ta hänsyn till vilken typ av komprimering och filformat du använder. Rätt kombination gör det möjligt att minska storleken på din bild med upp till fem gånger.

Experimentera med olika filformat och komprimeringstyper för att bestämma den bästa kombinationen för dina behov.

Välj det bästa filformatet

För att välja den bästa filtypen är det viktigt att veta vilka som är tillgängliga. Dessa är de vanligaste:

  • JPEG: Denna typ använder förlustfri och förlustoptimering. Du kan få en stabil balans mellan filstorlek och kvalitet genom att justera kvalitetsnivån.
  • PNG: Denna typ tenderar att ha en större filstorlek, men bilderna har högre kvalitet. Du kan använda förlorad eller förlustfri komprimering.
  • GIF: Detta är perfekt för animerade bilder. Du kan bara använda förlustfri komprimering. Den använder bara 256 färger.

bildfilformat

Det finns andra alternativ, men dessa är bland de vanligaste och enkla att arbeta med. Andra alternativ inkluderar JPEG XR och WebP. Inte alla webbläsare stöder dessa två, så var medveten om detta.

De kan dock vara ett genomförbart val. Till exempel, jämfört med en jämförbar JPEG-bild, är det i genomsnitt en 30-procentig filstorleksminskning med WebP.

På grund av bristen på universellt stöd för dessa två alternativ kommer din applikation att behöva ytterligare logik på dina servrar eller applikation för att tillhandahålla rätt resurs:

  • Bildoptimering är en tjänst som tillhandahålls av vissa CDN: er, inklusive leverans av WebP och JPEG XR.
  • För att upptäcka klienten, ge det bästa tillgängliga bildformatet och kontrollera de format som stöds är det möjligt att lägga till ytterligare applikationslogik.
  • Vissa öppna källverktyg automatiserar konversation, optimering och servering av lämpliga tillgångar.

Storlek kontra komprimeringskvalitet

Låg komprimering tenderar att ge en högre kvalitet, men filstorlekarna är vanligtvis större. Det motsatta är sant med hög komprimering. Filerna är mindre, men kvaliteten tenderar att minska.

bildkvalitet kontra komprimering

Helst vill du ha en till två MB för din webbs totala vikt. Så överväg hur många bilder du behöver använda och dela detta nummer med cirka 1,5. Detta ger dig storleken per bild som möjliggör bästa laddningshastighet.

Lossless vs. Lossy Optimization

Det här är de två typerna av komprimering du kommer att använda. Det är viktigt att förstå vad de gör:

  • förlustfri mot förlorad kompressionFörlust mindre: Detta komprimerar data och det är ett filter. Innan bilden återges måste den vara okomprimerad. Kvaliteten reduceras dock inte. Det finns flera verktyg som utför förlustfri komprimering.
  • förstörande: Detta eliminerar vissa data och det är ett filter. Tänk på hur mycket reduktion du gör eftersom det försämrar bilden. Du kan använda olika bildredigerare och verktyg för att justera bildens kvalitetsinställningar.

Den optimala konfigurationen av antingen förlustfri eller förlustkonfiguration beror på dina egna kriterier, till exempel avväxlingen mellan införda artefakter och filstorlek, och bildinnehållet.

Det finns inte en enda universell inställning som gäller alla bilder. I slutändan vill du leka med olika bilder för att se vilka som fungerar bäst.

Ändra storlek på bilder till skala

Tack vare responsiva sidor på webbplatser, till exempel WordPress, får du flera filstorlekar i ditt mediebibliotek. Din webbläsare kan välja vilken storlek som är bäst och ladda ner den. Storleken som webbläsaren väljer är baserad på enhetens upplösning.

ändra storlek på bild i wordpress

Den ursprungliga filen förblir orörd och bevarad. Du kan använda plugins för att undvika att spara originalet för att spara skivutrymme om du föredrar.

Byta ut och eliminera bilder

Behöver du alla bilder på en webbsida? Om inte, ta bort dem som är onödiga. Men om alla är relevanta för innehållet, överväg att byta ut bilder med större eller lägre kvalitet med bättre alternativ.

I vissa fall kan websnitt och CSS-effekter komma i stället för bilder medan de fortfarande ger en fin visuell estetik på sidan. Med webbteckensnitt kan trevliga typsnitt hjälpa till att förbättra användbarheten och ge en mer skräddarsydd look på dina sidor.

Det kan också förbättra din läsbarhet och varumärke. Se bara till att du fortfarande enkelt kan söka, välja och ändra storlek på texten utan att det har problem med läsbarheten.

CSS-effekter inkluderar element, som skuggor och lutningar. Även dessa kan ytterligare branding. Animationer kan ge visuell överklagande på din webbsida vid varje zoomnivå och upplösning. Jämfört med bildfiler är dessa en bråkdel av byte.

Raster vs vektorbilder

rastor vs vektor

Raster och vektor är två av de primära bildfiltyperna. Pixelbaserade program, en skanner eller en kamera används för att skapa rasterbilder.

Dessa används ofta på internet och används ofta. Vektorprogramvara används för att skapa vektorbilder. Dessa är vanliga för bilder som går till fysiska produkter och inom teknik, CAD och 3D-grafik.

Vektorbilder är upplösnings- och zoomoberoende. När geometriska former är involverade är vektorn idealisk. När bilder är komplexa och har en mängd detaljer och oregelbundna former föredras rasterbilder.

Rastergrafik kodar varje pixels individuella värden i ett rektangulärt rutnät för att representera en bild. Vektorgrafik representerar en bild med punkter, linjer och polygoner.

Högupplösta skärmimplikationer

Det är viktigt att skilja mellan de två olika pixeltyperna, som inkluderar enhetspixlar och CSS-pixlar. Flera enhetspixlar kan finnas i en enda CSS-pixel. Detaljen på skärmen blir finare med fler enhetspixlar.

css pixel vs enhets pixelFör att dra full nytta av de högre enhetspixelräkningarna måste bildtillgångarna ha mer detaljerad information.

Denna uppgift är idealisk för vektorbilder eftersom de kan ge skarpa resultat när den ges i någon upplösning.

Eftersom rasterbilder använder en pixelbasis för att koda bilddata, är de mer utmanande. Detta medan rasterfilstorlekar ökar när pixlarna ökar.

Så högupplösta skärmar behöver högupplösta bilder för att skörda fördelarna. Vektorbilder är bäst för skärmar med hög upplösning eftersom de alltid ger skarpa resultat på grund av att de är oberoende av upplösning.

Kom ihåg att bildoptimeringsteknikerna är desamma oavsett upplösning.

Optimera vektorbilder

Skalbar vektorgrafik (SVG) stöds av alla moderna webbläsare.

Detta är idealiskt för tvådimensionell grafik och formatet är XML-bildbaserat. SVG-filer kan skapas för hand med hjälp av den textredigerare som du föredrar eller med de flesta vektorbaserade programvarutyper.

För att minska storleken på SVG-filer bör de minifieras. GZIP ska användas vid komprimering av SVG-filer.

Optimera Raster-bilder

Ett rutnät med pixlar utgör en rasterbild. De enskilda pixlarna finns på ett tvådimensionellt rutnät. Till exempel utgör en sekvens på 10 000 pixlar en bild på 100 till 100 pixlar. Varje pixel kodar transparens och färginformation.

raster tungRGBA-värden lagras av varje pixel. Dessa inkluderar:

  • Röd kanal
  • Blå kanal
  • Grön kanal
  • Alfakanal (transparens)

256 nyanser (värden) tilldelas internt av webbläsaren. Per kanal betyder detta åtta bitar. Per pixel är det fyra byte. Detta gör det möjligt att beräkna filstorleken med hjälp av rutdimensionerna. Det krävs inte mycket för filstorleken att bli väldigt stor.

Så för att minska storleken på bildfilen finns det några strategier:

  • Minska bildens bitdjup. Du kan göra detta genom att använda en mindre färgpallete.
  • Optimera data som de enskilda pixlarna lagrar.

Verktyg och parametrering

Det finns inget perfekt bildverktyg, uppsättning optimeringsparametrar eller format som fungerar för varje bild. Bildinnehållet och dess tekniska och visuella krav avgör vilket du ska använda.

När du hittat en bra inställning kan du använda den för liknande bilder i framtiden för att spara tid. Se dock till att du aldrig antar att samma inställningar ska användas för att komprimera alla bilder.

Att lära sig om några vanliga verktyg kan hjälpa dig att göra rätt val. Dessa fyra är bland de mest använda:

  • gifsicle: Detta gör att du kan optimera och skapa olika GIF-bilder.
  • optipng: Detta används för att möjliggöra förlustfri PNG-optimering.
  • jpegtran: Den här låter dig optimera JPEG-bilder.
  • pngquant: Detta används för att möjliggöra förlust av PNG-optimering.

Leverera skalade bildtillgångar

Det finns två primära kriterier att beakta när du utför bildoptimering:

  • Optimera bildens totala antal pixlar.
  • Optimera hur många byte som krävs för att koda varje pixel i en bild.

bildformat trädStorleken på din bildfil nedbryts till totala pixlar multiplicerad med den totala byten som krävs för individuell pixelkodning. Detta är det. Tänk på detta när du arbetar för att bestämma den optimala storleken för bildfilerna på din webbplats.

På grund av detta är det mest effektiva och enkla sättet att optimera bilder att se till att du inte levererar fler pixlar som du absolut behöver för att visa tillgången i webbläsaren till den avsedda storleken.

Så, lita inte bara på din webbläsare för att skala om bilder. Det kan leda till att de visas i en lägre upplösning. Det använder också mycket extra CPU-resurser.

Det är i allmänhet inte möjligt att garantera den exakta visningsstorleken för varje levererad tillgång. Det är dock viktigt att se till att du håller alla onödiga pixlar till ett minimum.

Det är också nödvändigt att du levererar dina stora tillgångar så nära du kan till deras visningsstorlek.

Checklista för bildoptimering

All information här låter dig optimera dina bilder så att dina webbsidor blir snabbare. Du kommer fortfarande att kunna använda vackra bilder, men de kommer inte att orsaka någon betydande avmattning med sidans laddningstid.

Detta kommer att göra dina besökare nöjda och förbättra den totala funktionen på din webbplats. Tänk på följande checklistepunkter när du optimerar dina bilder:

  • Tänk vektorformat eftersom de fungerar för högupplösta och flera enheter eftersom de är oberoende av skala och upplösning.
  • Alla SVG-tillgångar bör komprimeras och förminskas. Detta tar bort onödiga metadata.
  • För rasterformat, lek runt med optimala kvalitetsinställningar. Detta kan spara ett betydande antal byte.
  • För varje tillgång, räkna ut dina funktionella krav och välj det bästa formatet för rasterbilder.
  • Automatisera när du kan för att säkerställa en konsekvent bildoptimering.
  • Servera skalade bilder så att den naturliga bildstorleken och visningsstorleken är så lika som möjligt.

Sammanfattningsvis finns det både en vetenskap och en bild-optimering. Algoritmerna och teknikerna som är högt utvecklade fungerar som vetenskapen.

Bristen på definitiva svar angående individuell bildkomprimering är konsten. I slutändan bör du leka och experimentera. Detta gör att du kan göra det bästa valet för dina bildfiler och hur de bidrar till din webbplatshastighet.

Med den ökande populariteten och sofistikeringen hos tredjeparts webbplatsbyggare som Wix, är det lätt för designers att bli slurviga men hålla fokus på att utveckla och upprätthålla goda bildoptimeringsprocesser, oavsett om man tappar en mall eller bygger en webbplats från början.

Referenser och bildkrediter:

  • PicupMedia.com
  • Computing.HomeDNS.org
  • CognitiveSEO.com
  • StackOverflow.com
  • EngineThemes.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map