Webperf
En sedan länge etablerad webbplats har oftast bilder som skapades för många år sedan. Här kommer en guide hur man kan konvertera alla bilder i en mapp i ett svep med lite enkel programmering.
Som exempel tar vi WebP som är ett format skapat just för användning på webben. WebP uttalas webbpee och är ett stillbildsformat skapat av Google. WebP funkar både för destruktiv och förlustfri bildoptimering. För video finns motsvarigheten WebM.
Du kanske är här och läser om WebP som bildformat för att Google Lighthouse förklarat att din webbplats är onödigt långsam på grund av att du använder ”omoderna” bildformat. Nu kanske det kan ses som att Google talar i egen sak eller är onödigt dramatiska när de säger att vi ska Serve images in next-gen formats, men Google är åtminstone hjälpsamma genom att belysa potentiella besparingar på bildstorlek på våra webbplatser.
Serve images in modern formats (Web.dev)
Du som helst vill slippa programmering…
Du som hellre laddar ner ett program för installation kan kolla de avslutande länkarna istället. XnConvert har jag testat och det gör något motsvarande, med en lägre tröskel för dig som inte vill programmera. Du som har Adobe Photoshop och kan tänka dig att göra arbetet manuell kan kolla in följande Photoshop-plugin: WebPShop.
Hur bra fungerar WebP?
En sak att vara medveten om ifall du går all-in på WebP som format är att det inte alltid funkar i sammanhang utanför din webbplats. Åtminstone under 2021 har det varit krångel med att få WebP-bilder att visas upp på Linkedin. Antagligen för att de bearbetar om delningsbilder och inte stödjer just WebP-formatet.
Marknadsandelen för WebP är runt 3 % enligt W3Techs i skrivande stund. Det säger väl mer att JPG och PNG är dominerande och praxis än recenserar de förtjänster WebP har.
Så hur bra stöd har de olika webbläsarna för WebP? Alla moderna webbläsare har stöd, men Apples webbläsare Safari har bara delvis stöd för WebP.
WebP image format (Can I Use)
Varför ska jag minska bildernas filstorlek?
Det finns två sidor av detta. Det ena är att det kostar mindre att drifta en webbplats med små väl optimerade bilder. Och då kan vi tänka på kostnaden på mer än rent ekonomiskt. Ett annat sätt är att se det ur ett hållbarhetsperspektiv. Det kostar på för miljön att lagra och skicka en fil.
Filen lagras både på din webbserver på minst ett ställe, kanske duplicerat om du har någon form av lastbalansering på multipla noder eller en webbcache-lösning, men filen finns också hos varje besökare när de besökt din webbsida. Utöver det kan filerna mellanlagras som buffert i diverse nätverksutrustning runt om i världen.
Klimatavtryck och användarupplevelse
All denna utrustning lämnar avtryck på miljön och ekonomin genom att dess råvaror behöver utvinnas, produkterna tillverkas, sedan fraktas, lagras inför försäljning, drivas med energi vid användning och sedan förhoppningsvis återvinnas.
Opinion: Att mäta energieffektivitet på webbplatser (Henrik Hallenius, Webperf 2021)
Boktips: World Wide Waste (Gerry McGovern, 2020). World Wide Waste finns också som podd.
En annan aspekt är att användarupplevelsen blir bättre med mindre bilder. De går fortare att ladda ner och visa upp. Dessutom för de av dina besökare som använder en mobil uppkoppling med begränsad datakvot kommer den kvoten räcka längre om du inte skickar slösaktigt stora bilder.
Exempel på minskad filstorlek – från JPG och PNG till WebP
Ibland blir filstorleken drastiskt mycket mindre. Jag körde nedan skript på en mappstruktur med cirka 20 bilder på min dator och här är några exempel på före och efter med 50% kvalitet och destruktiv-konvertering:
- JPG-foto 161 Kb 47 Kb som WebP
- PNG-skärmdump 369 Kb 90 Kb som WebP
- PNG-skärmdump 93 Kb 40 Kb som WebP
- PNG-24-foto 1300 Kb 28 Kb som WebP
- JPG-skärmdump 97 Kb 66 Kb som WebP
- PNG-24-skärmdump förlustfri-optimerad till 438 Kb 94 Kb i WebP-formatet
Med andra ord finns för det mesta en hel del att vinna. Det är lite svårt att kategorisera in WebP som antingen duktigast på det PNG-formatet gör bäst eller JPG (läs illustration/grafik vs fotografiska bilder).
För min del är det tydligt att den sista av ovanstående punkter är där jag har att vinna på att byta mitt arbetsflöde till WebP. Jag brukar nämligen spara skärmdumpar som PNG-8 eller 24 för att sedan köra filerna genom ImageOptim för att uppnå förlustfri optimering innan jag laddar upp dem. Så här långt har jag varit nöjd med att ofta kapa av en 40% av dessa PNG-bilder med ImageOptim. Med ett arbetssätt som har WebP som bildformat finns bevisligen en del till att hämta.
För JPG-filer brukar ImageOptim kunna kapa av upp till en sjundedel. I första punkten i ovanstående lista syns en klart större potential med WebP som det slutliga formatet jämfört med JPG.
Steg 0: Skaffa Python, och Homebrew om du kör Mac
Om du har en nedlåst jobbdator är det inte mycket du kan göra här mer än att hänga med i principerna och se ifall det finns något värt att fixa från en annan maskin.
Kör du Windows som operativsystem är det inte säkert att du har Python installerat. Det behöver du för den avslutande delen, där vi automatiserar skapandet av WebP-filer.
Du på Mac eller Linux lär ha Python sedan tidigare på din dator.
Om du är utvecklare på Mac har du säkert redan Homebrew på din utvecklardator. I annat fall behöver du installera det eller hitta ett annat sätt att installera ImageMagick.
Steg 1: Installera ImageMagick
ImageMagick är ett stödprogram för att skapa, läsa och redigera bilder. Det finns för alla operativsystem.
För Windows finns det en vanlig exekverbar installationsfil och på Linux finns ImageMagick som RPM, portabel applikation, med mera.
ImageMagick på Mac
Installera ImageMagick med nedan kommando i terminalen:
brew install imagemagick
ImageMagick är beroende av Ghostscript-teckensnitt. För att installera dem kör du nedan kommando:
brew install ghostscript
Det kan vara så att du får ett meddelande att Ghostscript redan installerats. Det är i sin ordning.
Ifall du kör MacPorts är kommandot istället:
sudo port install ImageMagick
Provkör installationen av ImageMagick
Provkör ImageMagick med nedan kommando (i en mapp där en bild som heter 1.jpg förväntas finnas):
convert 1.jpg -quality 50 -define webp:lossless=false 1.webp
Om allt gick väl finns nu en bild som heter 1.webp i samma mapp, men du kan förstås döpa filen till vad du vill redan i kommandot i terminalen. Du kan experimentera med att sätta lossless=true, samt justera -quality 50 till högre eller lägre kvalitet, och se hur stora filerna blir och om bildkvaliteten motiverar det.
Det här sättet att interagera med ett program kallas för ett CLI (Command Line Interface) och är det vi kommer att skripta mot i steg 2 nedan. För att läsa mer om vad ImageMagicks CLI kan göra och hur de modifierar dina kommandon kan du kolla denna länk. Du kan exempelvis automatisera skapandet av tumnaglar av dina bilder, men det kommer vi inte ta upp i denna bloggpost.
Steg 2: Python-skript för själva konverterandet av bilder
Det finns flera sätt att automatisera konvertering av bilder med hjälp av ImageMagick. Ett av dem är för Linux-användare att köra globbing av filnamnen i terminalen, men det vi går igenom nedan är lite mer utförlig och en annan väg man kan gå.
Vi kommer köra ett Python-skript som utgår från en viss mapp i hemkatalogen, detta lagrar vi ner i variabeln mypath. Om du använder Windows ser dessa sökvägar annorlunda ut.
I botten av kodexemplet hittar du två for-loopar. Den första tittar igenom mypath efter undermappar samt bilder. Hittas det undermappar kommer bilder därifrån läggas till en listan f. Bilderna måste ha filändelsen; jpg, jpeg, png eller gif, och ingen av dem får ha ett mellanslag i sin sökväg.
Den andra for-loopen går igenom listan f, det vill säga alla upptäckta bilder, och kör var och en genom funktionen convert_to_webp. Den funktionen kan anropas lite mer dynamiskt genom att man utifrån bestämmer annat än 50 i kvalitet och sätter true för en förlustfri konvertering. Men det görs inte ifall du inte ändrar anropet i slutet till exempelvis följande:
convert_to_webp(image, '90', 'true')
När skriptet kört färdig kommer den skriva ut ”Klar” i terminalen.
Kodexempel
Spara nedan kod i samma mapp där dina bilder finns. Sedan anropar du filen genom att i terminalen gå till dess mapp och skriva python konvertera-till-webp.py och trycka på returtangenten.
konvertera-till-webp.py:
from os import walk
import os
import subprocess
mypath = '/Users/marcusosterberg/dev/webp'
f = []
folders = []
def return_image_files(folderpath, f):
file_list = []
for (dirpath, dirnames, filenames) in walk(folderpath):
file_list.extend(filenames)
break
for file in file_list:
if file.endswith('.jpg') or file.endswith('.png') or file.endswith('.jpeg') or file.endswith('.gif'):
f.append(dirpath + '/' + file)
def return_folders(folderpath, folders):
folder_list = []
for (dirpath, dirnames, filenames) in walk(folderpath):
folder_list.extend(dirnames)
break
for folder in folder_list:
if not folder.startswith('.'):
folders.append(folder)
def convert_to_webp(file_location, quality='50', lossless='false'):
new_file_location = os.path.splitext(file_location)[0] + '.webp'
if ' ' not in new_file_location:
subprocess.run("convert {0} -quality {1} -define webp:lossless={2} {3}".format(
file_location, quality, lossless, new_file_location),
shell=True, check=True)
else:
print("Mellanslag hittades i sökvägen:", new_file_location,
"\nVänligen döp om filen/mappen och kör konverteringen igen.")
return_folders(mypath, folders)
for idx, folder in enumerate(folders):
if idx==0:
# anropar rotnivån av mappar
return_image_files(mypath, f)
return_image_files(mypath + '/' + folder, f)
else:
return_image_files(mypath + '/' + folder, f)
for image in f:
convert_to_webp(image)
print('Klar')Förbehåll om koden
Jag skriver inte produktionsredo kod. Implementera inte ovanstående utan se det snarare som inspiration hur man kan göra.
Den här metoden kommer misslyckas med bilder som inte har en filändelse som berättar vilket format den har. Sånt är vanligt på Mac-datorer, men det får väl sägas vara webbstandard att ett filnamn har en ändelse. Om detta blir ett problem för dig behöver du istället fråga filen vilken typ den har.
En annan grej är att koden inte tittar mer än en nivå ner i mappar efter bildfiler. Om du vill lösa detta får du skriva om kollen så den körs rekursivt.
Ytterligare en grej är att den tycks stupa på mellanslag i mapp- eller filnamn, men det ska man ändå inte ha i filstrukturer som publiceras på webben. Ifall ovanstående skript stöter på en sådan sökväg kommer den berätta det.
Andra sätt att konvertera bilder
- XnConvert – XnViews program batchkonverterar bilder och finns till Windows, Linux och Mac. En licens kostar 15€ och är släppt som freeware.
- Downloading and Installing WebP (Google Developers)
- JPEGmini – minskar bildstorleken utan att sänka kvaliteten.
- ImageOptim – finns som program till Mac men också som webb-API för optimering av filer direkt från din webbserver
