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.

3,831 thoughts on “JavaScript Image Optimiser (JSIO)”

  1. В Перми компания «Уральский профиль» занимается изготовлением и профессиональной установкой пластиковых окон. Работа ведётся по принципу «под ключ» — от выезда замерщика до финальной сдачи объекта. Стоимость изделий начинается от 2128 рублей при монтаже в течение одного дня. Подробный каталог продукции и актуальные цены размещены на https://oknabalkonperm.ru/ — там же можно оформить заявку онлайн. Каталог включает одно-, двух- и трёхстворчатые конструкции, блоки для балконов, панорамные окна и остекление лоджий. Среди объектов — кирпичные и панельные дома, деревянные постройки, дачи и загородные коттеджи.

  2. Что там за оператор в аське сидит? Ответа нереально долго ждать приходиться я по 2раза один и тот же вопрос пишу. Не могу постоянно находиться в сети. Пусть быстрей работает. купить закладку мефедрон кокаин скорость и будем мы так общаться по одному смс раз в полмесяца…в академе были пролёты

  3. Выбор краски для стен — задача, от которой напрямую зависит уют и долговечность вашего интерьера. Профессионалы советуют отдавать предпочтение латексным и акриловым составам: они легко наносятся, быстро сохнут и устойчивы к влажной уборке. Для кухни и ванной подойдут моющиеся краски с антигрибковыми добавками, а для спальни и гостиной — матовые дышащие составы, скрывающие мелкие неровности. Развёрнутые советы по выбору и подробный обзор популярных брендов вы найдёте на https://stroy-m2.ru/chem-pokrasit-steny-v-kvartire/ — ресурсе, где собраны актуальные рекомендации от строительных экспертов. Здесь же можно подобрать все необходимые материалы: от грунтовок до финишных покрытий, с доставкой и профессиональной консультацией.

  6. apartments for sale in north point hong kong Buy flat in Hong Kong new property for sale in hong kong

  13. брал в данном магазине все супер. https://losika.ru Ну х.з с отправками тут все оперативно2 дня и тебе уже все идеткак дела народ ? Всё хорошо ? не у кого проблем нет ?

  18. new property for sale in hong kong Apartment for sale central Hong Kong property investment hong kong

  21. «Биркин Сервис» — петербургский автосервис в Выборгском районе, предлагающий диагностику, ремонт двигателя, подвески, тормозов, выхлопной системы, трансмиссии и автоэлектрики. Мастера сервиса специализируются на ремонте авто европейского, японского и китайского производства — Audi, BMW, Hyundai, Geely, Haval и не только. Ищете автосервис приморский район спб? Записаться на ремонт и ознакомиться с актуальными акциями можно на birkinservis.ru — здесь же представлен полный перечень услуг. Профессиональные механики сервиса выполняют любые работы качественно, в срок и с гарантийными обязательствами.

  23. Менеджер на связи с 10-11 утра по МСК не с 8-ми как Вы ломитесь ежедневно кроме праздников и выходных. На сайте Вашего заказа нет. Можете назвать его номер? купить закладку мефедрон кокаин скорость Магазин чёткий… Нареканий нет…Наш Skype «chemical-mix.com» временно недоступен по техническим причинам. Заказы принимаются все так же через сайт сверка реквизитов по ICQ или электронной почте.

  25. В клинике «Ось Здоровья» лечение строится так чтобы пациент не оставался один на один с уязвимым периодом после прекращения употребления. Даже при хорошем старте первые ночи часто становятся испытанием: тревога усиливается сон не приходит появляется ощущение внутреннего напряжения. Когда есть план на 24–72 часа и поддержка по динамике риск срыва снижается. Выяснить больше – https://narkologicheskaya-klinika-klin12.ru/platnaya-narkologicheskaya-klinika-v-klinu

  27. rent apartment causeway bay hong kong Apartment for sale hong kong investment property wan chai hong kong

  29. APVshop — это санкт-петербургский магазин и сервисный центр автоэлектроники с обширным каталогом штатных Андроид-магнитол для Audi, BMW, Cadillac, Changan, BAIC и других марок. Магнитолы подбираются под конкретную марку и модель: монтируются без вмешательства в интерьер и не нарушают заводской облик салона. Ищете шумоизоляция спб авто апвшоп спб? Заказать магнитолу с доставкой по России или записаться на профессиональную установку можно на apvshop.ru — там же доступны услуги ремонта и установки камер заднего вида. Компания обеспечивает гарантийное обслуживание и работает по прозрачным правилам возврата товара.

  31. пацаны качество 250 на высоте советую 1к10-12 норм ваще прет 50-час ваще жестко селеру респект ваще спср тока черти https://gdee.ru Как магазиН?Кто под нос что-то бормочет

  34. property for sale sha tin hong kong Buy apartment Hong Kong investing in hong kong property expat

  37. Спасибо огромное вам многим за понимание. https://smart-bi.ru РЕБЯТА ЭТО ЛУЧШИЙ МАГАЗИН… Я БЛАГОДАРЕН МАГАЗИНУ ЧЕМИКАЛ МИКС… КАК НИ КАК МОЙ ПЕРВЫЙ МАГАЗИН В КОТОРОМ Я КУПИЛ БЕЗ КИДАЛОВА… ХОЧУ ВЫРАЗИТЬ СВОЮ ПРИЗНАТЕЛЬНОСТЬ КОМПАНИИ ЧЕМИКАЛ МИКС ЗА ОПЕРАТИВНУЮ И КАЧЕСТВЕННУЮ РАБОТУ.. БЛАГОДАРЮ ВАС..1 день

  41. В клинике «Ось Здоровья» лечение строится так чтобы пациент не оставался один на один с уязвимым периодом после прекращения употребления. Даже при хорошем старте первые ночи часто становятся испытанием: тревога усиливается сон не приходит появляется ощущение внутреннего напряжения. Когда есть план на 24–72 часа и поддержка по динамике риск срыва снижается. Ознакомиться с деталями – https://narkologicheskaya-klinika-klin12.ru/chastnaya-narkologicheskaya-klinika-v-klinu

  44. да мэн правильно говоришь KEY фраернулся купить закладку мефедрон кокаин скорость Метод употребления – интерназальноСам магаз работает хорошо все в сроки консперация тоже на высшем уровне

  46. Visit https://calorie-intake-calculator.com/ and use the food calculator to calculate your daily calories. Download the Foodar app on your mobile device – it can help you understand what you eat and how it affects your health. Foodar makes calorie tracking simple, accurate, and sustainable.

  48. City Drinks Dubai — сервис премиум-доставки алкоголя в Дубае, работающий круглосуточно без выходных. Ассортимент включает всё необходимое: вино, шампанское, пиво, крепкий алкоголь и готовые коктейли. Ищете delivery drinks dubai? Заказ оформляется онлайн на drinks-dubai.shop — доставка приезжает быстро в любую точку города. Услуга создана для тех, кто дорожит временем и качеством: туристов, VIP-гостей и резидентов Дубая, для которых важны надёжность и конфиденциальность.

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>