Backscratch is a jQuery plugin that serves up better image sizes when using Backstretch
It's based on the technique from CSS Tricks that uses a shim to load an image and then, based on the browser size, loads up an image that best matches that window size.
Small window = smaller image. Smaller image = faster loading.
Right now, backscratch will only work on elements and not the entire window like Backstretch does. That functionality is planned.
Include jQuery, Backstretch and Backscratch on your page.
Use the data-src on your container element to tell backscratch the basename of the images you've created.
<div class="backscratch">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" class="bg" data-src="/path/to/your/image.jpg" />
</div> <!-- header -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script src="jquery.backscratch.min.js"></script>
<script>
// Call backscratch with the image size options you want to use
$(".backscratch").backscratch([1024, 1280, 1366]);
/**
* Ideally, you've created images with the following names
*
* image_1024.jpg
* image_1280.jpg
* image_1366.jpg
*/
</script>Instead of attaching Backscratch to an element on the page, you can attach it to the background of the page by omitting the element on the backscratch function call.
<script>
$.backscratch([1024, 1280, 1366]);
</script>