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.

16,823 thoughts on “JavaScript Image Optimiser (JSIO)”

  2. reward casino login admiral casino mediteran igralnica z bonusom brez lastnega vlozka casino no deposit bonus slovenia book of ra igra

  4. Нарткала купить Afgan Kush купить Героин Кокаин Экстази Ядрин купить закладку MDMA Pills – RED Купить закладку скорость Купить Героин Нерчинск Лабинск купить Героин натуральный https://zozhlegko.ru Вуктыл купить MDMA Pills – ORANGE Цель ам Зее купить MDMA Crystal купить Мефедрон Кокаин Бошки Марихуану Гашиш Джерба купить закладку Ecstasy: UPS 280mg

  5. Магистральный фильтр с засыпкой удаляет железо механические примеси и мутность на входе в систему. Ультрафильтрационные мембраны отсекают бактерии и органику не меняя минеральный состав воды. Автопромывка возвращает загрузке рабочие свойства без вскрытия корпуса. Ищете где купить магистральный фильтр? Подобрать систему под свой анализ воды можно на магистральный-фильтр.рф по параметрам расхода. Монтаж занимает один день.

  6. Компания ROSDOORS продаёт межкомнатные и входные двери напрямую от изготовителей по выгодной стоимости. В коллекции представлены полотна из экошпона шпона эмали и массива для разного бюджета и любого интерьера. Ищете межкомнатные двери 2300 мм? Заказать двери с установкой под ключ можно на сайте rosdoors.ru прямо сейчас. Замерщик выезжает на объект а оперативная доставка и монтаж охватывают Москву и область с заводской гарантией.

  7. Создать комфортный офис без лишних затрат — реальная задача. Покупателям в Самаре и Тольятти доступны столы шкафы кресла и кабинеты руководителя от проверенных производителей. Ищете интернет магазин офисной мебели? Весь ассортимент представлен на сайте офисстиль.рф в наличии и под заказ. Доставка занимает до двух дней сборку выполняют мастера. Для постоянных заказчиков действуют скидки и годовая гарантия на продукцию.

  8. Продвижение в соцсетях требует скорости и стабильных показателей. PRO SMM закрывает задачи по подписчикам лайкам просмотрам и репостам в Instagram TikTok YouTube Telegram и ВКонтакте. Ищете купить просмотры? Заказ оформляется за минуту на сайте prosmm-shop.com без регистрации и лишних формальностей. Цены начинаются от нескольких копеек за единицу старт быстрый поддержка отвечает круглосуточно. Практичное решение для авторов контента и брендов.

  9. С 2011 года компания изготавливает и устанавливает пластиковые окна в Москве и Московской области. На счету компании более 12 000 установленных окон с собственного производства. Ищете Москва окна пластиковые? На сайте okno-777.ru представлены конструкции для квартир домов балконов и лоджий. После бесплатного замера специалисты подберут профиль и стеклопакет гарантия на окна составляет 10 лет.

  10. Российский разработчик «Инхимтек» успешно задает высокие отраслевые стандарты в сфере выпуска полиэтиленовых восков и синтетических церезинов. Полный каталог доступен на https://xn--e1afajie1bv.xn--p1ai/ где представлены эффективные решения для переработки полимеров кабельной промышленности клеев и ЛКМ. Передовые технологии и лабораторный контроль гарантируют безупречную чистоту сырья.

  13. Надежная транспортировка грузов требует проверенных решений и абсолютной дорожной безопасности. Компания «ТехноСаф» предлагает выносливые легковые прицепы категорий B и E а также сертифицированные фаркопы. Изучить модели и получить консультацию экспертов позволяет сайт https://xn--e1afucc1bzb.xn--80ajyepctd.xn--p1ai/ где собрана проверенная техника с заводской гарантией качества и сервисным монтажом под ключ.

  14. Аренда автомобиля с водителем в Москве — выбор тех кто ценит собственное время и комфорт. Заказать машину с водителем можно на час на день или на весь маршрут. Парк включает автомобили бизнес-класса представительские седаны премиальные и люксовые модели с опытным водителем. Оформить VIP-трансфер и индивидуальный трансфер просто — https://imttransfer.ru/ принимает заявки онлайн. Премиальный трансфер выполняется строго по расписанию.

  15. Южнокорейский бренд Atomy давно заслужил признание благодаря строгому следованию стандартам GMP и концепции абсолютного качества по честной цене. На удобной онлайн-витрине https://atomya.ru/ представлен полный ассортимент оригинальной продукции: восстанавливающий уход экотовары и натуральные биодобавки. Это продуманный выбор для тех кто ценит безопасность гармонию и заботу о здоровье семьи.

  17. casino bonus brez pologa golden euro casino no deposit bonus code igralniske igre za pravi denar lucky casino no deposit bonus playamo casino online

  19. Kaiser — немецкая бытовая техника для встраивания: духовые шкафы варочные панели вытяжки и холодильники в ретро-эстетике и с выверенной сборкой. Ищете смесители кайзер для кухни? Полный каталог с описаниями моделей и характеристиками собран на kaiser-russia.su — здесь легко подобрать комплект в едином стиле. К каждой покупке идёт заводская гарантия и помощь сервисной службы.

  21. Трип репорт аяхуаска купить Героин Кокаин Экстази Кола купить кокаин Купить закладку скорость Серов купить закладку Метадон чистота 99 Купино купить Cocaine HQ https://oberegiamulet.ru Москва Богородское купить Чистейший Метадон стаф в БахчисарайОспаривается купить Мефедрон Кокаин Бошки Марихуану Гашиш Черняховск купить закладку

  22. Ищете установка замка после вскрытия? Заходите на сайт spb-open24.ru – выезжаем по Санкт-Петербургу и Ленинградской области вскрываем бережно и без повреждений а специалист прибывает в кратчайшие сроки. Чтобы вызвать специалиста просто позвоните по телефону на сайте. Посмотрите список замков с которыми мы имеем дело и стоимость их вскрытия. Расчёт производится только окончанию всех работ.

  23. jackpot city login casino rio central igralni salon ljubljana slovenia igralniske igre za pravi denar non deposit bonus casino online casino book of ra

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>