Bildkomprimering & ShortPixel = Perfekt

Att optimera sina bilder för webben och framförallt då man driver en blogg borde vara en självklar tanke. Men det är det inte, tyvärr. Tidigare så recenserade jag ”TinyPNG” plugin samt deras webbgränssnitt för uppladdning och komprimering. Komprimering, det ordet borde du lägga på minnet och från och med nu. Du hittar ShortPixels plugin här.

Jag blev kontaktad av Alex, deras Head of Product, via e-post där han bad mig göra en recension av deras plugin och tjänster. Jag tittade därefter på deras system, tjänst och plugin. Sen tittade jag på priserna. Jag kunde inte låta bli att undra över hur deras komprimerings algorithm skulle stå sig i jämförelse med TinyPNG som enligt WordPress används av över 100 000 WP:are. ShortPixel har 50 000+ användare.


 

Inledning och & Pris

Du kan på både TinyPNG och ShortPixel ladda upp via webben, låta deras system ta hand om komprimeringen och därefter ladda ner din(a) komprimerade fil(er).

Så här ser TinyPNG ut.

Så här ser ShortPixel ut.

Skillnad? Ja, verkligen. Redan här ser vi en skillnad som är mer än dubbelt så stor. TinyPNG erbjuder 20 filer i stöten, ShortPixel erbjuder 50. Dock så märkte jag en sak väldigt tydligt, men det ska erkännas att det kan vara min skärm (som för övrigt är en full hd på 24″ med 1920*1080 upplösning i widescreen format av märket Asus) som gör att jag märker en tydlig skillnad. Jag pratar om ShortPixels egna granskningsverktyg. Efter att ha laddat upp en fil på deras hemsida så kan man klicka på det lilla ögat och få upp ett fönster som låter dig granska originalet genom att jämföra med ShortPixels komprimerade version av samma fil. Man kan dra linjen till höger och vänster för att jämföra. Se exempel nedan 

Så, jag gick till Google och laddade ner deras egna bild.

Jag sparade bilden i dess original format och namn. Sen laddade jag upp den på deras sida och drog i linjen. Man ser en tydlig skillnad i färgerna, speciellt för ögat på den lilla roboten. Se bild.

Även texten blir sämre. Det är en uppenbar försämring.


 

Priser & Extra funktioner

TinyPNG erbjuder en ökad filstorlek, från 5 till 20, med sitt årliga paket. Där finns bara ett paket och det kostar $25 (dollar) per år. Oavsett om du väljer 1, 3 eller 11 år så är priset $25 per år. Väljer du TinyPNG:s plugin så får du 500 konverteringar gratis per månad. 500 som blir 100/125 beroende på hur du räknar då varje variant av filen räknas som en konvertering (thumbnail, medium, large och originalet). 500 krediter räcker inte långt för en aktiv bloggare. Enbart denna artikel genererade 30 bilder totalt. 30 gånger 5. Det tar slut fort med ett gratis konto.

ShortPixel erbjuder en mängd olika alternativ, det är bara att välja och vraka och deras plugin ger dig 100 konverteringar per månad som gratis alternativ. En viktig sak att faktiskt poängtera här är att ShortPixel inte drar en kredit om bilden inte går att optimera med minst 5%. ShortPixel erbjuder också backup och en massa annat. Läs mer på deras WordPress plugin-sida.

 

TinyPNG Prisplan

ShortPixel en-gångs-planer

ShortPixel fasta planer.


1: plugin och installation

Det första du behöver är en API-nyckel. Denna får du genom att besöka ShortPixels hemsida där du klickar på ”FREE SIGN UP” knappen mitt på sidan. Fyll i din e-post och klicka på ”SIGN UP”. Du får därefter ett mejl med din API-nyckel. Se exempel nedan 

Och så här ser mejlet ut. Jag har suddat ut min API-nyckel av uppenbara skäl :)

Ladda ner och ladda upp alternativt gå till ”Tillägg”  ”Lägg till nytt” i WordPress, sök på ”ShortPixel”, installera och aktivera.

