The social media revolution has sparked even more of an emphasis on images, and there are plenty of benefits in extending this enthusiasm to your website. As well as making pages more visually interesting and easy to read, imagery is vital for consistent branding and determining how your website and/or brand comes across. Whether you want to be perceived as modern, serious, technical, fun, cool, luxurious or whatever else, this should be reflected in the images you use as well as your text.
Take inspiration, then take shortcuts
Image-driven websites such as Pinterest and Flickr throw up plenty of ideas for how you can present images effectively. But don’t waste time spending hours positioning and sorting images for your own site – there are plenty of free jQuery plugins for images that will do the hard work for you and make managing and adding to your images much easier. Check out 22 practical jQuery plugins for designers and developers to see some of our favourites.
Bonus tip: If you’re creating an image-heavy website like a portfolio or gallery, you may also want to look at free CMS software to speed things up. We offer free one click installs of Coppermine Photo Gallery, Gallery2, Zen Photo and many other options to make it even easier.
Online editing
Even if you’re a Photoshop fiend, there are plenty of free online image editing tools that are worth checking out. These are great for speeding up image editing, creating specific effects easily without the need for downloads or involved tutorials. Some of our favourites include:
• Pixlr
• Luna Pic
• iPiccy
Bonus tip: If you’re a Mac user, iPhoto is ideal for producing great effects in a couple of clicks so you can spend a minimal amount of time editing and more time on your website.
The professional route
Save time but maintain quality by calling on professional resources. A quick Google search will throw up endless free vectors, stock photos and much more to give you a starting point. Alternatively, it’s often worth investing a small amount of money in stock imagery from places like Graphic River. To make your money go further, look for packs of images you can edit and re-purpose easily to use across a wide variety of situations and media. We’ve pulled together a few of our own links to get you started:
• 30 of the best image resources for designers
• 51 free high quality vintage and retro design resources
• Free Photoshop brushes – 37 terrific links
• Free hosting themed resources
• 30 fresh and attractive free fonts for designers
• Fantastic free Photoshop patterns and textures
• 25 of the best free ecommerce templates
Bonus tip: To make the most of what you’ve got, check out this fantastic article from Design Shack on how you can make seemingly restrictive images work in a variety of different ways: Doing More With Less: Tips For Designing With Limited Resources.
Keeping the momentum going
If you run a blog or other large content site, chances are you’re going to need imagery on a regular basis, so avoid the trap of creating a narrow, specific look for your images that’s time-consuming or difficult to maintain in the long term. Ideally you want to create a consistent enough look for your website so that your visitors can recognise your image/look out of context, but not have so many rules and restrictions that you run out of steam.
The benefits of generics
In an ideal world you’d want to use different bespoke images for every situation, but as that’s rarely possible, it’s helpful to have a practical set of your own images on hand that can be reused easily. It’s worth spending a good amount of time creating them initially so they age reasonably well and you don’t get bored of them. Dividers, default blog post images, word clouds and general imagery related to your niche always come in useful, particularly if they’re creatively branded with your name or logo in some way.
When is an image not an image?
One way to save time and ensure a consistent look is to make use of HTML5, CSS3, and fonts to enhance your page. Some inspiring tools and resources can be found here:
• 109 awesome CSS3 tutorials and resources
• 41 great HTML5 tutorials and resources
• A roundup of great icon fonts
Size matters
Less cheating and more standard practice, make sure your images are optimised for the web. These guides are worth bookmarking if you need to brush up on file types and how best to save your images:
• Google Developers’ guidelines for optimising images
Comments
Please remember that all comments are moderated and any links you paste in your comment will remain as plain text. If your comment looks like spam it will be deleted. We're looking forward to answering your questions and hearing your comments and opinions!