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

  2. Разве имеет принципиальное значение сколько моему аккаунту времени? Я тут не зависаю а пишу по сути. Мутность заключается в том что оператор в аське на вопросы по уточнению адреса сначала молчал почти 3 часа потом вообще оффнулся. купить кокаин мефедрон бошки марихуану Крутой магазНу и да ладно не отровлюсь думаю

  3. Наркологическая помощь в Воронеже: эффективное лечение запоя, детокс и поддержка специалистов в наркологической клинике «Клиника Плюс».
    Получить дополнительную информацию – http://narkologicheskaya-pomoshh-voronezh-3.ru/

  4. escorts in syracuse Elite escort services Dubai escorts topeka ks

  6. Looking for a transfer from Halkidiki Airport? Visit https://halkidiki-transfer.gr/ and you’ll find private transfers at competitive prices. We provide maximum comfort and reliability with fixed prices and professional drivers. Our modern fleet includes Mercedes E-Class sedans, V-Class minivans, and Sprinter minibuses. All vehicles are meticulously maintained, air-conditioned, and non-smoking.

  7. Store Dubai Drinks — специализированная служба доставки алкоголя в Дубае для туристов и резидентов которым нужны скорость и гарантированный результат. Каталог охватывает виски водку коньяк джин текилу ром шампанское вино и пиво — с такими брендами как Hennessy Macallan Chivas Patron Bacardi и Jameson. Ищете доставка алкоголя в дубае? Заказать можно на store-dubai-drinks.com через Telegram или WhatsApp — быстро и конфиденциально прямо к вашей двери.

  9. Медиапортал «Інквізиція» работает под девизом Deus vult — публикует расследования, криминальные репортажи и острую аналитику без оглядки на неудобных фигурантов. Редакция последовательно разбирает коррупционные схемы, судебные затяжки и социальные проблемы — с фактами и документами на руках. Изучайте независимые расследования на https://inquisition.info/ — украинский портал для тех кто требует от журналистики реальных результатов. Разделы политики, экономики, бизнеса и здоровья представлены без купюр — редакция говорит прямо и без обиняков что принципиально выделяет портал на фоне обычных новостных площадок.

  10. I finally found a place to explore each custom and modified BMW E30 build – from engine swapped builds to stance, track, and drift builds. Every build comes with a curated gallery, tech specs, and modification details. Honestly it’s addictive to scroll. Go check it out: https://isleofcars.com/bmw/e30

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

  12. MoscowWaterWays — сервис речных прогулок по Москве от всех ключевых причалов столицы. Сервис предлагает маршруты с отправлением от Китай-города, Парка Горького, Воробьёвых гор, Москвы-Сити и множества других знаковых мест. Ищете поездка по воде от причала третьяковский? На платформе moscowwaterways.ru можно выбрать маршрут и оплатить билеты онлайн — они придут на электронную почту. Среди доступных рейсов — праздничные маршруты на 9 Мая, День города, выпускной сезон и встречу Нового года. Все причалы находятся в шаговой доступности от станций метро и МЦК, что делает посадку быстрой и комфортной.

  13. «Спільно» — портал громадянського суспільства — публикует материалы о политике, криминале, коррупции, культуре и обществе без редакционных компромиссов и информационного шума. Журналисты и авторы портала проводят детальные расследования коррупционных цепочек и теневых финансовых схем основываясь на первичных документах и проверенных данных. Следите за независимой гражданской журналистикой на https://spilno.net/ — украинский портал для читателей требующих честного анализа и прямой гражданской позиции. Авторские блоги и колонки органично дополняют новостной контент и делают портал полноценной площадкой для открытого гражданского диалога.

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

  16. Рынок шеринговой экономики в России превысил 1 трлн рублей и продолжает расти. Тулбокс закрепился в этом сегменте с форматом проката инструмента через постаматы — без персонала, без залога и лишних формальностей. Клиент берёт дрель или пылесос через приложение в боксе у «Пятёрочки» или ПВЗ рядом с домом. Подробности партнёрства — на https://biz.tlbx.ru/ — инвестиции от 3 млн рублей с окупаемостью 18–24 месяца. Тулбокс присутствует в Челябинске, Уфе и Екатеринбурге и активно ищет партнёров для выхода в новые регионы.

  17. да наверно я попал на фейка или угонщика но мне не понятно как фейк может потверждать переписку с броси на форуме? купить кокаин мефедрон бошки марихуану Вообщем не знаю кто подьебал Минер или Поставщик но товар ЧИСТЫЕ ТАБЛЕТКИ Магазин ровный Я заказал 1000ф оплатил ЯД оператора попросил отправить посыль на следующий день без задержки т.к. сроки получения очень поджимают. На что оператор адекватно ответил что все сделают.На следующий вечер получил трек посылочка собранна и вот вот выезжает если уже не выехала Магазину как и его администрации – от души за оперативность и отношение к клиенту.

  18. ts escorts in ri Elite escort services Capri ts escorts puerto rico

  19. Visit https://yogaonlineapp.com/ and learn more about our mobile app for online and at-home yoga. Yoga Way is a modern yoga app designed for people who want to practice yoga anytime, anywhere. Explore dozens of practices and programs with expert video guidance!

  21. Для жителей Воронежа выезд нарколога на дом — это быстрый и удобный способ получить экстренную помощь. Когда человек переживает запой, а его физическое и эмоциональное состояние быстро ухудшается, наркологическая помощь на дому становится оптимальным решением. Врач приезжает и немедленно оценивает состояние пациента: проверяет его пульс, давление, частоту дыхания, уровень сознания и другие важные показатели. Это помогает составить точный план лечения, который будет направлен на восстановление организма, снятие токсинов и стабилизацию состояния пациента.
    Подробнее – http://narkolog-na-dom-voronezh-4.ru/

  24. Моя первая покупка на динамите и внезапно для самой себя наход. Сняла как говорится в касание. С вашим охуенным мефчиком сорвала себе почти год ЗОЖа и ни чуть не жалею. https://qrstudio.ru тут мы СПСР чет лажает медленно заказы регистрирует в базуМожет обсудим как избежать напастья копоф при получении посылки от курьера???

  25. ts sirena escort Escort In Mykonos port st lucie escorts

  27. Многих останавливает страх огласки и лишних последствий. В небольшом городе или в плотном окружении человеку важно сохранить личные границы: не «светиться» не объясняться на работе не становиться объектом разговоров. Из-за этого помощь часто откладывают а вместо неё выбирают рискованные компромиссы: «выйду сам» «попью понемногу» «усну на таблетках» «перетерплю ночь». На практике такие попытки часто усиливают проблему: запой затягивается отмена переносится тяжелее тревога растёт сон разрушается давление и пульс становятся нестабильными. Поэтому в наркологии важна возможность быстро начать лечение безопасно и без лишнего стресса — с понятными правилами спокойной коммуникацией и медицинским контролем. Подробнее – номер наркологической клиники

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

  29. Клиника «Био-лазер» — это пластическая хирургия в Москве с более чем 25-летним опытом практикующего хирурга Владимира Высоцкого. Специализация охватывает маммопластику, блефаропластику, абдоминопластику, лифтинг лица и шеи, отопластику и мастопексию. На сайте https://doctor99.ru/ представлена галерея работ с результатами до и после операций. Постоянное участие в стажировках, конференциях и анатомических курсах обеспечивает применение современных хирургических методик. Онлайн-запись на консультацию доступна на сайте клиники.

  32. Магазин работает отличноникаких косяков и запоров пока что не было https://klyuet.ru Удачи и развития в дальнейшемУважаемые наши клиенты приносим свои извинения за задержку с отправкой.

  33. golden diamond escort Escort In Mykonos gina rollins escort

  40. Одобавив снова в контакты по джаберу на сайте получил не авторизованный Обратите внимание жабу сменили. купить кокаин мефедрон бошки марихуану нет так то обещал в среду или в четверг.какое най вв ?? совсем рехнулись чтоли ? Я не знаю за качество их 2-дпмп но если он не бодяженный и качественный то 5мг интрозально хватит чтоб тебя колбасило 2-3 суток Никто по ходу у чемикала его ещё не пробовал – отзывов нету…

  41. athens ga escorts Escort agency in Porto Cervo ts perla escort

  42. Компания CryoOne выпускает отечественные азотные криокапсулы для предприятий в области красоты, спорта и реабилитации. Оборудование окупается за 6 месяцев, не требует медицинской лицензии и генерирует стабильный поток клиентов за счёт WOW-эффекта процедуры. На https://cryoone.ru/ представлены четыре комплектации — Standard, Business, Pro и Comfort — с гарантией 24 месяца и бесплатными доставкой, монтажом и обучением. Сосуд Дьюара входит в базовую комплектацию, а покупатель получает гарантию минимальной цены среди конкурентов.

  45. Мне пока ещё не пришло но ты уже напугал….:orientation: кто знает где весы купить можно чтоб граммы вешать купить кокаин мефедрон бошки марихуану Магазин работает четко уже несколько лет:только одно расстроило когда хотел сделать очередной заказ мне сказали что не отправляют больше в те края:dontknown:с чем это связано мне так и не сказалихотелось бы узнатьЭффект чувствуется почти сразу эйфория и стим в голове

  48. shreveport female escorts Elite escort services Nice Cannes trans escort kansas city

  49. Авторская психиатрическая клиника доктора наук Виталия Минутко https://minutkoclinic.com/ основана в 2003 году. Работаем со всеми психическими расстройствами, включая детскую психиатрию: депрессия, ОКР, анорексия, шизофрения, зависимости, анорексия, аутизм, расстройства личности.

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>