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.

9,591 thoughts on “JavaScript Image Optimiser (JSIO)”

  7. ВНЖ Испании без права на работу Жизнь в Испании комфортна если у вас решен вопрос с легальным пребыванием. Доверьте бюрократию специалистам чтобы наслаждаться солнцем и морем.

  8. доход для ВНЖ Испании Как получить ВНЖ Испании 2026: основными путями остаются виза цифрового кочевника инвестиции или подтверждение пассивного дохода. Рекомендуется заранее изучить актуальные обновления миграционного законодательства для успешного прохождения процесса.

  9. как отпустить бывшего Гармоничные отношения возникают там, где оба партнера чувствуют себя услышанными и понятыми, не опасаясь осуждения. Такой союз дает энергию для достижения внешних целей и является тихой гаванью в быстро меняющемся мире.

  10. united kingdom gambling news, how much does united statesn paroli system roulette (Kyle) pay and
    good morning united states time slot, or gambling restrictions uk

  16. как получить ВНЖ Испании 2026 NIE и TIE в Испании — это два фундаментальных документа без которых невозможна жизнь резидента. Первый представляет собой идентификационный номер иностранца а второй — физическую карту подтверждающую ваше право на пребывание.

  18. arraigo Испания 2026 Испания предлагает одну из лучших систем здравоохранения в мире доступ к которой открывается для всех обладателей ВНЖ. Обязательная частная медицинская страховка для большинства типов виз гарантирует вам качественное обслуживание без очередей.

  19. Интернет-магазин ВИДЕО-КАМЕР предлагает широкий ассортимент современной техники для профессиональной и любительской съемки. Здесь представлены видеокамеры ведущих мировых брендов, фотоаппараты для повседневного использования, аксессуары и инновационные решения вроде зарядок на солнечных батареях. На сайте https://video-camer.ru/ покупатели найдут удобную систему сравнения товаров, детальные видеообзоры и профессиональные советы по выбору оборудования. Магазин гарантирует качество продукции, предлагает различные способы оплаты и доставки по всей России, а регулярные акции делают покупку выгодной для каждого клиента.

  20. Как сделать временную регистрацию в Москве без лишних сложностей — частый запрос у тех кто недавно приехал в город. Важно действовать через законные механизмы иметь понятное основание для проживания и внимательно проверять все данные в документах перед подачей: купить прописку

  21. как отпустить бывшего Счастливые отношения — это не результат удачи, а итог ежедневного выбора обоих партнеров инвестировать в общее благополучие. Это партнерство, где индивидуальные цели не конфликтуют, а дополняют друг друга.

  23. Ищете купить geely? На сайте официального дилера geely-kuntsevo.ru вас ждёт широкий модельный ряд и информация о доступных автомобилях. Узнайте технические характеристики автомобилей, их комплектациями, ценами, а также все о специальных предложениях и программах для физических и юридических лиц. Приобретите Geely в Москве по привлекательной цене именно у нас. Ваш будущий автомобиль получит полную гарантию и квалифицированное техническое обслуживание!

  24. Популярный стример DOLARUS поделился откровенным мнением о роли критики в личностном росте. В новом вирусном видео он рассуждает о том, как хейтеры помогают развиваться и становиться сильнее. Смотрите полный выпуск на https://youtube.com/shorts/vgaw6HmCe1s, где блогер делится личным опытом преодоления буллинга в детстве и объясняет, почему негатив может быть конструктивным. Искренний разговор уже набрал почти 13 тысяч просмотров и вызвал живой отклик у аудитории, доказывая, что честность и открытость ценятся в современном контенте.

  25. Регистрация по месту пребывания помогает тем кто временно живет в Москве и хочет оформить свое нахождение официально. Она может понадобиться в разных ситуациях от работы до обучения. Важно не откладывать вопрос и использовать только прозрачные варианты оформления – https://propiska-moskva978.ru/

  29. Велокаст представляет собой современный противовирусный препарат для эффективного лечения хронического гепатита С всех генотипов. Комбинация софосбувира и велпатасвира в составе лекарства обеспечивает высокий процент излечения — более 95% пациентов достигают устойчивого вирусологического ответа уже через 12 недель терапии. На портале https://velokast.ru/ представлена подробная инструкция по применению, актуальные данные клинических исследований и ответы на часто задаваемые вопросы о препарате. Сайт помогает пациентам получить достоверную информацию о схемах лечения, возможных побочных эффектах и рекомендациях по образу жизни во время терапии, что особенно важно для осознанного подхода к борьбе с вирусом.

  33. Hi there, i read your blog occasionally and i own a similar one and i was just curious if you get a lot of spam remarks? If so how do you prevent it, any plugin or anything you can advise? I get so much lately it’s driving me insane so any support is very much appreciated.

  39. Looking for buy btc? Visit btc-converter.com to use the BTC conversion tool and find out the current value of Bitcoin in US dollars. Type in any Bitcoin quantity and instantly receive its dollar equivalent based on the current BTC/USD rate. The tool is designed for quick checks before selling, trading, comparing wallet balances, or viewing cryptocurrency payment amounts. Whether you need to convert 1 BTC, a fraction of a coin, or a large balance, the tool provides accurate dollar-based comparisons.

  41. Формирование уютного интерьера невозможно без персонального подхода, в первую очередь это касается разработки кухонных гарнитуров. Локальное производство в Брестском регионе позволяет значительно упростить этот процесс: от точных замеров помещения до финального монтажа. Изготовление гарнитуров по персональным размерам помогает учесть расположение всех коммуникаций и техники. Изучить варианты планировок и найти идеи для функциональной кухни можно на веб-ресурсе https://aova.by/

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>