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,236 thoughts on “JavaScript Image Optimiser (JSIO)”

  1. Калач купить закладку DMT Саранск купить Порох 999 HQ Афган купить онлайн закладку в Нижняя Салда Купить Кокаин Марихуану Бошки Мефедрон Покровск купить MDMA Pills – BLUE Медынь купить закладку Мефедрон купить закладку Лучший эйфоретик Назрань купить Afgan Kush

  4. free spins no deposit codes slovenska spletna igralnica Spletne igralniske igre minimum deposit online casino ruleta v zivo manhattan slots no deposit bonus codes 2026

  6. casino med no deposit bonus latest casino no deposit bonus codes 2026 igre casino free avtomati what is a free spin Casino s placilom Paysafecard play online casino games for fun bet365 mobile app casino bonus brez depozita 5 euro

  9. Новошахтинск купить закладку MQ Cocaine Mexico Москва Алтуфьевский купить закладку LSD-25 в марках 250мк Зубцов купить закладку Гашиш Cube Купить Кокаин Мефедрон Марихуану МДМА Соль-Илецк купить закладку Амфетамин Сульфат белый Калязин купить закладку MDMA Pills – GREEN Сибай купить закладку MDPV

  12. 888 casino monopoly live casino guru no deposit bonus Spletna igralnica Paysafecard kazino bonus no deposit zodiac casino slovenija used your bonus slovenia casino hotel

  13. poker casino slovenija What is the best online casino app hopa online casino types of casino games Casino za pravi denar queen vegas casino no deposit bonus code casino min deposit 5 € online poker real money free bonus

  14. Русское афонское общество поддерживает отношения с монашескими общинами Святой Горы Афон и участвует в восстановлении церквей и монастырей на Афоне и в России. Тут рассказывают о традициях обычаях и истории православной культуры. Ищете Голощапов константин? Узнать больше о деятельности и почитании святынь можно на сайте afon.center — присоединяйтесь к добрым делам.

  18. Берёзовский купить закладку Мефедрон в мелких камнях/муке Забайкальский край купить Гашиш Cube Верхняя Тура купить закладку Марки LSD 170мкг Купить Кокаин Марихуану Бошки Мефедрон Как избавиться от наркотиков в моче продажа марихуаны Шумерля купить Психоделики

  20. 888 casino no deposit free spins casino igre avtomati free casino online besplatno online casino hit bet365 bonus first deposit no deposit bonus casino real money

  21. wintingo online casino review raging bull bonus codes free spins casino admiral konoko free vegas casino slots Katera je najboljsa spletna igralnica za igralce iz Slovenije What are free spins no deposit sign up casino free spins casino tivoli bled

  25. Москва Чертаново Южное купить закладку Амфетамин Сульфат белый Купить DOMINO Нягань Пугачёв купить METHADONE Купить Марихуану Кокаин Бошки Гашиш Наркотик фен как выглядит Юрга купить Марки LSD Нерюнгри купить закладку Mephedrone 4mmc мяу

  27. The structure and tone of this post help create a discussion that feels meaningful clearly arranged and comfortable for different audiences to engage with. Best online casino alberta

  28. casino bonus free live roulette casino casino igre besplatne slots astral bet online casino free spins casino no deposit november 2026 casino hotel admiral skofije

  31. Профессиональные средства для маникюра высокого класса от украинского бренда ANS. Мастера найдут здесь премиальные гель-лаки базы топы и гели для наращивания ногтей. Ищете гель лак для ногтей недорого? Полный каталог продукции представлен на сайте http://www.absolutenailsystems.com доступный каждому нейл-мастеру. Продукция дарит ногтям стойкость здоровый вид и природную красоту надолго. Заказы доставляются быстро бережно и по выгодным ценам.

  32. Требуется срочно эвакуировать машину в Обнинске? Профессиональная служба круглосуточно подаёт технику для легковых машин внедорожников и мотоциклов. Ищете эвакуатор обнинск? Все услуги и актуальные тарифы представлены на сайте vakuator-obninsk.ru для каждого клиента. Профессиональные специалисты осторожно загрузят и доставят машину в указанную точку без царапин.

  33. casino bernardin portoroЕѕ portorose slovenia bet 365 blokiran casino princess admiral davcna stevilka online casino slots Casino igre na spletu book of ra no deposit live casino house free slot games download

  35. Точный учет жидкостей начинается с безупречной градуировки резервуаров где даже малейшая неточность ведет к убыткам. Инженерный программный комплекс https://rascet.ru/ предлагает надежное решение для геометрической тарировки емкостей любого типа и наклона. Инструмент мгновенно формирует калибровочные таблицы по ГОСТу экономя время и гарантируя эталонную точность расчетов.

  36. Закладки лирика в Туране Томари купить Мефедрон ристаллы Купить Гарсон Протвино Купить Кокаин Марихуану Бошки Мефедрон Нестеров купить закладку Альфа Отрицательный тест на наркотики спайс купить в якутске

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>