Resizing images before upload

The resolution of photo's increases every year. And while some of that information may be worthy of retaining, not all is. High resolution images come at a price. Not only storage, but, especially in a mobile context, also data transfer. In this post I explain how you could create an uploader that fixes this.

The old form

Traditionally your form would look something like this:

`
  Upload image:
  
  
`

If you want to be forgiving to your end users (and not requiring them to manually resize the images themselves) you could configure your server to accept files > 20MB and resize the images server side.

However, to save bandwidth you you might want to resize the images just before uploading.

Enter canvas

To manipulate pixels we need a canvas. So we need a canvas element.

Note: Canvas support is barely an issue, but if things don’t work we’ll write to code as such that the traditional form submit will continue to work

...

HTML 5, cutting edge?

I recently started my own business. Hence I am in need of a consistent style. That also includes a style for print. Since love the web, I thought I should use a proper CSS print template, instead of having a Word / OpenOffice Writer or whatever template. But print-quality CSS-print stylesheets? I had to go back to researching HTML and CSS again, something I gave up when standards more or less settled on CSS2 and XHTML1 and only browser vendors had to catch up with the standards. Roles have changed now, browser vendors like those behind Safari, Chrome, Firefox, Opera are pushing the standards to another level. But things are so chaotic! It seems we're going back to 1997, the year Internet Explorer 4 was released, pushing the limits of the standards way beyond what was possible at that time with cool effects, 3D plugins and more.

While the W3 consortium was working slo…