7 CSS Image Filter Plugins for Instagram-ifying WordPress

7 CSS Image Filter Plugins for Instagram-ifying WordPress

If you spend as much time on social media as I do, then you know that people have a tendency to overuse image filters.

I guess applying a classy black-and-white filter to a wedding photo could be a nice touch, but not when it’s a picture of a screaming child dancing with the groom. I’d argue, however, that in the right hands (i.e. in professional WordPress developers’ hands!), image filters could do a lot of good for visual content.

I recently wrote about how important consistency is when designing a WordPress site. An image filter is one way to bring a consistent look to all the photos on your site. Filters also enable you to play into visitors’ emotions by invoking certain moods. Oh, and they look pretty darn cool, too.

While apps like Instagram and Snapchat have made pre-made filters fairly ubiquitous, a filter is really any setting or combination of settings that alter the appearance of a photo. Any tool that allows you to open and edit an image (like the one found on your computer or smart device) should have color adjustment settings you can change to create the desired effect.

These options typically include:

  • Exposure
  • Contrast
  • Highlights
  • Shadows
  • Saturation
  • Temperature</li
  • Tint
  • Sepia
  • Vignette
  • Sharpness or blur

Here is an example of how an image editor presents filter settings on a computer:

CSS filter settings
Desktop and laptop image apps usually have a “Colors” editing tool you can use to create your own filter.

Here is how an iPhone handles it, offering both individual settings controls as well as pre-made filter effects:

Image Filters - Smartphone Filter Adjustment
There are two options the iPhone gives users for applying filter effects to images: pre-made filters or custom settings control.

In today’s article, I’m going to cover the dos and don’ts of applying image filters to your WordPress images. I’ll also explore the options for using CSS to create these filter effects. If there’s no need to hop in and out of Photoshop every time you want to add a new image to your site, then let’s spare you that trouble.

11 Tips for Using Image Filter Effects on Your WordPress Site

Once you’ve decided that you want to apply filter effects to the images on your WordPress site, take a moment to run through the Dos and Don’ts of using them. While it doesn’t take a rocket scientist to understand what sort of effect you’d get by applying a sepia tone to your images, there are some less obvious best practices you’ll want to keep in mind.

Tip #1: Remember the Psychology Behind Color

Color theory plays a big role in web design, so don’t forget to make use of it here. While you may not be applying full color changes to your images, those subtle variations that spring about because of filter effects will still have a similar impact on your visitors.

Tip #2: Don’t Overdo It

If all you want to do is improve the appearance of an image or two, or bring an otherwise great picture that is out of whack in terms of color back into the fold, then there’s no need to needlessly apply filters to every single image. Use filters only when needed.

Tip #3: Minimize the Number of Filters

Image Filters - Owen OD Website
If these images had been left unfiltered, this section of Owen’s home page probably wouldn’t seem so striking or so well-composed.

In a 2011 study that looked at how color similarity affected short-term memory, researchers found that the more cohesion there is between colors in images, the better your visitors will be able to store and recall those images in their short-term memory. So keep it simple like Owen O’Donnell.

Tip #4: Be Inspired By Your Brand

Image Filters - Chris Redshaw website
You might not think yellow would be the ideal color to filter your images through, but Chris Redshaw makes this work nicely with his branding.

There are a number of reasons to apply a filter effect to your images, but why not start with your branding? If you have a brand color that would look great applied to your images (like Chris Redshaw’s), then have at it. Or maybe your company is based out of California and you’d like to create a laidback, sun-bleached vibe for your photos, filters would be a great way to achieve that effect.

Tip #5: Hide Imperfections With Filters

It’s always a shame when you snap a photo, think it looks really awesome, and then notice an imperfection later on when it’s too late. But guess what? You can use filters to hide those imperfections, like bad lighting or a ruddy complexion.

Tip #6: Create a Time and Place

I think the reason why some amateur photographers and social media photo sharers get the whole image filter thing wrong is they don’t think about what sort of effect those images have on the people looking at them. They just think the filter is “pretty” or “cool”. Many filters were created in order to take the viewer to another time and place and should be used for those purposes.

I really like this guide from Make Use Of. I think it does a good job of explaining how each Instagram filter should be used. Even if you’re not using a tool that gives you access to Instagram filters, the implied meaning is the same for similarly styled filters found elsewhere.

Tip #7: Don’t Use Inkwell!

When testing subjects on how certain Instagram filters made them feel, Harvard researchers found that the majority of people associated the Inkwell filter with feelings of depression. If you don’t want to give your visitors the wrong idea and your images are moodier to begin with, stay away from that filter.

