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.

12,097 thoughts on “JavaScript Image Optimiser (JSIO)”

  1. casino bonus bez vkladu WypЕ‚acalne kasyna internetowe BLIK hotline casino bonus bez depozytu

  5. Дровяные печи Ферингер признаны самыми популярными в России и оптимальными по соотношению цены и качества. Ищете feringer? Выбрать модель и заказать монтаж под ключ можно на сайте feringer.shop без переплат и лишних хлопот. Команда профессионалов берет на себя замер помещения монтаж печи и дымохода а также отделку сауны под ключ с гарантией качества.

  9. Thanks, I have recently been hunting for facts about this topic for ages and yours is the best I have discovered so far.

  11. what poker sites are legal in united states, best new zealandn roulette strategy and united
    kingdom friendly online poker sites, or top paying online casinos united states

    Also visit my blog Mr Spinz casino

  14. gry kasyno 777 WypЕ‚acalne kasyna internetowe BLIK kasyno online wygrana

  15. online pokies gambling australia, list of casinos in usa and no deposit no credit card casino bonus usa 2021 nonstop, or is
    it legal to gamble online in japan (Joyce) casino allowed in united
    states

  22. kod bonusowy vulkan vegas Zagraniczne kasyna z bonusem bez depozytu malina kasyno online

  24. new zealandn online casinos pokies, united kingdom online casino real money free bonus and top
    online pokies and casinos canadian league, or does united
    kingdom have casinos

    Also visit my blog post … bingo game payouts (Stacy)

  27. beep casino no deposit bonus Kasyna z minimalnym depozytem kody promocyjne casino

  33. casino online bonus no deposit Bonus Bez Depozytu Nowe Kasyna kasyno gry darmowe

  34. Frree nakked women milfDick’s sporting goods upland caAmateur sexy allureVinttage amerockBllow jobb ccum shkt movke
    gallerySexxy doctorsAdulpt simpons comicsAss froknt lineAssfucked hardcore vidsColtt 44 vihtage gunFrree fazke celeb sex tapesChangges iin penmis shape wiyh ageChristopher lamojr
    nudde tsenage girlsEbone ssex videosLegall npde tsen boysBrazier sexx portn chelseaFamiky fufk pixMassive tits iin glassesCuum
    muschi pussy girls naked busen modelGwwen stefanji
    nude sexyVintagge whiting aand davis costuhme jewelryNaked fiit girls picsFrree anzl phkto galleriesStretching hher assholeDirrty weet pussyFree
    alisoon angel pornEcort service 78415Pokemn doujinjshi hentaiAnimation ssex
    picReaar brake pads escortLinls tedan fuck ftee sitesFree hottest pornstar gallerySex dare plattsburghRussiian ssexy
    momsAsian pacifikc islanbder studies michiganComic picxs xxxx freeNaaked
    anthony joihn dennisonBresst cancsr drugg tompxifin connecticutHottext chinese woken nudeWomen wslk naked vidTeen plumper
    assSinging wive castSeexy lingerie blogsWomesn sucking dick pordn moviesBlack
    cloud pornGruge thhe adult moviePajela andeerson sucking cumJemnifer illey nudxe picsAnim
    freee podcast xxxTeeen girl spankedChloe vjevier lesbianFreee nnude womjen mture video
    https://gozatube.com/categoria-vasca Ebony party blowjobWife tto have sexAnnal prolapse emedicine necrosiss hourMarathi sex nippleBikkini videos fuckTwwo girls sfrip
    into nothingBondafe ree heell hig picPoeno pigFree pictrures ggay plrn stars101 nightss off grfeat seex
    scriptsVibrqtors thgat warmFree nude oolder omen haing sexBiig freee gallery polrn titBoootcamp tgpThe
    penis enlargement sarch enggine bizsrate ccom canadian liceLatinoo anaal seex
    abuseBlonde pornno stasr pussy9 inches off teen boyy dickHussband wkfe fiszt
    fuckShockig reality fujck molvie galleriesToop off tthe line escortsFlat
    bottomm steeel mugs2006 gayy iin nycc paradeDiick jne storybookTeeen tubhe nudismSubmissivve gay
    wrestlingSex mret iin clutierr iowaPenduulous vulvasBiig tits dpedAmateur webxam trip titsAduult chasrge download
    frwe moovie noVintave handbagss andDispossble facal maskFrree ature orall hdWelksh amateur nudeSluut grl manga vvol
    3Celebs gertting fuckedAsiaan groppingCrotchlwss lingerie galleriesMaake vintage teesAnime flash sexIowaa cit vintage clothingUncllassified poorn videosPerfect asss for doggystyleOrgfin oof oral sexPirate booty pornDiva
    wwwe lesbianVintage paccker shirtsAlll inclusivfe aadult esort sexFrwww bbbw moviceBuuying asdian gamesSeean caseey gayFuckin housewie suckingKing countty axult detentionExtrait video gratuiite porn hardHiatt porn shanaHotny thick
    nude

  35. czy kasyno online jest legalne Metody pЕ‚atnoЕ›ci w kasynach online polskie kasyna legalne

  39. limit czasowy total casino WypЕ‚acalne kasyna internetowe BLIK automaty online bez registrace

  42. mostbet casino bonus Kasyno bonus bez depozytu 2026 total casino opinie wyplaty

  46. red on bet casino Kasyno natychmiastowe wypЕ‚aty 2 player blackjack online

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>