Hur stor ska en bild vara på webben

Många webbplatser existerar onödigt tunga, samt enstaka från dem största bovarna existerar bilderna. detta existerar vanligt för att 60-80% från storleken vid enstaka webbsida består från bilder. Genom för att optimera bilderna kunna ni ett fåtal sidan för att ladda snabbare, samt vid sålunda vis anlända en steg närmare varenda fördelar ett snabb webbplats ger.

I den på denna plats artikeln kommer jag informera mer angående dem olika filformaten liksom används till bilder vid internet samt ge dig råd på grund av hur ni optimerar dina bilder på bästa sätt.

Bildbehandlingsprogram

Har ni en bildbehandlingsprogram ni existerar tillfreds tillsammans, likt Photoshop mot exempel?

Toppen, då förmå ni gå vidare mot nästa rubrik.

Om ni ej besitter en bildbehandlingsprogram förmå jag rekommendera Paint.NET, vilket både existerar kostnadsfri samt äger flera funktioner.

Välja korrekt filformat

Det finns tre filformat vilket används flitigt vid internet, samt en filformat liksom börjar bli vanligare från enstaka god anledning.

JPEG

JPEG (som äger filändelsen  och därför felaktigt kallas till JPG ibland) bör användas på grund av fotografier samt verklighetstrogen datorgrafik.

Dessa bilder innehåller extremt flera färger, vilka komprimeras väldigt effektivt då dem existerar sparade inom JPEG (mer angående komprimering senare inom artikeln).

Skulle exempelvis ett logotyp sparas vilket JPEG skulle den bli inom sämre standard samtidigt vilket filstorleken skulle bli många större.

PNG

Detta filformat lämpar sig bäst på grund av illustrationer, alltså inom princip allt liksom ej existerar fotografier, exempelvis logotyper, ikoner, diagram samt ytterligare lätt grafik.

Använd rätt filformat

Dessa illustrationer äger många färre samt renare färger, samt blir inom många förbättrad standard likt PNG-bild samtidigt vilket filstorleken blir mindre.

Skulle en fotografi sparas vilket PNG skulle ingen märkbar skillnad ske utseendemässigt, dock filstorleken skulle antagligen bli runt fem gånger större, vilket fullfölja för att den tar betydligt längre period för att ladda in vid enstaka webbplats.

GIF

Illustrationer sparades ofta inom GIF-format förr, innan detta nyare PNG-formatet kom.

ett GIF-bild kunna endast äga 256 färger, vilket fullfölja för att den duger fint på grund av lätt grafik, dock äger man flera runda former samt färgskiftningar lämpar sig PNG förbättrad. Sanningen existerar för att PNG nästan ständigt lämpar sig förbättrad än GIF, inom samt tillsammans för att man är kapabel utföra mer tillsammans enstaka PNG samtidigt likt filstorlekarna ej skiljer sig således många åt.

GIF-bilder förmå till övrigt artikel animerade, vilket existerar något vilket dem andra bilderna ej förmå vara.

Skulle en fotografi alternativt omfattande bild sparas såsom GIF skulle färgerna samt formerna vid bilden bli kantiga samt pixliga.

SVG

Filformatet SVG existerar således kallad vektorgrafik, samt existerar ännu ganska nytt vid webben ?

ca 10% från världens befolkning besitter på grund av gamla webbläsare på grund av för att behärska titta bilderna.

Så gör du för att optimera dina bilder

Medan JPEG, PNG samt GIF (så kallad rastergrafik) består från fasta pixlar, sålunda består vektorgrafik från enkla former samt linjer vilket tillsammans beskriver ett foto. Den stora fördelen tillsammans vektorgrafik existerar för att man förmå skal angående den hur många man önskar, samt den kommer ändå ständigt existera knivskarp.

Ett vanligt bekymmer hos rastergrafik existerar för att dem är kapabel bli suddiga vid retinaskärmar.

Detta bekymmer äger förstås ej vektorgrafik.

SVG fungerar bäst på grund av enkla illustrationer (logotyper, ikoner, diagram), vilket fullfölja för att filformatet möjligen ersätter PNG ett ljus. Filstorleken blir oftast mindre, dock besitter bilderna väldigt flera specifikation existerar PNG för att föredra.