Tip #8: Bring Photos to Life

Image Filters - Hover Effects
You’ve got to admit that the red filter applied to all the images in this section looks fantastic. It unifies all the images and gives them an added layer of intrigue so you can’t help but look.

Using filter effects on your photos doesn’t always have to be a serious matter. Suppose the rest of your site’s design is minimal and clean. You can use a filter to give your photos some pop or intrigue like Host did.

Tip #9: Highlight Something Specific

We use white space, textual hierarchies, and other manipulations of content to help bring focus to what matters most. The same can be done with certain image filters. Vignetting
is one way to do this as it creates a sort of blur or fade around an image. This brings attention to the center and invokes a sort of invitation for the viewer to hop into the photo.

Tip #10: Enhance Rollover or Hover Effects

Have you added animated hover or rollover effects to the images on your WordPress site? If so, a filter could add an extra layer of intrigue to this already captivating spot on your site just like Dela Banda does.

Tip #11: Go With Effects That Improve Engagement

A study from Georgia Tech showed how image filtering can lead to increased engagement with visual content. Their study proved a number of hypotheses:

  • The more contrast and exposure introduced into a photo results in an increase in views and comments.
  • Warmer filters lead to more comments and views.
  • Filters that age photos improve the number of views, but receive fewer comments.
  • Saturation, on the other hand, negatively affects the number of views, but has a positive impact on comments.

7 CSS Image Filters to Use on Your WordPress Site

The only real problem I see with deciding to use filters for your WordPress site is the labor and time required to do so.

Look, it’s really cool that Photoshop, Canva, and your device’s photo app make it easy to create special color effects for our images, but that takes time. When you’re busy cranking through website after website, the last thing you to want to do is apply specialized filter settings to every single image.

Save yourself time and use CSS to update the images on your site. W3Schools has a good guide on how to create those filters with CSS3, but that approach still requires a little finagling. If you want a hand in applying these filters, use one of these:

  • CSS Filters Playground

    Upon first looking at these CSS filters, I was a little thrown off because of the SpongeBob image. However, once I tested out the other images and the video, I got a really great sense for how you can use these filters to improve upon the look of each. The map one is particularly interesting as I know I’ve seen those effects before but had no idea that they were filter effects.

    Interested in CSS Filters Playground?

  • CSSFilters.co

    What I like most about this tool is that there are plenty of pre-made filters—most of which you’ll recognize from Instagram—but you still have the power to tweak them to your liking. You can also upload your own images in here so you can get a sense for how the filters will actually look with your photos before committing to one and grabbing the CSS code for it.

    Interested in CSSFilters.co?

  • CSSgram

    This small CSS library gives you the ability to pull Instagram filters into WordPress and apply them to your images. The one thing to note about this one, however, is that the effects will not show up in Internet Explorer. Needless to say, if you have a large base of visitors using IE and want the effects to show up, this might not be the best solution.

  • CSSReflex Filter Effects

    For more simplified filter settings, you may want to use these CSS properties. There’s less of a focus on applying various color and shading effects from apps like Instagram and more on changing the clarity and brightness of a photo.

    Interested in CSSReflex Filter Effects?

  • Philter

    Philter is a really nice option as it’s easy to apply (simply update the HTML on your site) and there are a variety of options to play around with. They’ve created pre-made filter effects, hover-induced filter effects, and even allow for custom filters. Whatever you want!

  • PostCSS Instagram

    Although this CSS plugin has a limited number of filter effects included, it’s still a good option to simplify the process of applying filters to on-site images. The developer has also used a wide range of styles, so you’re not just getting a bunch of black-and-white or washed-out effects to choose from.

    Interested in PostCSS Instagram?

  • Simple CSS Image Filters

    There are nine unique filter options to choose from here, each of which comes with an easy-to-use CSS shorthand. It’s also important to note that these are compatible with all major browsers, so if you’re worried about visitors having a consistent experience across all platforms, this might be your safest bet.

    Interested in Simple CSS Image Filters?

Wrapping Up

You know what I think is the best part about using image filters? You don’t have to be a professional designer to give your WordPress site more of a professional edge or striking look. All you need is a little know-how in terms of using CSS (or, alternatively, experience with a photo editing app) and you can create visuals that are both at once engaging and memorable.

In my research, I found a few WordPress plugins that help add filter effects to images, but there just wasn’t enough history on them to justify including them here. If you’ve tried any of them before, I’d love to hear about your experience in the comments below.
Suzanne Scacca
Suzanne Scacca A former content manager and implementer, Suzanne Scacca uses the knowledge acquired while working as a professional desk jockey to craft content that helps users do WordPress better.