Handig! Squoosh optimaliseert afbeeldingen rechtstreeks in de browser

Door: Raymon Mens - 7 reacties

Squoosh is een nieuwe tool om afbeeldingen te optimaliseren. Dat wil zeggen: de bestandsgrootte te verminderen zonder aanzienlijk verlies van kwaliteit. Het is niet de eerste tool in dit segment, er zijn er zelfs tientallen, wij zijn fan van ImageOptim voor de Mac. Nieuwkomer Squoosh heeft echter een heel andere aanpak.

Squoosh is een website, maar doet al het werk lokaal in je browser. Het is eigenlijk een web-app die zelfs zonder internetverbinding kan werken.

Afbeeldingen optimaliseren

De web-app is ontworpen door Google-medewerkers als een demonstratie van wat mogelijk is in een moderne webbrowser. Alles wat nodig is wordt in de lokale opslag van je browser geplaatst en vervolgens kun je afbeeldingen optimaliseren, zelfs zonder internetverbinding. Het voordeel van deze aanpak is dat de afbeeldingen niet worden geüpload naar een externe server.

Hoewel alles in de browser wordt gedaan, biedt Squoosh veel opties. Standaard wordt MozJPEG gebruikt voor het kleiner maken van JPEG-afbeeldingen, OptiPNG wordt gebruikt voor PNG. De service is ook compatibel met SVG en kan WebP-versies van afbeeldingen maken. Een visuele vergelijking maakt het mogelijk om te controleren of de optimalisatie niet te agressief is en er zijn enkele opties beschikbaar om de compressie te verhogen of te verlagen. Je kunt een afbeelding ook meteen verkleinen.

Squoosh
Van 3,63 MB naar 503 KB – Klik/tap voor groter.

Squoosh werkt in iedere moderne browser

Dit alles is compatibel met Safari, Chrome en Firefox op macOS, maar ook met mobiele browsers. We hebben Squoosh getest op Safari met iOS 12 en de site werkte perfect. Op Android voelt het als een traditionele app en werkt het zelfs in de vliegtuigmodus.

Reacties

7 reacties
  • Profielfoto
    xaddict

    Dit bestaat al een tijdje, zelfde concept:
    https://bulkresizephotos.com/

  • Profielfoto
    xaddict

    Bij mij werkt ie trouwens offline ook gewoon op iOS in safari. Je moet hem dan eerst aan je homescreen toevoegen misschien

  • Profielfoto
    One Less Thing

    Dit soort concepten bestaande al een tijdje. Niet zo bijzonder meer dus.

    Maar hoezo is dit handig? Welk voordeel heeft dit ten opzichte van even snel een applicatie op mijn iPhone starten en de foto in Laren. Ik zie niet echt meer een handeling’s voordeel of een snelheids winst.

     

  • Profielfoto
    One Less Thing

    Trouwens… Fabrikant zijn als Apple moeten op deze ontwikkeling hun oogjes even goed openhouden.  Omdat het namelijk wel aantoont is dat je niet per se een app hoeft te downloaden.

     

    Een softwaremaker kan ook gewoon besluiten om een functionaliteit aan te bieden in de browser en het daarom niet aan Apple is het hoeft voor te leggen voordat het in de App Store kan. Ze kunnen hier prima de keuring van Apple mee omzeilen. Het zou zomaar eens kunnen gaan aanslaan bij het grote publiek

  • Profielfoto
    Shmoo

     

    Je hoeft je niet te schamen als je niet begrijpt waar dit over gaat. 🙄

     

    This powerful image compression tool launches almost instantly, and then manages a smooth UI even when it’s doing heavy work, including using Web Assembly to do more with codecs the browser doesn’t have baked in.

    Laat dan eens een Mac of iOS app zien waar je in REAL TIME je foto kunt optimaliseren en meteen een BEFORE en AFTER view kunt bekijken. Sterker nog, tijdens dat optimaliseren mag je niet merken in je view dat de app bezig is met iets en al je performance kaapt. Dat is gewoon niet mogelijk tenzij je misschien een iPhone X-whatever hebt van 1500,- met 6GB RAM en 408 cores maar dan nog geloof ik niet dat je de visuele view voor je neus hebt waar je meteen kunt zien wat je aan het doen bent met de foto.

    De VIEW.

     

    When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.

    A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.

    HTML5 Web Workers

     

     

    Elke moderne browser heeft dit al ingebouwd. Het is zeg maar een extra motortje in je browser die los staat van de webpagina of web app. Dit motortje kun je dingen laten doen terwijl jij gewoon in de browser of web app heel iets anders aan het doen bent. Wanneer het extra motortje klaar is met zijn (meestal) heavy load want daar gebruik je het vooral voor, stuurt hij het resultaat terug naar de browser en heb jij het zonder vertraging in beeld staan, sterker nog, je wist waarschijnlijk niet eens dat het bezig was met iets omdat je nergens hebt gemerkt dat iets even een paar tellen vertraging had.

     

  • Profielfoto
    xaddict

    Go Shmoo. Duidelijk een webdev die de toekomst van oa. PWA’s snapt. Heb je een site toevallig?