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.

2,968 thoughts on “JavaScript Image Optimiser (JSIO)”

  1. azizi developments email address 1 Bedroom Apartment for Rent in Dubai Marina dubai invest in uk property

  3. как списать долги Запрос как списать долги обычно начинается с поиска законных вариантов. На sorryclosed.ru можно сравнить судебную и внесудебную процедуру и понять какой путь подходит в конкретной ситуации.

  5. HDRezka — один из крупнейших русскоязычных онлайн-кинотеатров с библиотекой более 7400 страниц контента: фильмы сериалы мультфильмы и аниме на любой вкус. Каталог охватывает всё — от культовой классики до свежих релизов 2026 года с профессиональным дубляжом и субтитрами. Ищете смотреть фильмы и сериалы онлайн? Переходите на hdrezka.film получайте доступ к тысячам тайтлов в Full HD без регистрации. Сериалы обновляются каждый день — свежие эпизоды «Декстера» «Во все тяжкие» и других хитов выходят в день релиза с выбором перевода.

  7. Hey there You have done a fantastic job. I will certainly digg it and personally recommend to my friends. I am sure theyll be benefited from this web site. buy valium online without prescrition xxx pornhub pills

  11. банкротство при микрозаймах Банкротство при микрозаймах рассматривают многие заемщики с большой просрочкой и несколькими МФО. На sorryclosed.ru собраны материалы о том как такие долги учитываются в общей процедуре.

  12. Привет парни…Заказал тут 10-ку МНа..Ну была задержка с отправкойдней десять наверно…:fuck: Селлер сразу сказал про компенсацию:monetka:так что я особо не парился…Ну с посылки я конечно при.уел:confused:.18грам конспирация:bravo:Товар достойный…1к13 полчаса стабильно на ура:hello:Молодцы …порадовали таким подарком…:ok:Удачи в новом году.. купить мефедрон и кокаин Доброго времени суток друзья женскую половину человечества с праздникомПривет ребята

  14. Услуги нарколога на дому в Самаре включают не только экстренный осмотр но и комплекс медицинских мероприятий направленных на снижение интоксикации облегчение тяжелых симптомов и общее восстановление состояния пациента. Объем помощи зависит от клинической картины длительности употребления алкоголя или других психоактивных веществ возраста хронических заболеваний и текущих рисков. Врач подбирает схему индивидуально исходя из того какие задачи необходимо решить в конкретный момент — снять острые проявления стабилизировать самочувствие или подготовить пациента к дальнейшему лечению зависимости. Подробнее тут – нарколог на дом цена самара

  15. The Collection guide Benefits of Buying Property in Dubai real estate crm software in dubai

  16. May I simply just say what a comfort to discover someone who actually understands what theyre talking about on the web. You actually know how to bring an issue to light and make it important. More people really need to check this out and understand this side of the story. Its surprising you are not more popular given that you most certainly possess the gift. betify avis

  18. процедура банкротства физлица Процедура банкротства физлица состоит из нескольких этапов и требует внимательной подготовки документов. На sorryclosed.ru есть понятные материалы о порядке действий и последствиях процедуры.

  20. ТС прими во внимание купить мефедрон и кокаин продавец 810 долго отвечает и порой не конкретно.Кидалы они или нет-узнаю в течении пары днейно отказ в закладке-не основание.

  21. Процесс капельницы включает внутривенное введение различных растворов которые помогают нейтрализовать эффекты алкогольной интоксикации включая последствия запоя и алкоголизма. Наиболее часто в составе капельницы используются солевые и глюкозные растворы витамины группы B а также препараты для детоксикации организма. Эти компоненты помогают быстро восстановить водно-электролитный баланс улучшить обмен веществ и ускорить выведение продуктов распада алкоголя. Выяснить больше – kapelnicza-ot-pokhmelya-samara-6.ru/

  23. внесудебное банкротство Внесудебное банкротство подходит не всем поэтому перед подачей нужно проверить условия. На sorryclosed.ru можно посмотреть кто вправе пройти процедуру без суда и какие есть ограничения.

  25. dubai property real estate agents 2 Bedroom Apartment for Sale in JBR Dubai Prices villa rooms for rent in rashidiya dubai

  26. Капельница от запоя в Нижнем Новгороде: снятие интоксикации восстановление организма и помощь при запое под контролем специалистов в наркологической клинике «Похмельная служба» Подробнее тут – капельница от запоя цена нижний новгород

  29. Продован 1000 балоф те =) купить мефедрон и кокаин а вот на фофу гнать нельзя… она на высоте…а чё заказал? Прикольный сайт ассортимент радует :?

  30. Современный бизнес не прощает некачественной полиграфии: визитка, листовка или брошюра — это лицо компании, и здесь важна каждая деталь. Московская типография Самрай предлагает полный спектр полиграфических услуг: от печати визиток, буклетов и календарей до широкоформатных баннеров, картин на холсте и табличек на металле. На сайте https://samray.ru/ можно ознакомиться с прайсом, загрузить макет и получить оперативный расчёт заказа. Специалисты работают ежедневно, принимают оплату любым удобным способом и гарантируют высокое качество даже при срочном тираже.

  33. luxury city real estate dubai Full Building for Sale in Dubai 3 bedroom Villas for sale in The Springs

  34. магазин на самом деле чёткийначал с ним работать не пожалели качество и количество и скорость-всё на высоте купить мефедрон бошки гашиш Скоро новые вкусности уууу…. ждемМеня тут Кинули на 25к претензия в арбитраже

  35. Препараты введённые через капельницу начинают действовать почти сразу. Они поступают напрямую в кровоток обходя желудочно-кишечный тракт что позволяет ускорить процесс восстановления и устранить симптомы похмелья такие как головная боль тошнота и слабость уже через 20–30 минут после начала процедуры. Подробнее – капельница от похмелья на дом нижний новгород

  36. банкротство с автомобилем Банкротство с автомобилем вызывает много вопросов у должников особенно если машина нужна для работы или семьи. На sorryclosed.ru можно посмотреть общие правила и оценить возможные последствия.

  39. помощь должникам по кредитам Помощь должникам по кредитам должна быть законной и понятной. На sorryclosed.ru собраны материалы для тех кто ищет варианты снижения долговой нагрузки и хочет разобраться в банкротстве без лишних обещаний.

  41. ps real estate dubai Hotel Apartments in Bur Dubai for Monthly Rent hotel apartments dubai downtown

  42. «Стальной алхимик: Братство» — аниме, в котором наука и магия слиты в одно грозное искусство алхимии, подчинённое железному принципу равновесия: ничто не достаётся даром. Братья Элрики нарушают главный запрет, пытаясь воскресить мать, и платят чудовищную цену: Эдвард теряет руку и ногу, душа Альфонса заточена в броне. Ищете онлайн стальной алхимик все серии? На stalnoy-alhimik-kinogo.vip все 64 серии доступны бесплатно в хорошем качестве с профессиональной озвучкой. Впереди у них — охота за философским камнем и страшное открытие о том, какой ценой держится государство Аместрис.

  43. Я вам Касух советовал бы в скайпе этот вопрос решить. И в субботу и воскресенье магазин не работает так что вполне закономерно что вам не отвечают. https://world-stronghold.ru Тут мыТовар получен Большее спасибо магазину

  45. Посетите официальный мультибрендовый интернет-магазин Nail Republic и Mojo https://nail-republic.shop/ и вы найдете более 10 000 товаров для маникюра и педикюра в Москве — гель-лаки, инструменты, оборудование с быстрой доставкой. Посмотрите каталог с выгодными ценами – там вы найдете все что вам необходимо, а наши акции позволят существенно сэкономить!

  46. юрист по банкротству физических лиц Юрист по банкротству физических лиц помогает оценить риски и подготовить документы. На sorryclosed.ru можно изучить саму процедуру и заранее понять какие вопросы стоит задавать специалисту.

  49. Похмельный синдром — это не просто неприятное ощущение а целый комплекс симптомов которые могут варьироваться от легкого дискомфорта до тяжелых состояний. Капельница от похмелья используется в случаях когда симптомы становятся особенно выраженными и требуют вмешательства профессионала. Врачи отмечают что капельница помогает значительно ускорить процесс восстановления организма после алкоголя избавляя от боли тошноты и слабости. Получить дополнительную информацию – kapelnicza-ot-pokhmelya-nizhnij-novgorod-2.ru/

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>