14 gratis beeld- en ontwerptools die in uw browser worden uitgevoerd

Beeldwerk heeft een specifiek probleem: de klus is meestal klein en de aangeboden tools zijn enorm. Je moet 400 KB van een heldenafbeelding schrappen, of een hexadecimale waarde krijgen die je ontwerper noemde, of een favicon genereren die nog niemand heeft gemaakt. Daar is geen abonnement voor nodig.

De veertien onderstaande tools behandelen het voorbereiden van afbeeldingen, het werken met kleur, het genereren van CSS-effecten en de kleine productiemiddelen die door de kieren vallen. Ze draaien allemaal lokaal, wat voor afbeeldingen belangrijker is dan voor tekst: de foto die je zojuist hebt gecomprimeerd, is vaak een foto die je nog niet hebt gepubliceerd.

De meeste imagoproblemen zijn eigenlijk gewichtsproblemen. Een pagina die traag aanvoelt, bevat meestal afbeeldingen die groter zijn dan hun weergaveformaat, in het verkeerde formaat, met een kwaliteitsinstelling waar niemand ooit vraagtekens bij heeft gezet.

Hoeveel moet je comprimeren? Het eerlijke antwoord is: totdat het er verkeerd uitziet, en dan een stap teruggaan. Voor een fotografisch heldenbeeld is de kwaliteit van 70 tot 80 procent bij normaal kijkformaat meestal niet te onderscheiden van het origineel. Voor een logo, een screenshot of iets anders met een effen kleur en harde randen, gebruik PNG en comprimeer harder: deze winnen meer en verliezen minder.

Een praktische vuistregel: alles onder de 200 KB is prima voor een hero-afbeelding, onder de 80 KB voor een thumbnail, en als je niet onder de 300 KB kunt komen, heb je waarschijnlijk eerder een dimensieprobleem dan een kwaliteitsprobleem.

Door een afbeelding naar een Base64-gegevens-URI te converteren, wordt een HTTP-verzoek verwijderd, wat klinkt als een pure overwinning. Meestal niet. De gecodeerde tekenreeks is ongeveer een derde groter dan het binaire bestand, kan niet afzonderlijk in de cache worden opgeslagen en vergroot uw CSS of HTML.

Alleen inline als de afbeelding klein is (minder dan een paar kilobytes), één keer gebruikt en van cruciaal belang. Een klein pictogram in één e-mailsjabloon is het klassieke geval. Voor alles wat herhaald wordt over pagina's of groter is dan een paar kilobytes, dient u het als een bestand weer te geven en de browser het in de cache te laten opslaan.

Wees duidelijk over wat dit doet. Het verwijdert of verbergt het zichtbare merkteken. Het kan de onderliggende pixels niet reconstrueren; informatie die overschilderd is, is verdwenen en geen enkel filter vindt deze opnieuw uit. De resultaten variëren van onzichtbaar, wanneer de markering op een effen achtergrond zit, tot een duidelijke uitstrijkje wanneer de markering over details heen zit.

Nog één ding dat de moeite waard is om duidelijk te zeggen: het verwijderen van het watermerk van iemand anders en het publiceren van het resultaat is in de meeste rechtsgebieden een auteursrechtprobleem en een schending van de licentie, ongeacht of u gepakt wordt. Het verwijderen van markeringen uit uw eigen afbeeldingen of uit voorraad waarvoor u een licentie hebt, is het doel van deze tool.

Kleur is waar kleine fouten heel zichtbaar worden. Een contrastverhouding die niet toegankelijk is, een hex-waarde die eigenlijk een HSL-triple is, een palet dat er coherent uitziet op je monitor en modderig op een projector.

Eén kanttekening bij kleurhulpmiddelen: ze gaan er allemaal van uit dat uw monitor is gekalibreerd en dat de persoon die uw pagina bekijkt, werkende ogen heeft. Geen van beide veronderstellingen is veilig. Dat is een reden om combinaties met contrastcontrole te verkiezen boven subjectieve combinaties.

Met de hand een verloop of een gelaagde schaduw schrijven is een echt onaangename taak. De syntaxis is onhandig, je kunt niet zien wat je produceert, en het verschil tussen een goede en een slechte schaduw is een paar pixels onscherpte.

De truc voor alle vier is terughoudendheid. Twee schaduwen – een strakke donkere en een brede, zachte – lezen als fysieke verheffing. Eén schaduw leest als een website van vijftien jaar geleden. Genereer, kopieer en verwijder vervolgens totdat u niet meer weet dat het er is.

Hier is het hele cluster bezig met één echte taak. Een pagina heeft een held nodig met een achtergrondafbeelding, een kop en een knop, en die is nog niet gebouwd.

Vijf tools, geen ontwerpsuite, en elke uitvoer is een waarde die u rechtstreeks in code kunt plakken.

Worden mijn afbeeldingen ergens geüpload? Nee. Compressie, formaatwijziging en Base64-conversie gebeuren allemaal in uw browser, wat de reden is dat er geen limiet voor de bestandsgrootte is en geen uploadwachtrij.

Zal bij het comprimeren van een afbeelding kwaliteit verloren gaan? Altijd, per definitie. De vraag is of het zichtbaar is. Bij 70 tot 80 procent kwaliteit en correcte afmetingen is dat meestal niet het geval.

Waarom ziet mijn gewijzigde afbeelding er nog steeds groot uit? Negen van de tien keer heb je gecomprimeerd voordat je de afbeelding hebt aangepast, of je slaat deze op als PNG terwijl een foto beter is als JPEG.

Kan ik deze gebruiken voor klantwerk? Ja, zonder bronvermelding en zonder commerciële beperkingen.

Werken ze op een telefoon? Ja, hoewel het wijzigen van de grootte en het comprimeren van grote foto's op een telefoon afhankelijk is van het geheugen van uw apparaat en niet van een server.

Pas het formaat aan voordat je comprimeert, controleer het contrast voordat je ruzie maakt over kleur, houd schaduwen subtiel en vergeet nooit de favicon. Dat is sowieso het meeste van wat een ontwerpsuite voor je deed.