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.

9,060 thoughts on “JavaScript Image Optimiser (JSIO)”

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

  3. Хорошийпорядочный магазин обращяйтесь мефедрон купить ТС почисти ветки ну невозможно же ничего почитать..в разных ветках одно и тоже.

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

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

  6. В этой статье рассматриваются способы преодоления зависимости и успешные истории людей которые справились с этой проблемой. Мы обсудим важность поддержки со стороны близких и профессионалов а также стратегии которые могут помочь в процессе выздоровления. Научитесь первоочередным шагам к новой жизни. Подробнее тут – podolsk clinica plus

  8. Отписывал Вам в аськевы там мне не отвечаете в течении полудня..хотя обещались отправить заказ на следующий день после оплатыа он сегодняЖду вашего ответа. мефедрон купить списались с продавцомпообщалисьдоговорились.я оплатил заказ и начались долгие ожидания моей заветной посылки.

  11. занимаюсь тестированием вместе с кролями в течении нескольких дней. Все никак не мог понять. мефедрон купить Это мы и так все знаем

  12. Runico — авторитетный ресурс по рунам Старшего Футарка, представляющий полный разбор всех 24 символов древнескандинавского алфавита. Сайт детально освещает символику рун и практику их использования в гадании, магии и психологии. https://runico.ru/runes/ собрал исчерпывающую базу знаний о рунах: значение каждого символа, мифологические корни и практические техники. Информация подана структурированно и ясно — подойдёт новичкам и знатокам рунической традиции.

  14. Школа-студия Юлии Бурдинцевой — это современный учебный центр в Москве, где каждый желающий может освоить профессию парикмахера с нуля или повысить уже имеющуюся квалификацию. Здесь предлагают курсы для самых разных специализаций: колористы, мастера мужских стрижек, универсалы и стилисты — направление найдётся для каждого. Посетив сайт https://j-center.ru/ , вы убедитесь, что обучение построено практично и доступно по цене, а опытные преподаватели передают реальные навыки, востребованные в салонах красоты. Это отличный старт для тех, кто хочет работать в одной из самых стабильных и творческих профессий сферы красоты.

  15. Открываю коробок Пусто под спички шорк вот и пакетик на глаз 03 мефедрон купить магазу процветания желаю и клиентов хороших

  17. casinos in canada vancouver, free poker chips no deposit uk and top 20 can you win real
    money gambling online (Leopoldo)
    casinos usa, or how to play united statesn poker

  18. $5 deposit pokies australia, free spins pokies in canada and play online bingo for real how to make money with blackjack (Junior) canada, or usa online
    casinos gambling

  19. в магазин приятно удивили цены сделал заказ надеюсь все придет в лучшем виде мефедрон купить В предыдущих сообщен писал что заказ по совместке от ЧМ

  20. Хотите сделать все услуги в одном месте? Салон «Планета Красоты» в Ульяновске Новый Город предлагает женские и мужские стрижки покраску маникюр педикюр прически и укладки. В Заволжье нас ценят за качество. Салон причёсок «Планета Красоты» делает укладки любой сложности. Если вы ищете где сделать стрижку покраску или маникюр приходите к нам. Мы знаем как подчеркнуть вашу красоту – BeautyPlanet73.RU

  21. geschaftskonto kleinunternehmer Vivid ist eine europaische Fintech-Plattform die digitale Geschaftskonten Zahlungen in mehreren Wahrungen Sofortuberweisungen Cashback sowie intelligente Finanzmanagement-Tools fur Freiberufler und Unternehmen bietet.

  22. geschaftskonto kleinunternehmer Vivid ist eine europaische Fintech-Plattform die digitale Geschaftskonten Zahlungen in mehreren Wahrungen Sofortuberweisungen Cashback sowie intelligente Finanzmanagement-Tools fur Freiberufler und Unternehmen bietet.

  23. geschaftskonto kleinunternehmer Vivid ist eine europaische Fintech-Plattform die digitale Geschaftskonten Zahlungen in mehreren Wahrungen Sofortuberweisungen Cashback sowie intelligente Finanzmanagement-Tools fur Freiberufler und Unternehmen bietet.

  24. Что сейчас с эйфором? мефедрон купить я тоже несколько раз брал всё прошло чётко качество радуетдоставлено всё в лучшем видеоператор молочага всегда обьяснит всё что к чемувообщем магазин для меня лучший самый надёжныйУСПЕХОВ И ПРОЦВЕТАНИЯ ВАШЕЙ КОМАНДЕ

  28. Удачи всей команде желаю мефедрон купить это зависит на сколько ты прикурен .

  30. всё отличноровносупер мефедрон купить магаз работает ровно оперативно и бонус хороший дали хотя я даже не ожидал как и обещали на следующий день отправилиа орест посылок я думаю ТС как нибудь уладит этот вопрос главное подход к нему найти

  32. 2Кто курит раз в неделю : от 3 часов до 5-7 часов кокаин купить онлайн Магазин надежный репутацию оправдал сделал заказ 24 февраля а 26 груз был уже на руках. Если и бывают задержки скорее всего это курьерские фирмы косячат. Сервис тоже на высоте люди адекватные не смотря даже на выше написанные отзывы не разу не усомнился что деньги улетят на ветер

  33. «Планета Красоты» в Ульяновске — место силы для вашей внешности. Сделайте женскую стрижку в Новом Городе чтобы выглядеть свежо. Мужская стрижка в Заволжье с нами — это четкие линии и идеальная форма. Мы заботимся о здоровье волос поэтому используем щадящие техники. Салон красоты предлагает также окрашивание и укладку. Вы можете доверить нам свои локоны любой длины. Быстрое обслуживание без потери качества. Создайте свой стиль вместе с нами. Записывайтесь прямо сейчас: https://beautyplanet73.ru/

  34. Приветствую всех ровных жителей этой ветки.Друзья помогите мне.Где на какой страничке я могу найти хозяина даннго магазина.И где адреса магазина???Где прайс???Вообще не понятный магазин.И как выглядет его аватарка. кокаин купить онлайн Самые положительные впечатления оставляет по прежнему Мажор. : Джой фулл а тебе когда отправили?

  36. Чемикал пожалуй самый ровный магаз из всех ныне сушествующих Цены конечно есть и по меньше в других местах однако для себя я выбрал безопасность и надежное сотрудничество а не дешевизну которая как показывает практика всегда заканчивается не очень хорошо. кокаин купить онлайн ы меня поняли

  37. Публикация охватывает основные направления развития современной медицины. Мы обсудим значимость научных исследований, инноваций в лечении и роли общественного участия в формировании системы здравоохранения.
    Что ещё? Расскажи всё! – clinica plus в новокузнецке

  38. Брал неоднократно в этом магазе всегда всё ровно и без проволочек так держать кокаин купить онлайн произвёл оплату на регу.жду трекадумаю быстро всё получится.

  39. В этой статье мы рассматриваем разрушительное влияние зависимости на жизнь человека. Обсуждаются аспекты, такие как здоровье, отношения и профессиональные достижения. Читатели узнают о необходимости обращения за помощью и о путях к восстановлению.
    Связаться за уточнением – выводе из запоя в Находке

  40. Желаю всего самого наилучшего вашему магазинуваш бренд это качество кокаин купить онлайн обьясни народу …….. сдесь ребята понимающие………. помогут

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

  42. Howdy, i read your blog occasionally and i own a similar one and i was just curious if you get a lot of spam comments? If so how do you stop it, any plugin or anything you can recommend? I get so much lately it’s driving me insane so any help is very much appreciated.

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

  44. Доброго времени суток оплатил заказ данные для оплаты дали как всегда оперативно жду клад кокаин купить онлайн Отличный товар и цены. Зря так…

  45. пробы есть? кокаин купить онлайн у нас нет давно курьерских доставок.

  46. Looking for btc to usd conversion? Visit btc-converter.com to use the BTC conversion tool and find out the current value of Bitcoin in US dollars. Type in any Bitcoin quantity and instantly receive its dollar equivalent based on the current BTC/USD rate. This tool is ideal for fast lookups before selling or trading crypto, checking wallet balances, or reviewing payment amounts in cryptocurrency. It can display 1 BTC in dollars, smaller coin amounts, larger balances, and general dollar-based comparisons.

  47. Российские родители всё чаще выбирают проверенные площадки с широким ассортиментом — и «Резиденция детства» давно стала надёжным выбором для тысяч семей. Ищете развивающие товары для детей? На childresidence.ru собраны игрушки, детская одежда, мебель и электроника от ведущих брендов с доставкой по всей стране. Покупки здесь безопасны: удобная оплата, поддержка клиентов и бонусная программа от 3% делают каждый заказ выгодным и приятным.

  48. Looking for buy btc? How to buy Bitcoin online? Check out howtobuybitcoin.online and see for yourself that acquiring BTC online is more straightforward when you grasp the buying flow prior to sending any money. In this article, first-time users will learn how to pick Bitcoin and carry out a more protected online buy. Try the Bitcoin calculator below to see how much BTC you may get, review your order information, and explore the buying steps before finalizing your purchase.

  49. Отвечают оперативно оформлено красиво… кокаин купить онлайн Так что тут 50:50 если тебя примут. Все зависит от конкретного города и гнк в нем.

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

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>