Vad är lämplig storlek på en bild för ben? För att en hemsida ska laddas snabbt och gillas både av besökare och Google så behöver bilder minskas ner till lämplig storlek

inom skrivande stund existerar detta hur likt helst för tidigt på grund av för att övergå helt mot SVG.

Komprimering

Filformaten JPEG samt PNG kunna komprimeras (eller rättare sagt optimeras), samt vid därför vis levereras snabbare mot webbläsaren.

JPEG

När ni sparar JPEG-bilder inom ditt bildbehandlingsprogram kunna ni välja hur god standard ni önskar för att bilden bör äga.

flera tänker för att dem önskar äga den bästa kvaliteten samt väljer därför 100%, dock sanningen existerar för att ni oftast förmå välja således nedsänkt standard vilket 80% utan för att man ser någon skillnad ?

ibland ännu lägre. samt sämre standard leder inom detta på denna plats fallet mot enstaka mindre filstorlek.

Bilderna ovan existerar inom kvaliteterna 100% respektive 80%. Ser ni någon skillnad vid dem? ej jag heller.

Bildstorlekar (bildytans storlek i antal pixlar), i bredd

Skillnaden ligger dock inom filstorleken ? medan vänstra bilden existerar 78,4 kB existerar den högra endast 17,4 kB. då oss minskade kvaliteten mot 80% fick oss tillsammans andra ord endast 22% från filstorleken.

Är siffrorna svåra för att greppa förmå oss yttra således denna plats istället: Sitter en besökare tillsammans med enstaka dålig 3G-uppkoppling samt laddar in den vänstra bilden vid 1 kort tid, därför laddar besökaren in den högra bilden vid 0,22 sekunder.

PNG

En PNG-bild kunna sparas inom tre olika varianter ?

8, 24 samt 32-bitar.

Helst mellan 100-300 kB

Ju lägre bitar desto mindre filstorlek, samt ju högre bitar desto förbättrad kvalitet.

8-bitars PNG fungerar inom princip likadant vilket enstaka GIF-bild, alltså förmå bilden endast äga 256 färger. Både 24- samt 32-bitars är kapabel äga flera miljoner färger. detta vilket skiljer dem numeriskt värde åt existerar för att 32-bitars förmå äga semitransparenta färger, alltså färger såsom existerar lite genomskinliga.

Det enklaste existerar för att ni provar dig fram mot vilken variant vilket passar bäst på grund av din foto.

inom vissa bildbehandlingsprogram kunna man låta programmet besluta hur flera bitar PNG-bilden bör sparas inom, då väljer den därför nedsänkt likt möjligt utan för att kvaliteten påverkas.

Spara bilden inom korrekt storlek

Ett misstag likt jag ofta ser andra utföra existerar för att dem lägger till en foto inom full storlek samt sedan förminskar den inom HTML-koden.

Här följer några allmänna bästa praxis när det gäller hur man optimerar bilder för ben: Om du använder en WordPress-plugin, använd en som komprimerar och optimerar bilder externt på sina servrar

Detta betyder självklart för att webbläsaren måste ladda ner bota den stora bilden, vilket existerar extremt onödigt. Ta istället reda vid vilken storlek ni kommer nyttja samt förminska bilden inom ditt bildbehandlingsprogram innan ni lägger mot ni vid webbplatsen.

Använder ni WordPress samt en välgjort tema behöver ni ej tänka vid detta eftersom bilderna då förminskas mot korrekt storlek automatiskt.

existerar ditt WordPress-tema uselt gjort kunna ni dock behöva ändra storleken manuellt.

Ytterligare optimeringar

Ovanstående råd brukar räcka till dem allra flesta. önskar ni optimera dina bilder ännu mer kan jag rekommendera onlinetjänsterna TinyPNG respektive TinyJPG, som även tar försvunnen onödig information ifrån filerna samt vid därför vis är kapabel ett fåtal ner filstorleken lite mot.

Försök dock ej för att jaga enstaka byte, detta existerar bara tidsödande.

Slutord

Som ni säkert äger märkt inom denna produkt förmå bildernas filstorlek göras många mindre utan för att besökarna märker någon visuell skillnad. dem kommer däremot märka för att laddtiderna blir lägre, samt ni kommer förhoppningsvis märka för att affärerna går bättre.