Insights

Mäd Pïxel.

We are excited to announce the recent launch of Pïxel.

Pixel is our online image compressor and optimiser that allows you to reduce the size of your images whilst preserving the quality of the imagery.

Key Usages.

Websites.

When building a website, fast loading speeds are highly desirable.

Firstly, attention spans have massively decreased in our instant-gratification culture, meaning your audiences expect next to no wait for their virtual experiences.

Secondly, SEO scores improve for fast loading websites. This means by using Pïxel you can ensure your website ranks higher in search engine results.

File Sharing.

Whether you're emailing a file, or sending it via social media, low file sizes are advantageous. The problem is, that often there is a trade off between great quality, or low file sizes. With Pïxel, you can send quality images that don't eat up storage space.

How it Works.

When you visit our Pïxel page, you'll be greeted with our welcome screen.

You can either click the + image symbol, drag in your image, or copy paste an image from your clipboard.

Once your image has loaded, you'll notice several controls available.

In the bottom-middle of the screen, you'll find a zoom tool to inspect the image in detail. This will help you find the correct sizing options for displaying your image.

For ease, we often zoom out to see the whole image on screen—to inspect compression quality. Our example image is 11.6MB and a large size of 6000 x 3376 pixels.

The Preview.

By default, there is a vertical line running down the centre of the screen, with two arrows in the centre of the line. The arrows are draggable, to move the line horizontally.

The left hand side of the line represents your original image, in full quality.

The right hand side of the line shows a live preview of the quality of the image according to the current compression controls.

You can find the compression controls on  the bottom-right of the screen.

Edit.

Resize.

This refers to the dimensions of the image.

The key options within here include being able to select preset percent increases/decreases, or to manually change the dimensions of your image.

By keeping 'maintain aspect ratio' selected, your dimension adjustments will automatically align to stop the image stretching or squashing in any way.

Reduce Palette.

By clicking 'Reduce Palette', you can decrease the number of colours within the image.

You can also adjust the dithering scale from 0 to 1, in increments of 0.01.

By reducing colours, you can dramatically decrease file sizes further.

In computer graphics, dithering is an image processing operation used to create the illusion of color depth in images with a limited color palette. Colors not available in the palette are approximated by a diffusion of colored pixels from within the available palette.

Compress.

Type.

Whilst there are multiple options available, the most widely used options are the following three:

  1. OptiPNG is a PNG optimizer that recompresses image files to a smaller size, without losing any information
  2. MozJpeg reduces file sizes of JPEG images while retaining quality and compatibility with the vast majority of the world’s deployed decoders.
  3. WebP is an image format employing both lossy and lossless compression. It is currently developed by Google

Quality.

Pïxel provides a quality slider to let you manually increase of decrease your image quality to help match your desired file size.

Advanced Settings.

For advanced graphic designers, there are a large array of advanced settings available at the bottom of our edit section.

For normal usage, we would not recommend using these settings. However, the smoothing slider is useful to create a blur effect when desirable.

Downloading.

When you've implemented your desired changes, you'll notice the bottom-right displays the size of your new file, and the percentage it has increased or decreased from the original.

When you're happy with the new file size, and quality, simply click the download icon to save the file to your computer.

#workwithmad