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

  1. Наши врачи приезжают в удобное для пациента время и проводят полный осмотр. В зависимости от состояния пациента они подбирают необходимое лечение: капельницы для снятия токсинов медикаментозные препараты для стабилизации состояния а также дают рекомендации по дальнейшему восстановлению. Важно что лечение на дому позволяет избежать медицинской огласки и лишнего стресса а также гарантирует полную конфиденциальность. Подробнее можно узнать тут – запой нарколог на дом самара

  10. Отзыв по работе магазина: после оплаты мной товара имелась задержка и паника с моей стороны после задержки продавец деньги вернул- проблему без внимания не оставил… далее получил от магазина приятный презент в размере не дошедшего товара- товар дошел за 2 дня курьерка работает без перебоев. Магазину респект Можно работать купить кокаин мефедрон бошки марихуану Расположите по мощностиеще раз какой городл

  13. iPhone давно перестал быть просто смартфоном — это целая философия, где каждая деталь продумана до миллиметра. Apple создаёт устройства, в которых передовой процессор собственной разработки, исключительная камера и интуитивная операционная система iOS образуют единую экосистему без компромиссов. Подробнее об особенностях и преимуществах смартфонов Apple читайте на https://aksmob.ru/artcles/2/iphone-osobennosti-smartfonov-apple — здесь собран исчерпывающий разбор ключевых характеристик, на которые стоит обратить внимание перед покупкой. Многолетняя поддержка обновлений, надёжная защита данных и безупречная сборка делают iPhone одним из самых выгодных вложений в современные технологии.

  16. Выезд нарколога начинается с оценки состояния пациента. Доктора измеряют давление, пульс, оценивают уровень сознания и выраженность симптомов. На основании этих данных формируется план лечения, который реализуется сразу на месте. Такой подход позволяет очень быстро перейти к стабилизации состояния и начать основные этапы работы.
    Разобраться лучше – вывод из запоя на дому круглосуточно в санкт-петербурге

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

  26. Капельница от похмелья в Екатеринбурге с выездом специалиста подбором терапии и восстановлением состояния в наркологической клинике «Частный медик 24» Ознакомиться с деталями – капельница от похмелья вызов на дом в екатеринбурге

  27. Они хоть кому нибудь отвечают? купить кокаин мефедрон бошки марихуану Привет ребятаХотел бы у вас спросить за безофуран6-apb…в частности про его качество…А так же про тусишку

  28. В мире онлайн-развлечений Fugu Casino выделяется как свежий и динамичный игрок, открывшийся в 2026 году под управлением опытной компании Galaktika N.V., которая успешно ведет 12 подобных проектов. С лицензией Кюрасао (OGL/2024/169/0146) и поддержкой трех языков, включая русский, это казино предлагает около 9 тысяч игр от 68 провайдеров вроде Yggdrasil, Spinomenal и Red Tiger — от слотов и рулеток до лайв-столов, карточных игр и быстрых мини-развлечений, плюс букмекерский раздел для ставок. Удобный интерфейс с интуитивным меню идеален даже для новичков, а приложения на Android и iOS обеспечивают мобильность; минимальный депозит и вывод — всего 10 евро, с обработкой заявок до 24 часов и круглосуточной поддержкой через чат или Telegram. Если вы ищете надежное место для азартного досуга с регистрацией через email, телефон или соцсети (только для совершеннолетних), загляните на https://fugucasino02.online/ — здесь активные зеркала, тематические разделы и атмосфера настоящего приключения, где каждый спин может принести удачу, а правила строго соблюдаются для честной игры.

  30. Наркологический стационар с комфортными условиями сочетает в себе высококлассное медицинское обслуживание и удобства которые способствуют более быстрому восстановлению пациента. В таких клиниках пациенты не только получают лечение от зависимости но и имеют возможность восстановиться в комфортных условиях что важно для психоэмоционального состояния. Комфортные условия способствуют улучшению настроения уменьшению стресса и созданию более эффективной атмосферы для лечения. В случае запоя или алкоголизма врач может предоставить помощь на дому чтобы стабилизировать состояние пациента до перевода в стационар. Подробнее – наркологическая клиника стационар

  31. После того как пациент вызвал нарколога на дом врач прибывает на место и начинает с осмотра. Он оценивает общее состояние пациента измеряет его пульс давление температуру частоту дыхания и проверяет уровень сознания. Это необходимо для точной диагностики состояния и выбора наиболее эффективного метода лечения. Врач также уточняет анамнез выясняет длительность употребления алкоголя или наркотиков а также обращает внимание на наличие хронических заболеваний или других сопутствующих факторов которые могут повлиять на лечение. Исследовать вопрос подробнее – http://narkolog-na-dom-samara-2.ru

  34. Главное преимущество такого выезда в том что лечение начинается сразу. Не нужно ждать утра искать транспорт уговаривать человека ехать в тяжёлом состоянии или рисковать пока он снова тянется к алкоголю чтобы временно заглушить симптомы. Домашний визит даёт возможность быстро стабилизировать ситуацию и убрать хаотичность которая часто возникает в семье в острый момент. Получить дополнительные сведения – запой нарколог на дом

  35. Запой — это состояние, которое развивается на фоне длительного употребления алкоголя, сопровождающееся острыми симптомами интоксикации. Капельница от запоя может быть необходима, когда состояние пациента требует немедленного вмешательства. Важно своевременно заметить признаки, указывающие на необходимость медицинской помощи, таких как признаки алкоголизма, и в случае необходимости — кодирование или вывод из запоя для более комплексного лечения.
    Узнать больше – капельница от запоя на дому

  36. can foreigner buy executive condo in singapore Buying Private Property in Singapore bungalow for rent singapore

  37. Капельница от похмелья в Самаре с устранением симптомов интоксикации и контролем состояния в наркологической клинике «Частный медик 24» Получить больше информации – капельница от похмелья анонимно самара

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

  39. Мне от оплаты и в мои руки в общем занимает 2-3 дня купить кокаин мефедрон бошки марихуану Может забегу как-нибудь Обычно все берут там где надежно у одних и техже новые магазины или первые покупки рисково любой выберет проверенных личноБрал неоднократно в этом магазе всегда всё ровно и без проволочек так держать

  41. Looking for a transfer from Halkidiki Airport? Visit https://halkidiki-transfer.gr/ and you’ll find private transfers at competitive prices. We provide maximum comfort and reliability with fixed prices and professional drivers. Our modern fleet includes Mercedes E-Class sedans, V-Class minivans, and Sprinter minibuses. All vehicles are meticulously maintained, air-conditioned, and non-smoking.

  43. Hello there I know this is kinda off topic however Id figured Id ask. Would you be interested in exchanging links or maybe guest writing a blog post or vice-versa? My site goes over a lot of the same topics as yours and I feel we could greatly benefit from each other. If you are interested feel free to send me an email. I look forward to hearing from you Fantastic blog by the way https://share.google/dwGuXYeWaFBMpKkVg

  45. Вывод из запоя на дому в Санкт-Петербурге с выездом нарколога детоксикацией и восстановлением состояния в наркологической клинике «Частный медик 24» Получить дополнительную информацию – вывод из запоя на дому анонимно

  47. Капельница от похмелья — это медицинская процедура, которая помогает организму быстрее восстанавливаться после чрезмерного употребления алкоголя, включая последствия запоя и хронического алкоголизма. Эффект капельницы заключается в быстром восстановлении водно-электролитного баланса, выведении токсинов и устранении неприятных симптомов похмелья, таких как головная боль, тошнота и слабость. В отличие от обычных методов, капельница позволяет минимизировать время восстановления и улучшить состояние пациента значительно быстрее.
    Детальнее – капельница от похмелья вызов на дом в самаре

  49. Нарколог на дом может помочь в следующих ситуациях: Исследовать вопрос подробнее – вызов нарколога на дом

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>