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.

2,842 thoughts on “JavaScript Image Optimiser (JSIO)”

  1. «Парацельс» — частная многопрофильная клиника Екатеринбурга с двумя удобно расположенными в городе филиалами. Клиника предлагает консультации ведущих специалистов, комплексные программы обследования Чек-Ап со скидкой до 15%, МРТ всего организма, диагностику сердца и щитовидной железы. Ищете андролог прием екатеринбург? На mc-paracels.ru доступны онлайн-запись к врачу и оплата услуг. Каждая программа рассчитана на конкретную задачу — от контроля холестерина до полного обследования организма.

  4. Такие состояния требуют профессионального вмешательства так как без лечения могут усиливаться и приводить к ухудшению самочувствия. При этом помощь может предоставляться анонимно в соответствии с политикой конфиденциальности данных пациента. Изучить вопрос глубже – https://vyvod-iz-zapoya-na-domu-sankt-peterburg-12.ru/

  5. how much top online pokies and casinos australian games, play free australian poker machines and
    best real money pokies australia with neosurf, or united
    statesn poker tour

    Also visit my site: goplayslots.net

  8. В Санкт-Петербурге услуга срочного вывода из запоя на дому востребована в ситуациях когда состояние пациента ухудшается и требуется немедленная помощь. Врач проводит консультацию оценивает общее состояние длительность запоя и выраженность симптомов после чего определяет тактику лечения при алкоголизме. При необходимости помощь оказывается в кратчайшие сроки без ожидания госпитализации в стационаре. Услугу можно заказать заранее или срочно через сайт клиники. Изучить вопрос глубже – вывод из запоя на дому в санкт-петербурге

  9. Ну так ведь и не делаем не чотка . всё сразу . https://alekseysolopov.ru Ещё в 11-м году брал здесь чудесную фофу и другие ништяки.Тогда это был крутейший магаз.И вот после долгого перерыва они снова идут в гору.Заказ оперативность 5 упаковка 5 качество 5 цена лучше всех.оптимал дозировка на 2дпмп при вв от данного магазина какая?

  10. condominium for rent in singapore 2 Bedroom Condo for Sale Singapore archdiocesan land and properties singapore

  12. Добро пожаловать в blacksprut Marketplace Крупнейшее в России сообщество любителей марихуаны и грибов приветствует новых друзей ? Сотни магазинов с оптовыми и розничными предложениями рады показать вам новый уровень отношения к каннабису и грибам. bs2best at blsp at blsp at

  16. брал в данном магазине все супер. купить кокаин мефедрон бошки марихуану Понимающий меня поймёт.продавец шикарный – всё объяснил рассказал.

  19. holiday bungalow singapore Buy Property in Singapore for Foreigners condominium for rent in singapore

  20. Наркологический стационар в Санкт-Петербурге: круглосуточное лечение, детоксикация и наблюдение специалистов в комфортных условиях в наркологической клинике «Похмельная служба»
    Исследовать вопрос подробнее – лечение в наркологическом стационаре в санкт-петербурге

  21. После алкоголя в организме накапливаются токсичные продукты распада, нарушается водно-солевой баланс и страдает нервная система, что особенно выражено после запоя или при алкоголизме. Это проявляется головной болью, слабостью, тошнотой и нарушением сна. Капельница помогает ускорить процессы очищения и восстановить внутренние системы, обеспечивая более быстрое облегчение состояния и помогая человеку выйти из состояния запоев.
    Подробнее тут – капельница от похмелья вызов на дом

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

  25. Запой — это состояние, которое развивается на фоне длительного употребления алкоголя, сопровождающееся острыми симптомами интоксикации. Капельница от запоя может быть необходима, когда состояние пациента требует немедленного вмешательства. Важно своевременно заметить признаки, указывающие на необходимость медицинской помощи, таких как признаки алкоголизма, и в случае необходимости — кодирование или вывод из запоя для более комплексного лечения.
    Подробнее тут – поставить капельницу от запоя

  27. Аккуратнее с магазином недовес у них неплохой… https://3080808.ru Покуреха порошки безвкусные на язык остальные горькие. Так проще всего определить.но за долгое сотрудничество с этим

  28. Когда речь заходит о надёжных конструкционных материалах, алюминий и нержавеющая сталь остаются бесспорными лидерами в строительстве, дизайне и промышленности. Компания ПрофМеталМаркет предлагает широкий ассортимент профессионального металлопроката: на сайте https://profmetal-market.ru/ представлены алюминиевые профили, трубы, листы, тавры, швеллеры и анодированный алюминий, а также изделия из нержавеющей стали — от зеркальных труб до перил и крепежа системы JOKER. Компания работает в Москве, осуществляет самовывоз и оперативную доставку по всей России.

  29. В Воронеже круглосуточная помощь при похмелье востребована в ситуациях когда симптомы появляются внезапно или усиливаются в ночное время особенно в запое или после запоя. Врач проводит консультацию оценивает состояние пациента и принимает решение о проведении инфузионной терапии. Такой подход позволяет своевременно устранить симптомы и предотвратить их дальнейшее развитие. При необходимости можно оставить заявку уточнить цены или получить помощь бесплатно на первичном этапе. Подробнее тут – http://www.domen.ru

  30. Нарколог на дом — это срочная врачебная помощь которая нужна в тот момент когда больного уже сложно везти в клинику а ждать улучшения без осмотра опасно. Домашний формат особенно актуален при запое выраженной интоксикации повторной рвоте скачках давления сильном треморе бессоннице и тревоге. В такой ситуации важно не просто заказать выезд и получить капельницу а сразу запустить понятный медицинский маршрут: осмотр консультация оценка рисков подбор терапии и решение можно ли безопасно оставаться дома. Именно поэтому услуга «нарколог на дом» воспринимается не как разовая процедура а как полноценная наркологическая помощь где каждое действие связано с текущим состоянием пациента и его безопасностью. Ознакомиться с деталями – вызов нарколога на дом

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

  32. singapore pr can buy malaysia property Studio Apartment Singapore for Sale 1 room studio apartment singapore

  33. “Капельница — это быстрый и эффективный способ восстановить организм после похмелья. Она особенно полезна при выраженных симптомах, таких как сильная головная боль или рвота. Важно, чтобы процедура проводилась квалифицированным медицинским персоналом, чтобы избежать осложнений. Также, в случае хронической зависимости, может потребоваться кодирование или терапия для долгосрочного восстановления, а также вызов врача для дальнейшего наблюдения,”
    Получить больше информации – капельница от похмелья анонимно в самаре

  34. Московская типография «Повсюду» выполняет полный спектр полиграфических услуг: от визиток, буклетов и листовок до брошюр, каталогов, блокнотов, календарей, табличек, дорхенгеров и сувенирной продукции. Собственная производственная база обеспечивает полный контроль качества и чёткое соблюдение сроков при заказах любого объёма. Ищете купить подарочные наборы москва? На povsyoudo.ru принимают заказы любой сложности с расчётом стоимости и сроков сразу после оформления заявки. Компания также предлагает профессиональные услуги дизайнера и организует доставку по Москве и Московской области.

  38. Капельница от похмелья в Нижнем Новгороде: быстрое восстановление, снятие интоксикации и улучшение состояния под контролем специалистов в наркологической клинике «Похмельная служба»
    Получить больше информации – капельница от похмелья на дому

  39. Решение о госпитализации в наркологический стационар часто становится необходимым в случаях, когда пациент не может справиться с зависимостью самостоятельно, а также когда домашние условия лечения оказываются недостаточными. Стационарное лечение дает пациенту возможность находиться под круглосуточным наблюдением специалистов, что особенно важно при острых состояниях и абстинентных синдромах. В случае запоя может быть предложена помощь нарколога, а также выезд на дом для неотложного вмешательства и стабилизации состояния пациента.
    Подробнее можно узнать тут – narkologicheskij-staczionar-sankt-peterburg-2.ru/

  40. О качестве товара отпишу в трипрепортах .Мир и процветания этому магазину https://mindpartners.ru 3Бабки там всякиеХотя я им давно говорил что надо ещё одного человека на работу с клиентами…

  41. Ресторан китайской кухни «Пекинская Утка» в Иркутске — это место, где аутентичные рецепты Поднебесной встречают высокий уровень сервиса. Кухня охватывает весь спектр китайской гастрономии: морепродукты, утиное филе, говядина с древесными грибами, свинина и овощные блюда с фирменными соусами. https://pekin-utka.ru/ предлагает онлайн-бронирование столика и удобную доставку. Меню сочетает классику и авторские позиции, а ценовой диапазон остаётся доступным для большинства гостей.

  44. shophouse room for rent singapore Buying Private Property in Singapore apartments for rent singapore

  45. Капельница от похмелья в Воронеже с устранением слабости, тошноты и головной боли в наркологической клинике «Похмельная служба»
    Получить дополнительную информацию – капельница от похмелья на дому

  46. Капельница от похмелья в Воронеже с выездом на дом, подбором препаратов и контролем состояния в наркологической клинике «Похмельная служба»
    Получить дополнительную информацию – https://kapelnicza-ot-pokhmelya-voronezh-5.ru

  48. Капельница от похмелья в Самаре: быстрое снятие интоксикации, восстановление после алкоголя и улучшение самочувствия под контролем специалистов в наркологической клинике «Похмельная служба»
    Узнать больше – капельница от похмелья вызов на дом в самаре

  49. Как отмечает врач-нарколог Сергей Иванов: “Самое главное преимущество капельницы с медицинским контролем — это точная диагностика состояния пациента перед началом процедуры и возможность корректировать лечение в процессе, что делает её гораздо более безопасной и эффективной по сравнению с самостоятельными методами.”
    Углубиться в тему – https://kapelnicza-ot-pokhmelya-nizhnij-novgorod-1.ru/

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>