The inclusion of images in web design is not just about relieving the boredom of text-only messages. Image use conveys information in a non-verbal manner, but it also elicits emotions from viewers and gets them thinking about the relationship between the images and your content/products. Given the power of visual elements, web designers and developers need to be certain they are taking advantage of all available means of choosing, creating, optimizing, and placing images on their web pages to provide the maximum effect.
Here are 20 free scripts you can use to improve your use of images on your websites, divided into five different categories — manipulation, animation, resizing/cropping, display, and other.
Adding a magnifying glass effect with this script lets you maintain the image’s size on the page, while letting the viewer zoom in on different parts of the image using the mouse wheel. Many different zoom options are available in this cross-browser event handling wrapper.
|Vector Graphics Web App
Want to be able to work easily with vector graphics but can’t afford Illustrator? Mondrian might be the answer, with all of the standard functionality you would expect (basic editing, file import/export, a simple undo function, and dot grid enabled with snap to). Mondrian recently moved to open source.
|PHP Image Workshop
Working with images via PHP is possible with this open source class that uses GD library. Uses range from the simple (sizing, positioning, etc.) to the more complex (multiple layer manipulation, adding watermarks, making thumbnails, etc.).
Want a pixelated look for an image on your site? Close Pixelate uses an HTML5 canvas element to do so quickly and easily. The Pixelator took this script and built a nice UI around it for ease of use. Note that these scripts only work on same-domain images.
Apply a variety of filters to your web page images with this browser-based image processing library. Merely add a class and set the few parameters via HTML attributes. Note that with Chrome and Firefox, files need to be on a web server.
|Image Caption Hover Animation
Named for Eadweard Muybridge’s Zoopraxiscope, this script uses a series of static images you provide to easily create animations via a jQuery plugin.
Image Resizing & Cropping
A jQuery plugin that uses CSS alone to resize, crop, position, animate and otherwise alter thumbnails, without losing resolution or clarity of the image. Works well to resize avatar images to fit specific layout restrictions.
If you are working with responsive design, this script addresses the issue of having images also act responsively. Focal point not only resizes images on the fly using CSS, but lets you choose which part of the image to use should cropping be necessary during the process. In this way, you can ensure that the part of an image that is vital to getting the message across is retained, no matter what other adjustments are needed to adjust to different screen sizes.
Using CSS3 in a jQuery plugin, this script nicely puts together a gallery of images, complete with control bar. Full-screen mode is included together with the slideshow/grid setup accessed via the keyboard. As an added plus, it’s also available as a WordPress plugin.
If you are looking a collage effect for images, this jQuery plugin takes the images and sizes them appropriately to fit into a defined container, without the need to size them beforehand. Just add desired padding and borders. You can, of course, size and arrange the images yourself if desired. Six possible CSS transitions are included.
Using a jQuery plugin, this script creates a responsive slider that works with all browsers, including IE 6 and up. Its main distinguishing feature is its extremely small size (1.4 kb). If you’re looking for a simple slider that has either fade or a control bar, and size is important, this is one to check out.
If you have a panoramic image, such as a 180-degree view of a landscape or other expansive shot, and don’t want to be limited by the global width of your site, this jQuery plugin is the solution. It has been tested in Chrome and Firefox on both desktops and smartphones, but hasn’t yet been tested on IE.
A handy script that recreates the classic scattered group of Polaroid pictures, offering a novel way to showcase a collection of images. When the viewer clicks on one of the pictures, it moves to the center of the frame, while the others move to the sides. Picture descriptions/captions can be placed on the “reverse” of each image, again called by a click.
Image Resizing & Cropping
If you ever need to compare two images to spot differences between them, this script can not only save time, but ensure that subtle differences aren’t easily overlooked. TwentyTwenty stacks the two images on top of each other, and as you move the slider across the image, it trims the image on the left via the CSS clip property, letting the image on the right show through the container.
Want to add some interactivity to an image? ThingLink lets you put placeholders on various parts on your image to display items such as text, other images, links, video, music clips, etc., when moused over by the viewer. The completed image itself can be embedded on your site. Free for personal use.
A simple jQuery plugin lets you add notes to any image on your website. It is scalable and uses CSS for customizing the look and settings. Images can be linked and no database is needed. The developer is about 80% done with version 2, which features many new customizations.
This script adds interactivity to an image via an easy configuration wizard, with the added bonus of drag-and-drop capability for placing the “tooltip” locations on the image. It’s also compatible with slideshows or sliders (since it uses either lists or divs), and comes with a choice of different icons and animation possibilities. A new version, iPicture2, has just been released.