Bildkomprimering med TinyPNG

Om du, som jag, har en blogg där du så utförligt du bara kan förklarar allt du skriver om så blir bilder en extremt viktig faktor. Rättare sagt; bildernas fysiska storlek blir viktig. Du har säkert sett att en HD-bild på 1920*1080 kan bli över 2-3 MB och fastän den bara skulle vara 1 MB eller rent av 5-600 KB stor så är det fortfarande ett big no-no. Du bör, för att bloggen ska fungera så smidigt och snabbt som möjligt, försöka hålla dina bilder till max 30-50 KB.

För 1920*1080 så har jag en personlig regel; max 100 KB. Jag använder bara 1920*1080 som visningsbild (featured image). Problemet som du säkert redan vet är kvalité. Jag menar, det finns väl ingen som har något emot att bilden blir 30-50 KB stor om kvalitén behålls; men hur behåller vi kvalitén? Läs hela artikeln innan du använder TinyPNG sidan. Tack!


 

1: hemsidan som utför underverk

Besök tinyPNG sidan och dra & släpp (drag and drop) de bilder du vill komprimera. Notera att formatet måste vara antingen .png eller .jpg och att sidan ”bara” tar emot maximalt 20 bilder åt gången varav varje bild får max vara 5 MB i storlek. Se bild.


 

2: ladda ner dina nya bilder

Låt pandan arbeta och välj sedan ”download” till höger om bilden. Har du komprimerat många bilder som i mitt exempel nedan så finns det en ”Download all” knapp undertill. Du kan alltså välja mellan att ladda ner varje fil enskilt eller att få alla som ett .zip arkiv.

I vissa/ många fall kan du räkna med att få upp till 80% komprimering utan att någonsin förlora någon kvalité. Det kallar jag ett effektivt verktyg.

 

WordPress är förinställt på att dela upp bilden du laddar upp via Media. Du får en thumbnail, medium och large. Vill du sätta stopp för detta så kan du ändra på detta beteende genom att via FTP eller via ditt webbhotells filhanterare navigera till ditt temas functions.php (wp-content/themes/tema/functions.php) och där välja ”Edit” alternativt ”Redigera”.

Lägg till följande rad längst ner alternativt under texten som heter något i stil med ”Your functions here”: add_filter('jpeg_quality', function($arg){return 100;});

Genom att lägga till den raden kod så förhindrar du att WP automatisk ändrar dina bilder överhuvudtaget. Det innebär att den bild du laddar upp enbart finns tillgänglig i sin original storlek. Med andra ord; WordPress skapar alltså inte någon thumbnail, medium eller large variant av din bild per automatik om du använder den koden.


 

3: avslutningsvis..

Du sparar väldigt mycket utrymme som i praktiken betyder två saker;

  1. Din blogg / hemsida laddas fortare då varje sida/ inlägg blir mindre i storlek för webbläsaren att läsa in
    1. Din blogg/ hemsida blir alltså snabbare
  2. Utrymmet din domän har hos ditt webbhotell påverkas inte lika mycket.
    1. Du får alltså plats för mer på din blogg/ hemsida

Så i praktiken så blir effekten enbart positiv. Här är länken igen till TinyPNG.


 

Frågor? Lämna en kommentar så återkommer jag.

Om Bjornen

Jag är en hobbyförfattare & WP-nörd som försöker tömma hjärncellerna på kreativitet. När jag inte skriver så utökar jag mina WP-kunskaper genom att blogga och hänga på diverse sociala medier. Jag gör mitt bästa och min passion för WordPress enbart växer.

Kommentera


OBS: Alla kommentarer granskas innan dom blir publicerade. Ha en go dag!