The act of converting content from its original format into a format capable of being displayed on the web
Manage Multiple WordPress Sites

Images

Images Category

A Lightweight Plugin to Lazy Load Images — Unveil.js

Unveil.js is a jQuery plugin for easily loading images with lazy load.

unveiljs A Lightweight Plugin to Lazy Load Images    Unveil.jsUnveil.js loads images only once they are in the user’s viewport, thus reducing load times and quite possibly server load.

It’s basically a stripped-down version of this lazy load plugin, with extra support for high-resolution images.

 

Using Media Quieres for Serving the Right Image — Clown Car Technique

Clown Car Technique is a technique for creating responsive images within SVG.

clowncar Using Media Quieres for Serving the Right Image    Clown Car Technique

 

This way of doing things has several advantages, the main of which is that all the logic gets handled on the SVG side.

The clown car technique, by the way, is thus called because all the images (clowns) are stuffed inside one huge image (car).

Turn Adobe Illustrator Shapes Into Code — Drawscript

Drawscript is an extension for Illustrator that turns shapes into JavaScript code.

drawscript Turn Adobe Illustrator Shapes Into Code    DrawscriptBesides outputting JavaScript, Drawscript can output Objective C, C++, AS3 and JSON code as well.

You can add custom prefixes to the output. This extension is useful for anyone interested in coding vector graphics and using them in programming.

 

Framework for Reusable JS, HTML & SVG Components — OrganicJS

OrganicJS is a small framework for creating reusable JS, HTML and SVG components.

organicjs Framework for Reusable JS, HTML & SVG Components    OrganicJSThe framework provides support for:

  • Chainable methods and properties;
  • A scoped data model for user interaction;
  • Reusable widget markup with nestable HTML5/SVG fragments;
  • etc.

You’d use this library for saving time when writing JS, HTML or SVG components.

 

Create a Pinterest-like Grid — Wookmark

Wookmark is a jQuery plugin for creating a Pinterest-like image grid.

pinterestgrid Create a Pinterest like Grid    WookmarkWookmark is easy to implement and works like a charm. While there are options — maximum item width; container; offset — they are not obligatory.

One example is with built-in infinite scroll, and that’s what you’re probably aiming for with this plugin.

 

A JavaScript Lib For Comparing and Analyzing Images — Resemble.js

Resemble.js is a JavaScript library for comparing and analyzing images. It uses the canvas element and JS.resemblejs A JavaScript Lib For Comparing and Analyzing Images    Resemble.js

Resemble.js was developed for PhantomCSS — a tool for testing CSS regressions by comparing screenshots — but can also be used to highlight differences.

This library is useful for sniffing out duplicates if you have a picture collection. Other possible uses are like those of PhantomCSS — testing tools and comparisons.