JavaScript Image Optimiser (JSIO)

Posted on by

So, I’ve embarked on a new mini project. It is kind of inspired by image sprites.

Image sprites are a great idea, but come with a whole bunch of issues that make them a bit of a pain to work with.

Firstly, most of the time you have to use markup to create an element in html to “hold” the image you wanted to display from your sprite. This is because if you actually set a sprite as the background image for a large html element you’re likely to see other images in the sprite as well. Because of this, you actually lose useful functionality that CSS gives you, like the ability to position, repeat and scale an image. Also, the markup you’ve created to hold the image exists for style purposes, which is bad.

Secondly, sprites can be a massive ball ache to maintain. If you’ve closely packed your images in a sprite for maximum efficiency and then one of your images needs to change size, you’re either going to have to move ALL images surrounding the image you have to update (and obviously then change all background-position properties for the images you’ve moved) or leave a space and put the updated image in a new position in your sprite.

How do you know which images in a sprite are used and which ones are dead? Since your images are referenced by coordinates, this sort of clean up becomes a nightmare and is actually a bit lot of a nightmare to create image sprites in the first place.

The goals of the project are to

  1. Reduce the number of http requests (and their associated header traffic) to the server and hence reduce the time it takes to load all images on a website and bandwidth footprint the site requires
  2. Create a solution that’ll alleviate some of the problems surrounding the creation and use of image sprites
  3. Do something cool

The JSIO project website has a pretty good explanation of how it works so I won’t bore you with the details here. However, as a brief overview, it packages all your image data in data uri format and you reference particular images by their filename rather than their coordinates.

The site actually uses the HTML5 file api to generate your resources file for you, which makes creating and maintaining your JSIO “sprite” really really easy.

I read *somewhere* that data uri encoded images can be up to 1/3 larger than corresponding image files, however with gzip encoding they can be only 0-3% larger (or less). My thesis is that for a site with many small images, JSIO could be more efficient and easier to maintain than having separate files or even an image sprite.

…I’m yet to prove or disprove this and I’ll be conducting some tests whose results I’ll post up here (even if they do prove JSIO to be useless).

Disclaimer: This is the first ever ALPHA release of JSIO – it works on the latest Firefox and Chrome but I haven’t even checked it in IE yet. It probably won’t work in IE yet. Also, the website needs some work for optimal display on mobile devices.

16,056 thoughts on “JavaScript Image Optimiser (JSIO)”

  1. stahuj hraci automaty zdarma nove casino 2026 bez vkladu hry automaty zdarma book of ra Online kasino za peniaze zahraniДЌnГ­ casino bonus za registrГЎciu ruleta rozhodnutГ­ online

  7. I am not positive where you are getting your information, however good topic. I needs to spend some time learning more or figuring out more. Thanks for great information I used to be looking for this information for my mission.

  8. купить Гашиш Бошки Марихуану можно ли купить наркотики

  11. Videos caswros amateurClare werbeloff bikinji shootTeeen nude picyures2.25 diameter vibrating dildoEuro trash boy girl sexOlder gay
    men haing gay sexSmall sexy tushyAdult frese pave template web
    xnxx Men s nakedGayy blk bootyAffects oof low sperm countCordelia baad girls pornAsian cum stoppersBilpy west
    sucksBusfy boonde nudeAsian nightcluyb minneapolis https://xxxxvideos.cc/ Rpggs wikth naked ladiesPorn application for ippd touchBlack cock fucking
    white assGirl peeing out tthe windowMy wife doesnt want sex muchHandkerchiefs gayScorelajd busty 2009 jelsoft
    enterprise ltd xnxx Scena film sexyWhote fuckedEva lonforia pardker sex
    picsPointy tits bigRegulaion fetish rubberNude victoryia secret girlsGalery lingerie modelHoties biig boobs oldser thhan 18Aids penisAdult web buisnessFree trannny onn guy videosDick andd jennys restaurant

  12. online automaty free spin online live ruleta paypal sk no deposit 5 euro Hry online za peniaze zoznam online kasГ­n automaty online zdarma sk

  17. купить Гашиш Бошки Марихуану гашиш москва

  20. spin city no deposit bonus online casino bonus za registraci bez vkladu blackjack online with friends free Slovenske kasino one step casino hracie automaty zdarma apollo

  22. купить Гашиш Бошки Марихуану лирика 56 купить

  23. urobiЕҐ hru ruleta online zadarmo online casino money Do casinos give free play Online casina na slovensku casino s bonusom bez vkladu volne otocky casino bonus bez vkladu

  27. купить Гашиш Бошки Марихуану трамадол купить в москве

  28. canadian poker machine game download, chusachansi casino takeover and casino on net 888 usa,
    or real money slots new united states

    My blog post … what is a gambling license (Natalia)

  31. casino hry zdarma automaty egt omnia casino bonus casina vstupne bonusy Online kasino s vyhrou penazi vytvoriЕҐ ruletu otГЎzok online stare hracie automaty pinball

  32. casinos australia no deposit bonus, can i play online pokies in australia and 21dukes casino login, or canadian online casino roulette 10 cent einsatz (Adalberto) gambling

  36. best poker website australia, pokies online free united
    states and all slots flash casino australia, or netent no
    deposit bonus nz

    my webpage; what cities in the us have casinos (Jordan)

  39. online casino legal united states, canada gambling bill and bet uk casino,
    or free online pokies no deposit united kingdom

    Here is my website … beatthecasino login; Lorena,

  42. live casino 888 live stream from casino casino bez vkladu s bonusem Najkvalitnejsie kasino na slovensku online kasina sk blackjack online game free

  48. купить Гашиш Бошки Марихуану купить марихуану соль бошки закладки

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>