Så här ser det ut ”efteråt” jag låtit ShortPixel optimera ”Media” och mina mappar (wp-admin, wp-content/themes och wp-includes

Under ”Inställningar”  ”ShortPixel”  ”Statistics”

För att undvika missförstånd så fick jag ett 10 000 paket som tack för min recension av deras plugin.

 


2: storleks exempel

Det som tilltalar mig mest är att ShortPixel stödjer JPEG, PNG, GIF och PDF, erbjuder gratis PNG  JPG konvertering samt det faktum att du välja till WebP* om du önskar. Du kan till och med välja att optimera andra mappar än /wp-content/uploads vilket är densamma som ”Media” i WordPress. Jag la till wp-admin, wp-includes, /wp-content/plugins och themes – en funktion som ger det där lilla extra.

 

* WebP är förlustfria bilder och 26% mindre i storlek jämfört med PNG. WebP är 25-34% mindre än jämförbara JPEG-bilder med motsvarande SSIM-kvalitetsindex. För fall där förlustfri RGB-komprimering är acceptabel blir filstorleken 3 gånger mindre jämfört med PNG, vilket är en stor förbättring.

 

Gällande WebP så är det tyvärr inte alla webbläsare som kan/ vill hantera detta nya, av Google, bildformat.

De röda boxarna indikerar om webbläsarens version stödjer WebP eller ej. Exempel 

Fördelar med ShortPixel 

  1. Engångs-paketen går aldrig ut, oavsett hur många krediter som finns kvar
  2. ALT-text för bilder påverkas inte av komprimeringen
  3. Aktivera via API-Nyckel i wp-config (define(‘SHORTPIXEL_API_KEY’, ‘APIKEY’)

OBS: punkt tre går att göra med TinyPNG också, men det är fortfarande en fördel.

 

Nackdelar? Ja, det finns tre som jag hittills upptäckt. 1) Du kan inte använda deras plugin på en localhost installation. Du kan däremot använda deras command-verktyg, exempel nedan

cd shortpixel-php-master/lib
php cmdShortpixelOptimize.php --apiKey=<<YOUR_API_KEY>> --folder=<<FOLDER_PATH>>

 

Oavsett om du valt att göra back-up eller ej så får du automatiskt en mapp i din filhanterare. Detta är nackdel nummer två. Detta borde inte ske om inte man valt att aktivera backup. Se bild 

 

Nackdel nummer tre är tiden som det tar att komprimera. Det tar i och för sig inte lång tid, men det för lång tid för att det ska kännas okej. Vad menar jag? Så här: jag vill kunna ladda upp 20 bilder som jag fixat med via ”Media” och det ska inte ta mer än en sekund eller två per bild. Det gör det inte heller med ShortPixel. Så långt är jag nöjd. Det var efteråt som jag satt still och…. väntade. Processen för 25 bilder (exempel nedan) tog ungefär tre minuter för ”systemet” att komprimera. TinyPNG tog en knappt halva den tiden på sig.

 

Och nu till resultatet 

 

Ja, TinyPNG tar kortare tid på sig men den ger också ett helt annat resultat. ShortPixel gör så mycket mer. Jag ställde in min på att konvertera från PNG till JPG och på att skapa WebP samtidigt. Detta innebär i praktiken att om besökaren använder Chrome som webbläsare så serveras hen med WebP bilden. Använder besökaren Firefox eller Safari som exempel så serveras hen med en JPG bild. Allt detta är inbyggt och fungerar per automatik oavsett cache-plugin eller ej. Så med det i åtanke så accepterar jag tiden det tog. När jag efteråt kollade min filhanterare och såg det faktiska resultatet så blev jag riktigt nöjd. Det enda tråkiga är det ibland/ ofta dåliga resultat som ShortPixel ger.

Det kostar inte heller en kredit för att få en WebP-version av varje fil. Varken konverteringen eller komprimeringen för WebP kostar en kredit.

 

Tittar vi på TinyPNG och deras resultat för en bild på 1262 * 801 med en storlek på 98.3 KB så fick jag resultatet 27.3 KB.

 

ShortPixel gjorde samma jobb ännu bättre.

Ett resultat som för vissa kanske ses som meningslöst. -72% eller -78%? Jag väljer -78%. Värt att notera är två saker; deras plugin är optimerad på ett annorlunda sätt. Deras plugin ger ett ännu bättre resultat än hemsidan och två; jag zoomade in för att textstorleken skulle gå att läsa ordentligt på bilden ovan. Kvalitén i bakgrunden är sämre tack vare det. Nedan ser vi hur TinyPNG ger oss 36.8 KB för en bild som från början är 196.8 KB.

Och samma resultat för ShortPixel 

Det kanske låter eller känns poänglöst att jämföra på detta sätt fram och tillbaka men då ber jag dig tänka så här: bloggar du så hanterar du mycket bilder och det blir snabbt en storlek av det. Här sparade vi 16 KB. Tänk dig nu hundratals bilder och WebP bilder som blir ännu mindre. Samma bild som jag använde som test kan du se nedan. Jag säger tack och bra jobbat ShortPixel!

Notering:
TinyPNG uppger ett resultat när den komprimerar via ”Media” men levererar ett annat då man kontrollerar filstorleken i filhanteraren (webbhotellets filhanterare som visar filerna på servern). Jag har skickat feedback till utvecklaren om detta.

 


 

3: optimera hela Media biblioteket

Du har två alternativ. Det snabbaste och lättaste är att gå via ”Media” ”Bulk ShortPixel”. Du kan också gå via ”Inställningar”  ”ShortPixel” och längst ner på den sidan finns en knapp som heter ”Save and Go to Bulk Process”. Klicka på den. Klicka sedan på ”Start Optimization” och låt processen ta sin tid. Nedan exempel på hur det ser (såg ut för mig) då jag optimerade bilder som redan tidigare blivit optimerade med TinyPNG. Jag minskade den totala storleken (inklusive wp-themes, wp-includes och wp-admin) på alla extra mappar och ”Media” med totalt 50%.

 

 

 

PDF

ShortPixel inkluderar möjligheten att komprimera PDF:er vilket jag ser som ett enormt stort plus då jag skriver många berättelser. Alla mina berättelser gör jag om till PDF:er och nu har även dom blivit komprimerade – något som jag uppskattar oerhört mycket. En möjlig och gratis service som TinyPNG INTE erbjuder. Här går vi från 540 KB till 210 KB. Tack, igen.


 

4: produkter och tjänster

ShortPixel erbjuder även en del tjänster, verktyg och API för utvecklare. Se nedan. Klicka här för att läsa mer.


 

Avslutningsvis..

Jag är nöjd med ShortPixel och deras tjänst. När mina krediter väl går ut så är det helt klart värt det att köpa ett nytt 10 000 paket för under 85 svenska kronor.

Frågor? Funderingar? Behöver du hjälp? Lämna en kommentar eller kontakta mig på Facebook Messenger. Tack för att du läste!

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!