Developer

Adaptive Images detects your visitor's screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page's embeded HTML images. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques.
Why? Because your site is being increasingly viewed on smaller, slower, low bandwidth devices. On those devices your desktop-centric images load slowly, cause UI lag, and cost you and your visitors un-necessary bandwidth and money. Adaptive Images fixes that.

# Notes on using PNGs
[Here are some useful image optimization techniques](http://www.slideshare.net/stoyan/image-optimization-for-the-web-at-phpworks-presentation). There are some things to keep in mind while using PNG image format.

PNG comes in three flavours; 8-bit, 24-bit and 32-bit. A 32-bit PNG is a 24-bit PNG with a transparent Alpha channel. [8-bit pngs with transparency are recognized mostly by IE6](http://blogs.sitepoint.com/2007/09/18/png8-the-clear-winner/), while transparent 32-bit PNG are not. So, you can do one of three things with transparent/semi-transparent 32-bit PNG images for IE6:

1. Convert to 8-bit PNGs
2. Use the included DD_BelatedPNG script to render them correctly.
3. If the transparent region is going to be in front of a solid color, you can use [TweakPNG](http://entropymine.com/jason/tweakpng/) to make sure that the 32-bit PNG renders a particular color instead of the typical grey-blue color for transparent regions. You can set the color by editing the "bKGD" attribute.

###Convert to 8-bit PNGs

Mostly 8-bit PNGs are smaller than the 32-bit variety. There is no discernable difference in how smooth the transparent regions are in all browsers except in IE6 where the edges appear jagged.

[pngquant](http://www.libpng.org/pub/png/apps/pngquant.html) is a command line utility that can convert 32-bit PNGs to 8-bit ones. [Here are some ways to optimize PNGs in Photoshop/Fireworks](http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/) and [more](http://www.smashingmagazine.com/2009/07/25/png-optimization-guide-more-clever-techniques/).


### Using DD_BelatedPNG

DD_BelatedPNG script uses VML to render the transparency and is useful if you have few PNGs on which the script needs to work on. If you have a page with scores of PNG images, using DD_BelatedPNG might end up slowing down your page. You could either target a small set of PNGs for it, or convert them into 8-bit PNGs.

function resizeImage($file,$scale="",$width="",$height="")
{
// If they wish to scale the image.
if (isset($scale))
{
// Create our image object from the image.
$fullImage = imagecreatefromjpeg($file);
// Get the image size, used in calculations later.
$fullSize = getimagesize($file);
// If there is NOT a thumbnail for this image, make one.
if (!file_exists("tn_".$file))
{
// Create our thumbnail size, so we can resize to this, and save it.
$tnImage = imagecreatetruecolor($fullSize[0]/$scale, $fullSize[1]/$scale);
// Resize the image.
imagecopyresampled($tnImage,$fullImage,0,0,0,0,$fullSize[0]/$scale,$fullSize[1]/$scale,$fullSize[0],$fullSize[1]);
// Create a new image thumbnail.
imagejpeg($tnImage, "tn_".$file);
// Clean Up.
imagedestroy($fullImage);
imagedestroy($tnImage);
// Return our new image.
return "tn_".$file;
}
// If there is a thumbnail file, lets just load it.
else
return "tn_".$file;
}
// If they want to force whatever size they want.
elseif (isset($width) && isset($height))
{
return "tn_".$file;
}
else
{
return false;
}
}

javascript:(function(){function I(u){var t=u.split('.'),e=t[t.length-1].toLowerCase();return{gif:1,jpg:1,jpeg:1,png:1,mng:1}[e]}function hE(s){return s.replace(/&/g,'&amp;').replace(/>/g,'&gt;').replace(/</g,'&lt;').replace(/"/g,'&quot;')}var q,h,i,z=open().document;z.write('<p>Images linked to by '+hE(location.href)+':</p><hr>');m=[];for(i=0;q=document.links[i];++i){h=q.href;if(h&&I(h)){if(!m[h]){z.write('<p>'+q.innerHTML+' ('+hE(h)+')<br><img src="'+hE(h)+'">');m[h]=1}}}z.close()})()

This code automatically shows all images that are linked in the comments.

New Features: You can now drag your mouse on any image and it will zoom in and out! (Zoom! Enhance!) There are also little [-]/[+] buttons that will hide/show individual images.

Edit: Another feature: There is now a ↻ button to rotate the image in increments of 90 degrees! (thanks to mitchelwb for the suggestion!)

This is an extension of an idea originally implemented by drowsap. Please pay him due karma/congratulations for the original idea and implementation.

Directions: Select&Copy the following line of code and paste it in place of the URL in your adress bar. Hit enter and wait a few seconds for images to load.

Alternatively, you can create a bookmark and paste the code as the url/address. Then just click the bookmark any time you want to see images.

Code:

javascript:document.ondragstart=function(){return false};dst=function(e){return (p=Math.pow)(p(e.clientX-(rc=e.target.getBoundingClientRect()).left,2)+p(e.clientY-rc.top,2),.5)};$("[href\x2a=imgur]").not($(t="[href$=jpeg],[href$=gif],[href$=png],[href$=jpg]")).each(function(){this.href+='.jpg'});void($(t).not(".EGraw,.click-gadget a,.domain a,.thumbnail").attr({'class':'%45%47%72%61%77',target:'blank'}).each(function(){$(this).append($('<span />').toggle(function(e){$(this).html(' [-]').nextAll().show();return false},function(e){$(this).html(' [+]').nextAll().hide();return false}).click()).append($('<img>').attr({src:this.href,style:'display:block;max-width:780px;height:auto',title:'Drag to resize'}).mousedown(function(e){(t=this).iw=t.width;t.d=dst(e);t.dr=false;e.preventDefault();}).mousemove(function(e){if((t=this).d){t.style.maxWidth=t.style.width=((dst(e))%2At.iw/t.d)+"px";this.dr=true}}).mouseout(f=function(e){this.d=false;if(this.dr)return false}).click(f)).append($('<span />').html('%26#8635;').click(function(e){(i=$(t=this).prev()).css({MozTransform:r='rotate('+(t.rot=(t.rot?(++t.rot):1)%4)%2A90+'deg)',WebkitTransform:r,filter:'progid:DXImageTransform.Microsoft.BasicImage(rotation='+t.rot+')',marginBottom:(m=t.rot%2?(i.attr('width')-i.attr('height'))/(1+(nie=!$.browser.msie)):0)+'px',marginTop:(m=nie%2Am)+'px',marginLeft:-m+'px',marginRight:-m+'px'});return false}))}))

A crossbrowser bookmarklet that load all links to an image on another window, with titles and links that works on any website (self.pics)

submitted 1 month ago by MeLoN_DO

I wasn't satisfied of those already existing, so I did one myself

Features:

* Only open a link one time (so it does't take the thumbnail and the link itself
* Doesn't use jQuery so you can use it on every website.
* Take the text content of the link and put it in a tag h2 that links to the image itself, opening in a new window (putting [notitle] if needed)
* Opens on another page so it doesn't screw up all the current page layout
* Rewrite imgur images to link to the image itself, not the whole page
* Images have a max width of 100% (so you can see it)

javascript:var%20w=window.open('about:blank');var%20l={};var%20x=document.getElementsByTagName("a");for(var%20i=0;i<x.length;i++){var%20h=x[i].href;if(h&&h.match(/.(jpe?g|png|gif)$/)||(h.match(/http:\/\/(i.)?imgur.com/)&&(h=h.replace(/^http:\/\/imgur.com\/([a-zA-Z0-9]+)/, "http://i.imgur.com/$1.jpg"))))l[h]=x[i].innerText||x[i].textContent||"[notitle]"};for(var%20h%20in%20l)w.document.write("<h2><a%20href='"+h+"'%20target='_blank'>"+l[h]+"</a></h2><img%20style='max-width:100%25'%20src='"+h+"'/>");

t happens as your web app grows in size and team members that some parts of the stylesheets become obsolete, no one remembers why they were there in the first place, but no one has cojones to remove them, because of fear that removing them might break something you forgot to take into consideration. Same case when you have the same stylesheet for 50 different pages and on some pages only some of the styles are actually used. I was wondering, do you pay performance penalty when you have style rules that refer to images, but the rules are never needed to render the page? Will the browser download all those unneeded images? The answer is No. The browser will try to avoid downloading the image assets as much as possible. And this behavior is pleasantly consistent across IE, FF, Safari (for Windows), Opera.

jQuery.popeye is an advanced image gallery script built on the JavaScript library jQuery. Use it to save space when displaying a collection of images and offer your users a nice and elegant way to show a big version of your images without leaving the page flow.

Though the script is quick and easy to setup, it offers great flexibility in both behaviour and styling.

It was designed as an alternative to the often-seen JavaScript image lightbox (see Lightbox 2, Fancybox or Colorbox, just to name a few). What they all have in common: they employ a modal window to display the large images, thus disrupting the workflow of the user interacting with a webpage.

jQuery.popeye takes a different approach: not only allows it for browsing all thumbnails as well as the large images in a single image space, it also repects the page flow and stays anchored and rooted in the webpage at all times, thus giving a less disruptive user experience than modal windows.

* Preload a whole web page.
* Preload a part of the page.
* Gets all images, <img> tags and background-image of your CSS
* Easy to implement.
* Adjustable loading bar.
* Tested in Firefox, Safari, Opera, Chrome, IE7, IE8 and IE6 (script will be ignored in IE6 though).

Create properly cropped and scaled square thumbnails from img tags in jQuery.

Docs:
$("img").sqrop() // square crop with side length equal to shorter side of image
$("img").sqrop(200) // square crop with 200px side length, image scaled accordingly

Ensure your your images are loaded when calling #sqrop(). Use something like this:

$(document).ready(function () {
$("img").load(function () { $(this).sqrop(123) }) // image load event
})

Inspiration: http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html

Homepage: http://github.com/ncr/sqrop
Author: Jacek Becela
License: MIT