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

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…