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

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

How Web Designers Can Stay Relevant in the Age of AI

The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…

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…