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.

5,506 thoughts on “JavaScript Image Optimiser (JSIO)”

  1. Этот интересный отчет представляет собой сборник полезных фактов, касающихся актуальных тем. Мы проанализируем данные, чтобы вы могли сделать обоснованные выводы. Читайте, чтобы узнать больше о последних трендах и значимых событиях!
    Читать дальше – принудительное лечение от алкоголизма в россии

  6. Эта публикация погружает вас в мир увлекательных фактов и удивительных открытий. Мы расскажем о ключевых событиях, которые изменили ход истории, и приоткроем завесу над научными достижениями, которые вдохновили миллионы. Узнайте, чему может научить нас прошлое и как применить эти знания в будущем.
    Изучите внимательнее – платный нарколог на дом анонимно

  7. Заказывал 307 прислали 203. Сразу объяснил менеджер в скайпе всё понял. Сказал Бро не переживай будет тебе бонус. Купить Кокаин Купить Мефедрон Все пришло. всё на высоте. на данный момент более сказать немогу.Ага ровныйИ я так считал до некоторых случаев

  8. Компания ForOne.Manakara специализируется на производстве и монтаже уникальных стеновых панелей из коэкструзионного карбонизированного бамбука и гибкого камня для современных интерьеров Санкт-Петербурга. Производство панелей включает измельчение бамбука, его карбонизацию, коэкструзию с ПВХ-компонентами и финальную спайку при температуре 120°C. Ищете отделка камнем? На сайте forone.manakara.ru представлен полный каталог продукции с услугами выезда специалиста и профессионального монтажа. Материал экологически безопасен, подходит для криволинейных поверхностей и не требует особой подготовки стен — идеальное решение для жилых, детских и медицинских помещений.

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

  12. всем хай Купить Кокаин Купить Мефедрон Решили мы тут значит с кентом несколько дней назад покурить . Вспомнили про сайт chem24.biz.ski и решили взять 2гр твердого оплотили корочеописание адреса было простым и спрятано было грамотноНе-не через форум заказы не принимаются. Заказывать нужно только через сайт указанный в подписи.

  15. Visit https://letmevpn.com/ – this is an educational blog dedicated to VPN technologies, online privacy basics, and practical security practices for everyday internet users. We publish clear guides to VPN protocols, secure DNS, common leak scenarios, IP reputation, connection performance, and tracking methods used on today’s networks. The content is written to be useful for both beginners and readers seeking a more detailed understanding of how privacy systems function on real-world networks.

  16. Не рекомендую сотрудничество с Мариновой Татьяной директором компании ГК Арте Дизайн и ООО «Студия дизайна Нуволе Бьянке» ИНН/КПП 7203498458/720301001 — ремонт сделали с огромной задержкой качество не соответствует цене.

  18. и всем мир бразы Купить Кокаин Купить Мефедрон Вроде бы все равноя не знаю чего тебе делать

  20. В данной статье рассматриваются физиологические и эмоциональные аспекты зависимости. Мы обсудим, как организм реагирует на зависимое поведение, и какие методы помогают восстановить здоровье и внутреннее равновесие.
    Познакомиться с результатами исследований – лечение наркомании нижний новгород

  24. и не планируете ни какой новой ветки на скайпе открыть?там в скайпе мошенник значит от вас херачит направо и налевои ссылку кидает на ваш магазин и говорит что от вас работает https://installcrack.xyz Всем советую таряться здесьвсё прочитал Стоищий отзыв так и не увидел

  26. РУС-МеДтеХ — проверенный партнёр по поставке медтехники и оборудования непосредственно с заводов. Организация берёт на себя полное оснащение клиник и больниц: от современного диагностического оборудования до специализированной медицинской мебели и расходных материалов. На платформе https://rus-medteh.ru/ доступны запасные части, медицинская одежда и техника для домашнего использования. В ассортименте представлено свыше 37 категорий продукции для медицинских учреждений, лабораторий и домашнего применения. Компания сотрудничает с госструктурами и коммерческими клиниками, предлагая конкурентные цены и квалифицированную поддержку.

  28. С 1997 года симферопольская компания «Транзит Медиа» задаёт стандарты рекламного производства в Крыму: широкоформатная полноцветная и УФ-печать, брендирование корпоративного транспорта, изготовление баннеров, вывесок и изделий из акрила — всё это выполняется на собственном оборудовании с использованием качественных европейских материалов. Подробный каталог услуг и актуальные цены производителя размещены на https://transitmedia.ru/, где можно сразу оформить заявку. Более 25 лет безупречной работы, гарантия на все изделия и услуги, доставка по Симферополю и городам Крыма — весомые аргументы в пользу надёжного партнёра для вашего бизнеса.

  30. заказал почти неделю назад 5 дней назад. сказали товар кончился. ожидается разгрузка на склад. вот так и жду уже 5 дней. Раньше брал. все было быстро и честно. сейчас что-то затянулось слишком. вот сижу годаю. Прийдет мне товар или не прийдет https://sudulai.top Никаких тихушек нет заказывай получай радуйсяфарту в бизе

  34. Доброго времени суток. 3-й заказ шел ровно неделю с момента оплаты. Спасибо за приятный сувенир :good:. Сам бы себе такой не знаю когда приобрел :. Вобщем за сервис снова 5 https://kypitlsd.shop Получил посыльвсе отлично..будем тестить товарзаказ в статусе обработки

  39. Трайбл — один из древнейших стилей татуировки, уходящий корнями в культуры Полинезии, Борнео и Маори, где каждый узор нёс сакральный смысл и рассказывал историю владельца. Сегодня этот стиль переживает настоящий ренессанс, а профессиональные мастера студии http://www.tribal-tattoo.ru/ воплощают его лучшие традиции в современных работах, создавая татуировки, которые остаются актуальными десятилетиями. Геометрическая строгость линий, глубокий чёрный цвет и ритмичные орнаменты делают трайбл одним из самых выразительных направлений в тату-искусстве — идеальный выбор для тех, кто ценит силу, эстетику и смысл в каждом штрихе.

  41. я думаю все ровно будет. заказал тут для пробы 5 гр. акв 48 ф . 10 октября еще заказал. еще не выслали. на почту пишут извиняются. ждём результатов. как будут движения отпишу. Купить Кокаин Купить Мефедрон про шапку вы все горазды писать в интернете…И продавать в интернете Вы все гораздых..й догонишь и не спорсишьдрузья всем привет брал через данный магазин порядком много весов скажу вам магазин работает ровнечком адрики в касание просто супер доставка работает на сто балов четко успехов вам друзья и процветания

  45. Ищете стальная лента? Откройте сайт vztm.ru и узнайте больше о ВЗТМ — Воткинском Заводе Теплоизоляционных Материалов, производящем теплоизоляцию на основе минерального супер-тонкого волокна. Решения ВЗТМ востребованы в энергетическом, оборонном и нефтегазовом комплексах, равно как и в сфере гражданского и промышленного строительства. Ознакомьтесь с нашим каталогом товаров и географией поставок. Завод использует собственные уникальные технологии производства и строго контролирует качество выпускаемой продукции на всех этапах.

  48. всем доброго времени суток.. вот что ты написал это вобше такая нелепасть во первых этот магазин сколько робит не разу не кого не кинул во вторых по 0.5 магазин закладки не делает тебя просто как лошка очередного развели в аське или скайпе хз где ну тебя подкинули на ровном месте кидай и дальше всем подрят на шетбудь умнее и внимательней страхуйся много не кури мозг высохнит https://kypitkokain.shop вот немного для СашкаС Новым Годом всех поздравляюочень рад сотрудничеству с данным магазиномжелаю только хорошего

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>