Advertise here with BSA

When we need to clip an irregular shape from an image and use it on the web, PNG is the most common answer as it is the only image format used by all web browsers that support alpha channels.

However, PNG images come with a penalty of size (if the source is a photograph) compared to similar sized JPEGs.

polyClip.js is a script, built on jQuery, that allows us to clip any image with imagemap coordinates using HTML5 Canvas.

For implementation on many images, "how practical would it be to use polyClip.js" is open to discussion however, for only few images, it can be a huge byte-saver.

And, it is supported in most browsers including IE7 (with Excanvas).

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Working with images and resizing or cropping them can sometimes be challenging as there is always a math going on behind: the ratios, resizing with the width or height, x-y values for cropping, etc.

phpThumb is a PHP library that handles all the hard work on creating thumbnails with only few lines of code.

It accepts any source types for images (from the filesystem, URL or database) and all popular image formats.

Images can be rotated, cropped, watermarked, their quality can be defined and there is even a built-in caching to minimize the server load.

phpThumb also has a wide collection of filters including contrast, blur, brightness, applying rounded corners and more.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Sometimes, we need to display images that are bigger than the viewport or we have a limited space.

PanoJS3 is a JavaScript widget that stitches together a set of tiled images and presents it with panning + zooming support.

It is a very useful widget specially for displaying panoramic images, maps or huge documents.

Besides the desktop, it also works on mobile browsers with touch interfaces (supports pinch to zoom and pan gestures).

A simple map helps finding out the which part of the image is being viewed and it is possible to enable fullscreen mode with a click.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

IM.js is a JavaScript library that can find the differences between images very quickly.

It scans the given images pixel-by-pixel using HTML5 canvas and outputs their similarity ratios.

The developer has created IM.js for auto-testing the similarity of URL snapshots taken from different browsers which is a great idea for quickly finding out any rendering differences or problems. It can also be used for many other cases like detecting duplicate images.

And, besides the ratio, it can create a canvas where the two different images are joined for easily seeing the differences at one sight.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Minimizing the size of images is an important part of the process for creating faster loading web pages.

We usually play with various variables while saving images to make sure they are optimized like the colors used, file type or quality but there can still be some bytes hidden.

Kraken, a free to use web application, finds those bytes and optimizes the images with a user-friendly interface.

It has support for adding multiple images (up to 20, max 1mb each) via drag 'n' drops, selecting from disk or getting from a URL and quickly uploads + optimizes them.

P.S. The application accepts .JPEG and .PNG files

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Using transparent images in websites make so much sense in many cases as they fit perfectly to any background.

However, there is sometimes a big empty space around images which can create confusion when clicking on them as users may not easily realize that the clicked part of the website is actually an image.

alphaPun.ch changes that by tracing the opaque part of PNG or GIF images and then punch through the alpha channel so the stuff behind it can be clicked.

Behind the scenes, it creates a mask for the opaque part of images along with masks for the clickable content behind them. The masks are positioned above the real image and users will actually be clicking to these masks.

It works by drag 'n' dropping an image to the loader and an HTML-CSS-JS (with jQuery) code is created automatically.

The project is definitely not a good fit for every image on websites but there will certainly be good cases of use.

P.S. alphaPun.ch is open source.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Zebra_Image is an open source and lightweight image manipulation library built with PHP.

The library is object-oriented, requires only the PHP GD2 extension and supports resize, crop, rotate and flip operations.

It works with .JPG, .GIF + .PNG formats and can convert one format to another after each action (transparency is preserved as well).

For the most-used function, image resizing, there are various methods offered for a smart resize like "keeping the aspect ratio", "resizing with prioritizing width or height" and "resizing by cropping".

It is also possible to define the quality of .JPG outputs.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

ImageMapster is a jQuery plugin that vitalizes the old image maps by adding more capabilities to them.

Using the plugin, any image map can be highlighted, selected (single or multiple areas) and manipulated in all kinds of ways.

There are many built-in functions provided like the ability to change the color-opacity or borders of the image map once it is selected. Or you can add a fade effect to them.

Tooltip support makes displaying user-friendly information possible while interacting with the image maps.

There are advanced functions like grouping areas to force the items to behave together (areas can be belong to more than one groups)

And, image map data can be automatically scaled to match the display size of an image or it can be resized to any defined dimensions (which is good for responsive designs).

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

The increasing variety and usage of device/screen types (cell phone, smart phone, tablet, desktop..) urge the need for serving web content accordingly.

Adaptive Images is a solution for delivering browser-size-specific images for any device.. automatically.

It is JavaScript-PHP-powered where a lightweight JS file detects the browser size and the PHP file resizes the images on the web page. And, all this happens with the help of a .htaccess rule which redirects any requests for .JPG, .GIF or .PNG files to the PHP image processor file.

Adaptive Images is a plug 'n' play resource which can be easily integrated into any PHP website.

There is a built-in caching system for minimizing each image only once for each size.

Also, several options for customization exist including "array of browser-image sizes", .JPG quality and more.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

watermark.js is a JavaScript library that enables us to insert watermarks over images quickly and in batch.

It can target any number of images in a web page that has a specific class and apply the watermark over the original image with the help of HTML5 canvas.

The library normally aims to protect images from being stolen. Although, it is not a perfect solution (just like many others) as the image source is plain-coded, it can still prevent non-advanced users.

On the other hand, watermark.js is very handy when you only want to insert an image over another and position however you want without a server-side solution.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)