Deze pagina is een globale weerslag van wat ik op de Carousel-avond aan CCW-leden heb laten zien wat mogelijk is met fotografie in relatie tot uiteenlopende webtechnieken.
In de loop van de avond viel de WiFi uit. Via deze weg kunnen de belangstellenden die helaas geen kans hadden de voorbeelden te zien, alsnog bediend worden.
AMP |
Tijdens de Carousel-avond op 22 november 2016 heb ik voorbeelden van social media speciaal voor foto's getoond, waaronder Instagram en Pinterest.
Daarop aansluitend ga ik in op een nieuw soort HTML-pagina's (= webpagina's), ontwikkeld door Google. AMP HTML is eigenlijk een subset van HTML5.
Google heeft een methode ontwikkeld om foto's (en video) van social media te laden in webpagina's. AMP zorgt ervoor dat de datastroom (de webpagina met ingevoegde foto of een ge-include social media-foto) gestroomlijnd en daarom versneld kan worden geladen. Dat gestroomlijnd laden wordt mogelijk gemaakt door alle verzamelde content via één server, een Google-server te verwerken.
De te openen pagina's met foto's in "Voorbeelden in AMP ..." worden gecached via een Google-server.
Base64 is op zich niet zo heel aantrekkelijk om te gebruiken voor normale afbeeldingen op websites. De code van een JPEG van 1024x1024px omgezet naar Base64 is omvangrijk en maakt de webpagina zwaar om te laden.
Voor kleine afbeeldingen zoals logo's kan het een overweging zijn om de Base64-afbeeldingscode vanaf een centrale database te laden in webpagina's op andere webservers. Mijn ervaring is dat (grafische) data uit databases zeer snel laadt. Bovendien is de content in een database beveiligd.
Dit type codering wordt standaard toegepast in email dat HTML gebruikt voor weergave en opmaak. Een attachment in een email-bericht wordt na het uploaden omgezet naar deze vorm van ASCII-code. Wanneer de ontvanger de attachment downloadt, wordt de Base64-code weer omgezet naar een Bitmap.
Scalable Vector Graphics (SVG) is de grafische exponent van HTML. Het bijzondere aan SVG is dat zo'n afbeelding altijd even haarscherp blijft, op een smartphone of beamer. Dat komt door de vector-techniek waar SVG op gebaseerd is.
Een SVG-afbeelding kan zelfstandig geladen worden, maar je kunt hem ook moeiteloos in een responsive webpagina inbedden.
Het voorbeeld hieronder is het resultaat van een conversie van JPEG naar SVG. Hier worden de Bitmap-eigenschappen helaas behouden in het SVG-bestand. Dat laat zien dat SVG vooralsnog alleen geschikt is voor vector-gebaseerd ontwerp zoals logo's, afbeeldingen gebaseerd op meetkundige figuren.
Inkscape zou echter de mogelijkheid bieden om eenvoudige Bitmaps 'fully scalable' te maken. Voor de Werkgroep Creatief wellicht een leuke optie om zich eens in te verdiepen.
SVG biedt verder de 3D-optie. Programma's als Maya zijn hierin zeer geavanceerd. Wellicht dat de mogelijkheden van SVG een opstap vormen naar 'fully scalable' en 3D-fotografie. Met 3D in Bitmaps wordt overigens ook geëxperimenteerd.
Kortom, dit is een terrein dat mij het nodige biedt om te exploireren.
De SVG-afbeeldingen via de link hieronder zijn geproduceerd met het programma Inkscape en zijn aanzienlijk kleiner in omvang dan het voorbeeld hierboven. De SVG's doen qua scherpte niet onder voor de JPEG's waaruit ze gecompiled zijn. De vraag is nu of deze SVG-bestanden nog Bitmaps zijn of vector-eigenschappen bezitten.
Canvas is een grafische component van HTML5, de laatste versie van HTML (de weergavetaal van webpagina's). Met Canvas kun je niet alleen lijnen en mathematische figuren creëren en opmaken, maar je kunt er ook foto's mee bewerken zoals je in "Voorbeelden in Canvas ..." hieronder te zien krijgt.
Met één bronfoto genereer je talrijke bewerkingen: cropping, rotating, scaling (spiegelen). Filters zoals grijstinten en sepia behoren eveneens tot de opties.
Een Canvas-afbeelding is het resultaat van een proces waarbij de binaire code van de Bitmap-afbeelding (BMP, GIF, JPEG, PNG) wordt omgezet naar ASCII-code. Binnen die ASCII-afbeeldingscode kan HTML-code (ook ASCII-code) zoals tekst met opmaak worden geïntegreerd.
HTML Canvas is voor de beginnende gebruiker best wel complex om toe te passen. Voor wie een poging wil wagen zijn er online Canvas editors beschikbaar waarmee je een foto kunt bewerken of figuren kunt genereren.
Sinds een paar jaar bestaat er een nieuw foto-formaat, Better Portable Graphics. De beeldkwaliteit van BPG is even goed als bij JPEG maar volstaat met een kleinere bestandsgrootte. Dat zorgt ervoor dat het laden van een BPG sneller verloopt, vooral handig bij smartphones.
BPG wordt nog niet standaard ondersteund door browsers, firmware en bewerkingssoftware. Een speciaal script in de webpagina zorgt voor een probleemloos laden van de foto.
Online converters bieden je de mogelijkheid om JPEG over te zetten naar BPG.
Google heeft een eigen foto-formaat ontwikkeld, WebP. Je spreekt het uit als weppie. De beeldkwaliteit van WebP is even goed als bij JPEG maar kan uit met een nog kleinere bestandsgrootte dan BPG.
Net als bij BPG wordt WebP nog niet ondersteund door browsers, firmware en bewerkingssoftware. Het kunnen laden van de WebP-foto vereist een speciaal script in de webpagina.
Online converters bieden je de mogelijkheid om JPEG over te zetten naar WebP.
Ik geef WebP een grote kans om op termijn de opvolger te worden van JPEG, als was het maar dat een heel groot bedrijf erachter zit.
De opmaak met CSS3 Filter Property kent zoals de titel al aangeeft, slechts filters. Daarom is HTML Canvas aantrekkelijker door de uitgebreidere opmaakmogelijkheden.
Een voordeel van CSS3 Filter Property is echter de eenvoudige toepassing ervan in een CSS-opmaakbestand.
Tot voor kort werden deze filters voor afbeeldingen nog zeer beperkt ondersteund door browsers, slechts door Firefox en Chrome. Nu door alle typen browsers. Dat maakt CSS3 Filter Property heel aantrekkelijk.
Free Lossless Image Format is een nieuw foto-formaat dat zich nog in de ontwikkelingsfase bevindt. Daardoor kan ik nog geen voorbeelden tonen.
FLIF claimt met kleinere bestanden uit te kunnen dan alle eerder behandelde formaten. Bovendien zou een FLIF-bestand bij een smalle bandbreedte alleen dat deel van 't bestand tonen dat nodig is voor een eerste impressie ervan. Bij een krachtige brandbreedte wordt het gehele bestand geladen.
Zoals je ziet is fotografie tegenwoordig meer dan alleen het bewerken van foto's in een fotobewerkingsprogramma zoals Photoshop of Darktable om ze vervolgens met een beamer te tonen en gezamenlijk te bespreken.
Als fotograaf heb je een keur aan mogelijkheden om je foto's op het web aan te bieden, via je website of speciale social media.
Daarnaast kun je je hart ophalen met het bewerken van één bronfoto in een reeks van bewerkingen, zoals met cropping, rotating, filters in HTML Canvas. Het bespaart een hoop ruimte op je webserver.
De bewerkingsmogelijkheden met een traditioneel fotobewerkingsprogramma zijn op het moment nog veel en veel groter dan in HTML Canvas, maar ik voorzie dat Canvas gecombineerd met allerlei andere (online) bewerkings- en verwerkingstechnieken toekomst heeft.
Aanwijzingen daarvoor zie je onder meer in Instagram waar je je zojuist geschoten foto met de nodige opmaak-opties kunt bewerken en vervolgens met toegevoegde GPS-coördinaten kunt posten.
De nieuwe foto-formats, BPG, WebP en FLIF gaan JPEG verdringen is mijn inschatting. Kleinere bestanden met een even goede kwaliteit als JPEG en door hun geringere omvang ideaal voor een veel snellere streaming naar je smartphone, iPad en laptop. Het is nu wachten op ondersteuning van die nieuwe formaten in browsers, software en firmware.