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

  1. Good post. I learn something totally new and challenging on websites I stumbleupon on a daily basis. Its always useful to read content from other writers and use something from other sites. kasiino pakkumised

  3. Современный зритель давно оценил удобство домашнего кинопросмотра, и платформа https://tv-goodfilms.ru/ стала для тысяч людей настоящим открытием. Здесь собраны фильмы и сериалы в HD-качестве 720 и 1080p — от классики до свежих премьер, — причём совершенно бесплатно, без регистрации и скрытых платежей. Сервис позволяет собирать личные коллекции, добавлять картины в список желаний и обсуждать просмотренное с друзьями. Никаких подписок и ограничений: просто выбирайте фильм и наслаждайтесь безупречным изображением прямо сейчас!

  11. Маг Азал — практикующий специалист в области магии, который делится авторскими знаниями и многолетним опытом через собственный ресурс. Публикуемые материалы охватывают любовную магию, обряды, защиту и эзотерику — изложено честно и по существу. Ищете кто такие русалки? Сайт постоянно пополняется новыми статьями magomagii.ru каждый читатель найдёт ответы на актуальные вопросы и получит реальную пользу. Аудитория ресурса превысила 800 постоянных подписчиков — это говорит само за себя. Если магия вас интересует всерьёз — здесь именно та информация, которой можно доверять.

  13. Для одесситов и гостей города информационный новостной портал Скай Пост расскажет об актуальных событиях и последних новостях за сегодня. На сайте https://sky-post.odesa.ua/ следите за новостями Одессы и Одесской области в любое время 24/7.

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

  15. В статье по вопросам здоровья мы рассматриваем актуальные проблемы, с которыми сталкивается общество. Обсуждаются заболевания, факторы риска и важные аспекты профилактики. Читатели получат полезные советы о том, как сохранить здоровье и улучшить качество жизни.
    Более того — здесь – выведение из запоя на дому

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

  23. JetronSport выпускает футбольную форму для команд всех уровней — от детских групп до профессиональных взрослых составов. Премиальные дышащие ткани с терморегуляцией и эластичностью, соответствие ГОСТам и гарантия на нанесения — стандарт качества JetronSport. Компания принимает заказы от одного комплекта и изготавливает форму в течение одного-трёх дней. На https://jetronsport.ru/ представлены модели взрослой, детской и вратарской формы с нанесением номеров и фамилий. Модели серий Space, Star и Winner оснащены прочными швами, светоотражающими элементами и тканью Quick-Dry для максимального удобства на поле.

  26. Общественно-аналитический портал «В Украине» публикует материалы об обществе, бизнесе, технологиях, здоровье и образовании без редакционных фильтров и лишних отступлений от фактов. Редакция охватывает широкий тематический спектр — от стратегической релокации бизнеса до медицинской аналитики — и подаёт информацию чётко и по существу. Следите за актуальными событиями на https://108.in.ua/ — общественно-аналитический ресурс для читателей которые ценят конкретику и глубину подачи материала. Практические статьи и экспертные обзоры превращают портал в полноценный ежедневный инструмент для широкой украинской аудитории.

  27. Hi I think your website might be having browser compatibility issues. When I look at your blog in Opera it looks fine but when opening in Internet Explorer it has some overlapping. I just wanted to give you a quick heads up Other then that fantastic blog adult xxx video porn site xxx sex video

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

  32. Центр сертификации «Стандарт-Тест» https://www.standart-test.ru/ — экспертный партнер в сфере подтверждения соответствия продукции требованиям ЕАЭС. Компания обеспечивает полный цикл сопровождения: от профессионального анализа и выбора оптимальной схемы до оформления и регистрации документов. Высокие стандарты работы, точность и конфиденциальность позволяют бизнесу уверенно выходить на рынок и масштабироваться без рисков. Решения премиального уровня для требовательных клиентов.

  33. Manakara — профессиональная команда по монтажу стеновых панелей под ключ в Санкт-Петербурге и Сочи для жилых офисных и коммерческих объектов. Компания работает со всеми популярными видами отделки: бамбуком гибким камнем МДФ ПВХ сэндвич-панелями и объёмными 3D-решениями. Ищете монтажу влагостойких стеновых панелей? На сайте manakara.ru доступны услуги замера консультации и разработки дизайн-проекта для любых объектов. Специалисты выполняют установку панелей в ванных на кухнях в новостройках и загородных домах — с соблюдением сроков и высоким качеством финишного результата.

  34. Интернет магазин БАДов диетического и спортивного питания https://iherb-vitamin.ru/ Тюмень – это русский официальный сайт интернет магазин Ихерб IHERB . Занимаемся продажей спортивного питания и БАД из официального каталога Айхерб и предлагаем только проверенные пищевые добавки и продукцию по низким ценам. У нас можно купить добавки с айхерб в Тюмени или заказать в любой город России. Сделать заказ можно на сайте. Есть в наличии в России в Тюмени и доставляем из США под заказ. Доставим в Тюмени курьером или отправим в любой город России почтой, СДЭК и другими транспортными компаниями.

  35. Современный рынок такси предлагает множество вариантов для заработка, но немногие таксопарки способны действительно обеспечить водителю стабильный доход и надёжную поддержку. Таксопарк AREON — приятное исключение: здесь ИП и самозанятые водители получают быстрое подключение к Яндекс.Такси без бюрократических сложностей и лишних затрат. Узнайте все условия сотрудничества на https://parkareon.ru/ и убедитесь, насколько прозрачна и выгодна эта система. Парк работает по всей России через единое приложение Яндекс.Про, берёт на себя взаимодействие с сервисом и предлагает бонусные программы, включая бесплатную оклейку автомобилей. Начать зарабатывать можно уже сегодня.

  37. Москва по-настоящему раскрывается тем, кто решается взглянуть на неё с воды: Кремль, Храм Христа Спасителя, Новодевичий монастырь и футуристичный Москва-Сити выстраиваются в единую живую панораму прямо с борта теплохода. Сервис https://moscowmariner.ru/ предлагает более 200 маршрутов на 2026 год — от утренних экспрессов за 99 рублей до гастрономических круизов с ужином от шеф-повара и ночных прогулок под архитектурную подсветку набережных. Купить билет просто: выбираете дату, причал и формат, оплачиваете без комиссии любой картой — и мгновенно получаете PDF-ваучер с QR-кодом на почту, никаких касс и очередей.

  40. Howdy exceptional website Does running a blog like this take a great deal of work? I have very little understanding of programming however I had been hoping to start my own blog soon. Anyways should you have any recommendations or tips for new blog owners please share. I understand this is off subject but I just had to ask. Appreciate it new online casino slots

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

  46. Агентство Vgolos выпускает тексты по главным тематическим блокам — политика, экономика, бизнес, технологии, здоровье и криминал без смягчений и лишнего контента. Журналисты издания быстро откликаются на актуальные события и работают с фактами без предположений — от расследований в судебной сфере до анализа потребительских тенденций. Читайте проверенные новости на https://vgolos.org/ — украинское информационное агентство для аудитории ценящей достоверность и оперативность. Тематика культуры, жизни и технологий гармонично усиливает новостное ядро издания и формирует из него универсальный источник информации для ежедневного чтения.

  47. Чистая вода дома — не роскошь, а норма, которую теперь легко обеспечить. PWS создаёт бытовые системы очистки воды без расходных картриджей и импортных зависимостей. На https://pws.world/bytovye-ustanivki представлены установки серии КСВ, которые снижают жёсткость в 10–20 раз, устраняют железо, запах и мутность. Системы проектируются под состав воды в вашем регионе. Инженеры компании сами консультируют клиентов и подбирают оптимальное решение под любой бюджет.

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

  49. Ищете скачать mp3? Зайдите на muzqeen.cc — музыкальный портал для настоящих меломанов с огромной коллекцией треков всех жанров и самыми свежими новинками. Помимо прослушивания, на портале доступно скачивание mp3 на компьютер и мобильный телефон. Лучшая музыка у нас на портале. Добавьте сайт в избранное чтобы не пропустить новые треки ваших любимых групп!

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>