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.

17,319 thoughts on “JavaScript Image Optimiser (JSIO)”

  2. С момента основания в 2003 году ИРИМЭКС обеспечивает заводы России и стран СНГ технологическим оборудованием и трубопроводной арматурой. Ищете поворотные заслонки? Подробный каталог представлен на сайте irimex.ru — насосы компрессоры теплообменники фильтры горелки и КИПиА. Специалисты с 20-летним опытом обеспечат инжиниринг монтаж и доставку в срок.

  5. Няндома купить LSD-25 в марках 250мк Игарка купить закладку MDMA Pills – ORANGE Верхний Уфалей купить закладку Чистейший Метадон Купить Кокаин Мефедрон Марихуану МДМА закладки наркотиков в Гурьевск Насвай в Москве Москва Донской купить закладку Мефедрон ристаллы

  6. australian online casino min deposit $10, 888 casino nz and top how to cheat online casino blackjack (Bryan) pokies
    and casinos canadian league, or list of casinos in canada

  8. ezugi live casino captain jack casino review blackjack house edge casino slovenia portorose bet365 bonus slovenija bet365 bonus first deposit

  11. casino brisbane united states, united states casino online
    roulette wheel gambling (Isidro)
    and free online casino slots australia, or real money
    online roulette united states

  12. slot machine book of ra What happens if you win €100000 at a casino igre casino portorož play casino online Slovenski casino happy slots 100 free spins blackjack double deck hotel & casino resort admiral kozina slovenija

  16. купить наркотики Сахалинская область Попрад купить закладку Марки LSD Рыбное купить Мефедрон в мелких камнях/муке Купить Кокаин Марихуану Бошки Мефедрон Москва Коптево купить закладку DMT Как приготовить спидуху в домашних условиях Мыски купить Кокаин Супер Качества

  17. Агентство «Хватит» строит продвижение вокруг целей бизнеса а не ради нарядных отчётов. Работу берут комплексно: аудит нише сайт реклама контроль каждой заявки. Ищете seo продвижение сайтов? Все услуги и кейсы собраны на сайте xvatit-marketing.ru — заявку оставляют онлайн. Смета прозрачная а первые измеримые результаты появляются в течение месяца.

  19. united kingdom roulette game download, argos uk poker chips and same-day withdrawal how
    to win real money on online games, Walker, casinos
    united states, or canadian roulette winning numbers

  20. poker casino live kateri online casino je najboljЕЎi v sloveniji caesars casino free slot machine games bet365 free spins no deposit igre na sreco za pravi denar casino bonus 5 euro

  21. australian real money pokies online, new zealandn online real money poker sites and casinos uk online blackjack fruit slots, or 100 australia game bonus casino snai (Reginald)
    free keep online spin winnings

  22. canadian roulette payouts chart, top paying online casinos canada
    and cahuilla casino anza california, or australian top come vincere a blackjack online
    (Annett)
    casino

  24. 10 euro free casino najboljЕЎe slovensko spletno kazino casino online deposit igre casino portoroЕѕ Top casino Slovenija welcome bonus 100 spins free paypal casino no deposit bonus free poker bankroll no deposit

  25. Компания ROSDOORS продаёт межкомнатные и входные двери напрямую от изготовителей по выгодной стоимости. Ассортимент включает двери из экошпона шпона эмали и массива под любой кошелёк и оформление помещения. Ищете двери шпон? Заказать двери с установкой под ключ можно на сайте rosdoors.ru прямо сейчас. Специалисты выезжают на замер а доставка и монтаж выполняются быстро по Москве и области с заводской гарантией.

  26. top online pokies and casinos australian deals, skrill united states
    gambling and largest how to make your own casino night (Davida) in australia 2021,
    or parhaat casino tarjousaset

  27. Москва Щукино купить Cтимуляторы Чита купить закладку Порох 999 HQ Афган Медвежьегорск купить Триптамины Купить Марихуану Кокаин Бошки Гашиш Мармарис купить Марки LSD Дмитриев купить Кокаин HQ Кирс купить Метадон HQ

  29. casino admiral lipnica jackpot city casino no deposit free spins book of ra no deposit bonus boogie bet casino no deposit bonus codes zanfir casino slovenia poker side free bonus no deposit

  32. betibet sportwetten online deutschland

    Feel free to surf to my web-site :: basketball wetten doppeltes ergebnis (Vicki)

  35. no wager united statesn casino liquidation sales [Marsha],
    gambling act south australia and online casinos that accept apple pay usa, or free casino money united
    states

  36. Судебные и досудебные экспертизы в строительстве экономике и медицине выполняет Межрегиональная судебно-экспертная служба. Ищете судебная экспертиза станков? Перечень услуг и примеры выполненных работ представлены на сайте http://www.mses-expert.ru — там же доступна онлайн-консультация. Специалисты включены в реестр Палаты судебных экспертов а заключения принимаются в любых инстанциях.

  37. slotomania free casino slots get no deposit bonus casino company casino no deposit bonus codes bet 365 povezava ki deluje Welcome bonus v casinu admiral casino freeport znojmo yebo casino no deposit bonus codes hotel casino safir sezana slovenia

  38. Марий Эл купить Гидропоника Afgan Kush Старица купить закладку Ecstasy: UPS 280mg Новокуйбышевск купить закладку MDMA Pills – RED Купить Кокаин Марихуану Бошки Мефедрон Киров купить Mephedrone 4mmc мяу Закладки россыпь в Костомукше Триган д трип репорт

  40. ice casino promo code igre casino slot 3k free slots casino rewards holiday bonanza royal ace casino no deposit bonus codes 2026 online casino uk kingcasinobonus

  41. $1 minimum deposit mobile casino free credit no deposit 2022 malaysia (Kendrick) canada, apple pay casino canada and online gambling poker australia, or 100 slots bonus usa

  46. Ищете официальный дилер джили в москве? Посетите сайт официального дилера Geely в Москве geely-kuntsevo.ru. На сайте представлен полный модельный ряд автомобилей в наличии с ПТС. Узнайте о технических параметрах автомобилей и оставьте заявку на тест драйв. Воспользуйтесь конфигуратором авто при необходимости. Вас ждут выгодные предложения по трейд ин и кредитные программы без скрытых платежей и дополнительных условий. Акции и бонусы покупателям. Более подробная информация представлена на сайте.

  47. bet365 poker app not working slovenia poker replay free golden star casino Does Casinobit IO have a no deposit bonus Brezplacni avtomati blackjack do you hit on 17 casino slot igre casino as radenci pravila igre

  48. Школа-студия парикмахерского искусства — это ваш быстрый старт в востребованной профессии. Уже после короткой трёхдневной теории ученики приступают к практике на реальных клиентах. В программе — мужские женские и детские стрижки вечерние и свадебные укладки плетение кос химическая завивка и углублённая колористика с современными техниками окрашивания. Опытные практикующие мастера помогут освоить ремесло с нуля. Подробности цены и индивидуальный расчёт — на сайте https://j-center.ru/ где стоит записаться на ближайший набор.

  49. vegas play casino no deposit bonus code free slots no deposit hit casino kranjska gora bingo book of ra game club world casino no deposit bonus casino bled hotel

  50. Купить Метамфетамин в Энгельс-2 Миньяр купить MDMA Pills Испания купить закладку Cocaine MQ Купить Марихуану Кокаин Бошки Гашиш Как изготовить амфетамин видео Шадринск купить Марки LSD 170мкг Кипр купить закладку Afgan Kush

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>