Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Images’ Category

Companies usually share media related to their brands (logo, guidelines, images or documents) online so that they can be re-used properly by others.

Smartimage, a professional and paid web service, makes managing such media so easy and also provides a great experience for the end users.


It enables the brand admin to upload files (AI, EPS, GIF, JPEG, PNG, TIFF or PDF are supported) tag and categorize them from a clean admin interface.

Uploading is pretty easy via drag ‘n’ drops and a graphic file manager exists for editing meta data when needed.

After that, end users can browse these items from a user-friendly web page and download them in various sizes including Retina Display (different sized versions are auto-created).

Smartimage Collection Page

The whole collection or each item can be shared with others with social links, e-mail or embedding.

And, Smartimage keeps track of all these sharing activity besides stats like “the number of downloads”.

Items uploaded can be public or private, the whole layout works in all major devices including mobile and custom domain names can be used for the hosted brand page.

The service is being improved regularly and new features like “multiple admins, customizable collections, video support” are planned to be released.

A demo exists to find out how an image collection can look like and the app can be tried freely for 45 days.

Animated GIF files are the widely-used format for displaying “loader…” images.

Sonic is a tiny JavaScript class for creating such loader images with HTML5 canvas.

Sonic - HTML5 Canvas Loaders

It works by drawing a shape at tiny intervals along a pre-defined, custom path where sizes, colors or fps can all be customized.

There are ready-to-use examples provided and a web-based Sonic Creator exists for creating loaders and getting them as a HTML5 canvas code, animated GIF or a sprite image with the CSS3 code.

While working on web projects, we usually use dummy content and images to see how things would look.

hhhhold is a free service for inserting random images (from FFFOUND!) of any size to our projects.

By using a specific URL format, we can call images with a pre-defined size, format and brightness.

hhhhold - image placeholder service

There are various other placeholder image services however hhhhold is capable of bringing random-sized images which is great to stress-test our layouts that may have different-sized items.

The service works directly by using hhhhold as the source of images or with the help of a jQuery, WordPress plugin and a Sublime Text plugin.

A high-quality photo has the power of converting any design into something beautiful. And, that’s usually where the stock photo providers come in.

Depositphotos, one of the biggest stock photo providers, has a huge database of photos and vector images from thousands of contributors.

I remember their launch ~3 years ago, had used them those dates and now see that they grew to 12+ million images.


Well, such many images can look hard to browse but they have a good categorization and search system for narrowing the results.

It is possible to include/exclude keywords, choose orientation and filter by color (which I think is the greatest option).

Lately, they announced the acceptance of videos from their contributors as well, so, stock videos under the same service doesn’t seem so far.

Depositphotos Sample Image


Once, stock images were costing hundreds of dollars it was hard to use them for every project. But, the pricing of Depositphotos is very reachable.

Images have different prices for their sizes but, as a short info, web-ready images would cost ~$2-4/each dollars and print-ready ones will be ~$8-10/each which is so reasonable for the result they help us to create (the even become cheaper with the subscription plans).

Depositphotos Sample Image

Become a contributor

For any photographer, becoming a Depositphotos contributor is a great way of presenting and sharing the work you created.

They have a pretty straightforward revenue-sharing model, have a modern uploader and you can always view the stats of your inventory.

Also, if you are shooting videos, this may be a good time to submit them in order to catch their launch of the videos section.

Depositphotos Sample Image


You should definitely check Depositphotos, browse through their repository and see how easy + good-priced the service is.

We need different sizes of an image for responsive layouts so that they fit perfectly and so that visitors won’t need to download the full size when they are viewing from smaller screens.

However, it can be pretty time-consuming to create images with different sizes and “what is we need different sizes in the future”?

Responsive Img is a solution to all which combines a jQuery plugin with a PHP image pre-processor.

Responsive Img

The plugin enables the page to change the src attributes of the images in parallel to the container width and the PHP file auto-creates the new/resized images.

Images are only created when requested for the first time and this process won’t be repeated for future requests to perform better.

It is possible to define the breakpoints and image dimensions for each breakpoint

There are various methods for accomplishing responsiveness in images.

jQuery Picture, a plugin for the framework, makes that very easy by automating the process.

jQuery Picture

It supports both <figure> elements with some custom data attributes and the newly proposed picture format (which is not yet valid HTML code).

In order to activate it, just call the plugin's function by targeting the image to be responsified and that's all.

ImageWorkshop is an open source and free PHP class for managing and manipulating images.

The class has an "image-editing-software-like logic" based on layers which enables superposing many layers or even layer groups (with the option of each layer being manipulated differently).

ImageWorkshop - PHP Image Manipulation Class

It has support for many functions like placing an image (or many images) on another one (good for watermarks), cropping, moving, resizing, rotating (with any degrees), superposing, writing and more.

ImageWorkshop works with the GD library, and also, allows us to apply filters provided with the library.

  • Tags:
  • Filed under: Goodies, GPL License, Images
  • SeuratJS is a plugin for the powerful Raphaël that enables us to create vivid animations and pixelated artwork.

    It extracts the color information from any given image and rebuilds it in SVG with the modifications applied.

    The plugin works cross-browser and can be customized with various settings (like the shape of the brush being used to re-generate images).


    Cloudinary LogoFor each scripting language, there are various image manipulation libraries for actions like cropping, resizing or optimizing each item.

    The problem is that some libraries are lacking some features, they may not be available on "that" hosting account, etc. and you may be in need of a better solution.

    Cloudinary is a web service for processing and manipulating images in the cloud with the requests we can send using the HTTP and URL based APIs provided.


    It starts with handling the uploads (including multiple files at once) and accomplishes standard jobs like cropping, resizing, optimizing or converting them so easily.

    Let's say you have uploaded an image named "product.jpg" and sized 600*400px using the API. You want to display a small thumbnail in the product listing page:

    a little bigger one in the product detail page:

    and the original one in a lightbox

    Amazing right? They are all created on-demand, cached for future use and served from Amazon CDN for faster delivery.

    But, Cloudinary offers more and smarter methods for today's web which will impress you like automatically fetching user photos from social networks.

    Read the rest of this entry »

    With the regularly increasing number of retina-screen devices browsing web pages each day, we may want to display images with better quality to such devices.

    Here are 3 easy-to-use solutions for serving high resolution images to retina-display devices:

    Retina Images

    Retina Images

    Retina Images is a JavaScript/PHP solution which stores the devicePixelRatio in a cookie and displays the high-res version of images (if exists) by checking whether that cookie's value is 1 or not (if 1, then the device has a retina screen).

    With a simple setup, it works on images that defined in both CSS and HTML.



    This open source script checks for every image on the web page to find out if there is any high-res version hosted on the server.

    If such an image exists, it swaps that with the original one.

    P.S. For the high-res images, It looks for the Apple's prescribed high-resolution modifier (@2x) version.

    jQuery Retina Display Plugin

    jQuery Retin aDisplay Plugin

    This jQuery plugin also follows Apple's prescribed high-resolution modifier (@2x) format, searches for the high-res versions and replaces them with the original one if exists.

    It is a plug 'n' play solution, nothing to edit (just add the high-res versions of the images to the same folder with other images).

    Uptime Robot