In dit artikel laat ik je zien hoe je snel en gratis PNG’s kunt optimaliseren op een Mac voor jouw website.
Gedurende het ontwikkelen en onderhouden van deze website, gebruik ik een aantal programma’s om PNG afbeeldingen te optimaliseren. In mijn opinie presteert PNGOUT het beste (voor Windows zie ardfry.com waar je ook een Adobe Photoshop plugin kunt vinden). Omdat ik vaak tussen MacOS X en Windows wissel, wilde ik PNGOUT natuurlijk ook voor de Mac hebben. Gelukkig is een versie voor de Mac: PNGOUT port voor MacOS … helaas is het een command-line programma welke geen grafische interface heeft.
Natuurlijk heb ik gespeeld met Automator (komt met MacOS X), en natuurlijk heb ik geëxperimenteerd met AppleScript en Shell scripts, maar een lekker eenvoudige manier om met PNGOut kreeg ik niet echt voor elkaar … tot ik ImageOptim van Kornel Lesinski vond.
Aan de slag met ImageOptim …
ImageOptim ondersteund niet alleen PNGOUT. Het ondersteund ook andere tools om andere formaten to optimaliseren.
Tools zoals AdvPNG, OptiPNG, Pngcrush, JpegOptim, jpegtran, en Gifsicle.
Helaas moet je PNGOUT zelf installeren i.v.m. de licentie voorwaarden.
ImageOptim bied ook nog eens een aantal sleur-en-pleur opties (sleep 1 of meer afbeeldingen naar het programma ikoontje of naar het open programma venster), en de mogelijkheid om ImageOptim toe te voegen aan het “Services” menu van de Mac Finder (klik 1 of meer bestanden met de rechter muisknop) … Ik wou dat dit beschikbaar was voor Windows … geweldig gewoon!
Stap 1: Download de benodigde bestanden
De benodigde bestanden zijn gratis en ik kan je aanraden ze alle drie te gebruiken:
Om het makkelijk te houden …
Ik heb alle 3 bestanden in een enkel zip bestand gezet zodat je met een enkele klik alles kunt downloaden – ik hoop dat ik niet de een of andere licentie voorwaarde geschonden heb door dit te doen, maar het maakt het makkelijk om al de originele bestanden te downloaden. De bestanden zijn geschikt voor MacOS X 10.6 en nieuwer.
N.b.: Het is natuurlijk altijd een goed idee om op de aangegeven websites te kijken of er een nieuwere versie beschikbaar is.
Download - ImageOptim Package
| Bestandsnaam: |
ImageOptim-Package.zip |
| Platform: |
Apple macOS |
| Versie: |
1.3.3 |
| Omvang: |
2.1 MB |
| Datum: |
2013-06-28 |
|
Download Nu
Stuur me Koffie
|
Stap 2: Installatie van ImageOptim
Na het uitpakken van de bestanden moet je het ImageOptim (of: ImageOptim.app)bestand naar de Applications of Utilities folder slepen.
Stap 3: Installeer PNGOUT (optioneel, maar een echte aanrader!)
Als je PNGOUT wil gebruiken dan moet je PNGOUT natuurlijk installeren.
PNGOUT is een command-line tool (net zoiets als een DOS commando) en je zult het ergens op de harddisk van jouw Mac moeten zetten. Ik heb het bestand in “/sbin” omdat het in het zoekpad van de Shell staat.
In de Finder (klik het Finder ikoontje of klik op de desktop) ga naar het menu “Go” en kies “Go to folder“.
Finder – Go to Folder optie
In venster opent zich met de vraag naar welke locatie je wilt gaan, voer “/sbin” in (zonder de aanhalingstekens) en klik op “Go“:
Finder – Voer het pad in en klik op “Go”
De Finder opent zich nu in “/sbin“; sleep het bestand “pngout” uit het uitgepakte bestand naar “/sbin” – Jouw Mac zal om jouw admin wachtwoord vragen. Voer jouw wachtwoord in als bevestiging.
Controleren of dit goed ging;
Open een Terminal venster (Applications → Utilities → Terminal) en type “pngout” (zonder de aanhalingstekens) en druk op de ENTER toets. Het Terminal venster zal zoiets als hieronder is aangegeven weergeven;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| PNGOUT [In:{PNG,JPG,GIF,TGA,PCX,BMP}] (Out: PNG) (options...) Jul 22 2011
by Ken Silverman (http://advsys.net/ken)
Mac port assistance by Jonathon Fowler (http://www.jonof.id.au/pngout)
PNGOUT optimizes PNG size losslessly using my own deflate algorithm (not Zlib)
With the right options, it can often beat other programs by 5-10%. Options:
-c# PNG output color: 0=Gray, 2=RGB, 3=Pal, 4=Gray+Alpha, 6=RGB+Alpha
-f# PNG output filter: 0=none, 1=x, 2=y, 3=x&y, 4=Paeth, 5=mixed, 6=reuse
-d# Override default bitdepth: 0(min),1,2,4,8 (valid only in /c0,/c3 modes)
-s# Select strategy. 0:Xtreme(default), 1:Intense, 2:Longest Match,
3:Huffman Only, 4:Uncompressed
-b# Block split threshold (lower=more blocks, 0=1 block/file, default=256)
Use trial&error! Suggested values to try are: 0,128,192,256,512,1024,..
-n# Exact number of Huffman blocks (overrides /b#)
-r Randomized initial tables (good for many trials with same options)
-k? 0=Remove optional chunks (default), 1=Keep all
p=Keep palette indices, s=Keep settings for /c,f,d,b
-k(Chunk,Chunk,..) Preserve only named chunk(s). Example: -kgAMA,bKGD,tEXt
-v,q,l Verbose,Quiet,List mode (use '-' as filename to specify stdin/stdout)
-y Assume Yes at the 'overwrite file?' prompt
-force Write file even if bigger.
-mincodes# Workaround for buggy decoders. 1:Zlib 1.2.1 bug, 2:buggy mobiles
The 1st filename is the input. If you omit the output
filename, PNGOUT will use the same filename with a .PNG extension. Examples:
$ pngout inlarge.bmp outsmall.png <- writes outsmall.png
$ pngout duke3d.png -c2 -f3 -b128 -kbKGD -v <- writes duke3d.png if smaller |
Vervolgens moeten we ImageOptim laten weten dat PNGOUT gebruikt kan worden.
Start “ImageOptim“, en ga naar het “ImageOptim” menu waar je “Preferences” selecteert.
Een venster zal zich openen waar je de tab “PNGOUT” kiest zodat we het pad en de naam van het PNGOUT bestand kunnen invoeren (“/sbin/pngout” zonder de aanhalingstekens zoals hieronder zichtbaar is), zorg er voor dat de optie “Enabled” aangevinkt is. Als alles ingevoerd is kun je het venster sluiten …
ImageOptim – Openen van Preferences
ImageOptim – Preferences – Voer “/sbin/pngout” in als de locatie van PNGOUT
TIP
ImageOptim zal nu
PNGOUT en de andere programma’s gebruiken in het optimalisatie process. In het
Preferences scherm kun je daarom bepaalde programma’s uitzetten voor snelheidswinst (PNGCrush is nu bijvoorbeeld overbodig).
Stap 4: Installeer de ImageOptim workflow (optioneel, maar erg handig!)
Het toevoegen van de workflow maakt het gebruik van ImageOptim nog handiger omdat het een optie toevoegt aan het “Services” menu van de Finder. Overigens werkt “Openen Met” als je met de rechtse muisknop files aan klikt natuurlijk ook prima.
Je kunt nu namelijk 1 of meer bestanden aan klikken met de rechter muisknop, waar je dan onder de optie “Services“, “ImageOptim” kunt kiezen. Dit zal dan ImageOptim openen en de gekozen bestanden meteen optimaliseren.
ImageOptim – Beschikbaar in het Services menu
Installatie van de workflow is simpel,…
Onder MacOS X Lion merkte ik dat het workflow bestand dubbel klikken (“ImageOptim.workflow” of “ImageOptim” – afhankelijk van de instellingen van jouw Mac) meteen een installatie process van de Automator activeert en al het werk uit handen neemt.
Op oudere Mac’s kan het nodig zijn dit handmatig te moeten doen. Kopieer het bestand in de “~/Library/Services/” map (dezelfde methode die we gebruikt hebben om PNGOUT naar “/sbin” te kopieren) of door het workflow bestand te openen in de Automator en dan de “Save As” optie te gebruiken.
Automator – Automatische installatie van de workflow
Automator – Automatische installatie van de workflow – klaar!
En dat is alles … je kunt nu aan de slag met optimalisatie van afbeeldingen.
Reacties
Er zijn nog geen reacties geplaatst.
Je kunt jouw eigen opmerkingen plaatsen m.b.v. dit formulier, of een reactie op een bestaande opmerking plaatsen door op de "Beantwoorden" knop te klikken.