How Re/Sourced works

The internet is abundant with data, especially imagery—social feeds, cloud services are full of pictures consuming precious energy and emitting CO2 each day. So even a screenshot you send via Whatsapp or a repost of a photo on Instagram is new data uploaded and stored on servers growing the amount of space and electricity the internet needs to run.

Tools to combat the amount of space necessary only reduce the file size by creating another new file. In other industries, when something is abundant and harming nature, we recycle.

That's why my project focuses on creating a service that decreases the amount of data necessary to generate images for temporary use by recycling the existing data of a picture containing all colors and limiting the number of photos stored at any time.

By reducing the image to 8-bit, we can already save a lot of storage needed for a picture and still being pleasing to watch. The next step is how to create and reduce an image in a recycled and sustainable way. That is where photo mosaicing comes in place. Instead of using various photos, I intend to create all images by just using one image that has the color pallet.

To accomplish this, I used a web technology called canvas. Canvas is an HTML element that can be used to draw graphics via scripting (usually JavaScript). This can, for instance, be used to draw graphs, combine photos, or create simple (and not so simple) animations. This means I can manipulate images by code. The only picture the code will use is and images that contain pixels with every 256 colors once. With canvas, I can cut the image into 256 minor parts include a single color. In this way, it can translate any image to a reduced version create from just one file.

Behind the scenes, the code will analyze the input image and finds the color that is the most similar. With the first image ever created, the reduction will only be that the image will be made in 8-bit since it will still need to load the image containing the 256 colors. However, by viewing the image, more and more photos are created the reduction effect will be greater. Thus, the amount of data required will reduce exponentially since every picture will be made from the one parent image containing the 256 colors.