Vintage effects for your images with HTML5

Default avatar.
September 20, 2012

vintageJS jquery pluginI'm not sure whether it's Instagram, Hipstamatic, or some other smartphone photography app that should be thanked (blamed?) for the advent of applying vintage or other effects to every photo taken, but regardless of who started it, it doesn't appear to be a trend that's going away any time soon.

Whether you love vintage-looking photos or not, chances are, you may need to use them in one project or another, either because a client or the project demands it.

Rather than spending a ton of time processing photos for your next website project with Photoshop or some other desktop (or phone) app, wouldn't it be nice to have a plugin that would do it automatically, right on the site itself?

It makes sense, after all. Otherwise, every time a new image is uploaded, you'll need to make sure it was processed prior to being added to the site (not ideal if your client will be updating the site themselves). Without consistent processing, the site will quickly start to look amateurish and, well, ugly.

vintageJS is a jQuery plugin that uses HTML5 canvas to apply effects to your images right on your website.

vintageJS jquery plugin

It's highly configurable, so you can get your images looking exactly the way you want. Basic preset options include:

  • default (when no preset is given)
  • sepia
  • green
  • grayscale
  • custom (only curves are adjusted, everything else is set to off so you can build your own look)

If you want to create a custom filter, here are some of the options available to be manipulated:

  • vignette (can be turned on or off, and has both black and white variables you can set)
  • noise
  • screen (works like the Photoshop layer screen)
  • desaturate
  • allowMultiEffect (lets you trigger an effect multiple times)
  • viewFinder (creates a through-the-viewfinder effect)

Using these settings, you can easily create authentic-looking vintage images directly on your site. No more hours spent pre-processing images (or waiting for your computer to batch-process them). No more clients uploading images that ruin the look and feel of the site.

You might already be familiar with vintageJS.com, the site that allows you to upload photos and then apply a vintage effect. It's a good example of what the jQuery plugin is capable of (though the plugin allows for even more customization).

Have you been adding vintage effects to your images with a plugin? Which one? Let us know in the comments.

Cameron Chapman

Cameron Chapman is a freelance writer and designer from New England. You can visit her site or follow her on Twitter.

Read Next

30 Most Exciting New Tools for Designers, 2023

As we near the end of 2023, we wanted to take a look back over all the tools we collected over the past year, to pick…

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…