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

  2. Современные геймеры ищут площадки для общения с единомышленниками и обмена опытом. Платформа https://lolz.live/ объединяет тысячи любителей компьютерных игр разных уровней. Здесь каждый находит полезную информацию по любимым играм и жанрам. Форум постоянно развивается и предлагает участникам новые возможности для взаимодействия.

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

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

  6. В итоге К-ю чистый. Эффект очень хорошоНе отлично но был же разговор 1к10 а то и к15. мефедрон кокаин купить взял впервые в этом магазине все прекрасно быстро недорогобрали 10 гр реги

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

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

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

  17. все ровнопродукт качественный не знаю что у вас было.делал 1 к 10. получилась на убой https://soundaction.ru разобрался поэтому и удалил сообщение до того как ты ответил А ты тс в лс отпиши и если ты не балабол в чем я очень сомневаюсь то проблема будет решена а писать на ветке это говно для чего не понятно на что вы надеетесь

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

  26. Наблюдая за многими сообщениями мы понимаем что многие на форуме не более чем очень кипишные люди которые любят разводить демагогию. мефедрон кокаин купить Тарился в этом магазе Летом разок и в Сентябре разокмне тоже все пришло. да и еще вещь нужную в хозяйстве подогнали. вы ребята вообще МОЛОДЦЫ. ВСЕХ БЛАГ ВАМ.

  29. смотреть как трахают жирных

  31. Интернет-магазин «Polyana» специализируется на поставке запчастей и ремней для комбайнов и тракторов ведущих мировых брендов — OPTIBELT, TOYOPOWER, MICHELIN. Покупатели найдут в каталоге вариаторные, клиновые, поликлиновые и плоские ремни, подшипники, муфты, цепи и рукава высокого давления. Ищете купить ремни комбайн енисей? На polyana.ru можно оформить заказ онлайн с доставкой по всей России. ООО «АгроЛига» обслуживает розничных и оптовых клиентов, гарантируя широкий выбор продукции и стабильное качество для нужд сельского хозяйства.

  33. тусишка хороша я как го грешил что нирвановская была какая то тёмная так вот у чемикала она вообще практически бежевая :D качество порадовало хорошая вещь https://gortech-snab.ru Нет не нужен.Ну и да ладно не отровлюсь думаю

  41. До сих пор в себя прихожу https://sro-za-den.ru магазин достойныйвсё ровно и в срокспасибо большое за ваш трудбудем продолжать сотрудничествоМинус оказался только один и это ожидание вместо обещанных 3-5 пришлось ждать больше недели. Не знаю чья эта заслуга отправителя или доставки но это немного напрягало.

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

  43. VIDEO-CAMER — московский интернет-магазин с обширным ассортиментом техники для видеонаблюдения и безопасности. Каталог включает IP-камеры, уличные и беспроводные видеокамеры, профессиональные видеорегистраторы, видеодомофоны, тепловизоры, металлоискатели, приборы ночного видения и GPS-трекеры. Ищете оптика? На video-camer.ru собраны сотни позиций от проверенных производителей с гарантией и доставкой по России. Магазин охватывает как домашние решения — видеоняни, радионяни, умные камеры — так и профессиональное оборудование для охраны объектов, защиты информации и поисковой техники.

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

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

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

  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>