Optimera bilder till hemsidan - både Mac och PC

 
 
Frihet och tjej med blont hår. Optimera bilder för hemsidan, både Mac och PC
Sol och berg. Optimera bilder för hemsidan, både Mac och PC
 

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.

Vad är lämplig storlek?

Filstorleken för varje bild ska inte vara mer än 500 kB. Helst 100-300 kB.

Bildstorlekar (bildytans storlek i antal pixlar), i bredd:
Horisontella bilder för tex. banner: min 1500px, helst 2500px.
Vertikala och kvadratiska bilder: 1000px.


Bildstorlek. Optimera bilder för hemsidan.


Det är viktigt med högkvalitativa bilder för det ska bli en visuellt tilltalande webbplats. Använd helst bilder du tagit själv eller bilder som du köpt. Man får absolut inte ta bilder hur som helst från internet som man tex. gjort sökning på.

Annars finns min älsklings-bildbank med fria bilder, Unsplash.com.

 

När du har en bild som du laddat hem från en bildbank eller laddat in från din kamera så är den väldigt stor och tung. Till exempel den här som jag hämtade från Unsplash:

Storlek: 5184 x 3456 pixlar
Filstorlek: 2 MB

(Du kommer till originalbilden och kan ladda hem den genom att klicka på bilden)




Minska ner den till lämplig storlek

Det finns säker mängder med sätt att förminska och optimera bilder men för er som inte använder Photoshop kan någon av dessa två(tre) sätt fungera bra:


Mac

 

I Mac använder du programmet Förhandsvisning.

Högerklicka på bilden i Finder för att optimera bilden. Tryck sedan på verktyg och justera storlek.

Högerklicka på bilden (som du har i Finder eller på skrivbordet) och tryck på Öppna. Då hamnar du i Förhandsvisning.

 
Justera storlek genom att trycka på Verktyg och sedan Justera storlek. Optimera bilder i Mac.

Tryck sedan på verktyg och justera storlek.

 
Optimera bil i Förhandsvisaren.

Ändra sedan Bredden. I detta fall ska jag inte ha det som Banner och skriver 1000 på bredden och då justeras höjden automatiskt om “Skala proportionellt” är förkryssat. Tryck sedan OK.

 

Den slutliga storleken blev 133 kB.
Är filen ändå för stor efter detta kan du använda Tiny PNG se längre ner på sidan.

Ändra namnet på filen om du inte gjort det redan.

Passa på att ändra namn om du inte gjort det till något som beskriver vad det är på bilden. För att den ska bli sökbar på Google. (Ej Å, Ä och Ö)

 
 

PC

Gör som ovan men istället för programmet Förhandsvisning i Mac så öppnar du din bildfil i programmet Paint som brukar finnas med i Windows.

 

Högerklicka på filen i Filhanteraren, öppna med Paint.

 

Klicka på ändra storlek.

Fyll i de värden du önskar.

 

Är filen ändå för stor efter detta kan du använda Tiny PNG, se nästa avsnitt.

 

Tiny PNG

Ytterligare ett sätt att minska storleken på bilden är att använda sig av tjänsten Tiny PNG, tinypng.com.
Hur smidigt som helst!


Klicka och öppna eller dra in den filen i Tiny PNG.

Klicka och hämta en fil från din dator eller dra in filen till rutan.

 
Tinypng-com

Här drog jag in en fil som var 645 kB och den blev efter optimering 260 kB. Perfekt, sen är det bara att ladda ner till din dator genom att trycka på download.

 

Hoppas det fungerade för dig!
Hälsar Therese


 

Pinna gärna

Optimera bilder för hemsidan. Pinna gärna.
 
 
 

Therese hjälper dig med Squarespace

Hoppas inlägget var till nytta för dig.

Älskar att ge tips på bra lösningar så du kan nå ut och livnära dig på ditt företag.

Prenumerera på mitt nyhetsbrev här →
Hjälp med din hemsida? →