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

  1. Открываю коробок Пусто под спички шорк вот и пакетик на глаз 03 https://haval-autolight.ru 15 янв. в 6:00 Статус вашего заказа #100был изменен наОтправлен Заказ помещен в статус Отправленнакладная №15 3800-магазин хорошийдаже если высылат брак было 1 раз возврат делают сполна

  2. Живой уголок предлагает редкую возможность приобрести экзотического примата — настоящего живого компаньона с высоким интеллектом и яркой индивидуальностью. Ищете, где купить обезьяну живую? На zhivoiugolok.ru/product-category/obezyany представлены карликовая игрунка, саймири, тамарины, лемур катта, галаго, магот и другие виды — каждый со своим характером. Животные здоровы, привыканием к человеку занимаются специалисты. Эти приматы чутко реагируют на голос и интонацию владельца, глубоко привязываются к нему и остаются верными питомцами на многие годы.

  5. Because the admin of this web page is working no doubt very quickly it will be renowned due to its feature contents. cialis pills sexual xxx porn pills

  9. че как дела?как настрой? купить закладку мефедрон кокаин скорость Ну я совершенно не понимаюкак можно держать сайт в таком несоответсвии с реальностью?Пароль от админки забыличтоли?Сколько клиентов забилопытаясь пробиться через мылокоторое до сих пор указано?Ппц полный.а заряд сколько происходил?

  11. youre truly a good webmaster. The site loading velocity is incredible. It seems that you are doing any distinctive trick. Moreover The contents are masterwork. you have performed a magnificent task on this topic adult xxx video porn site xxx sex video

  15. ПрофМеталМаркет специализируется на поставках алюминиевых систем и нержавеющей стали для строительства, отделки и промышленного производства. В ассортименте компании — исчерпывающий сортамент: уголки, трубы, швеллеры, двутавры, полосы, листы, пороги и потолочные профили. Ищете купить лист нержавейка в москве? На profmetal-market.ru представлен весь каталог с актуальными ценами и возможностью заказа онлайн. Анодированный алюминий, зеркальная нержавейка, крепёж JOKER и хромированная фурнитура постоянно есть на складе. Самовывоз из Москвы и доставка по всей России делают компанию удобным партнёром для профессионалов и частных покупателей.

  18. «Рассказ служанки» — один из самых мощных антиутопических сериалов современности, основанный на культовом романе Маргарет Этвуд. События происходят в жестоком тоталитарном режиме, отнявшем у женщин права, имена и свободу, а служанок превратившем в живые инкубаторы для правящей верхушки. Ищете рассказ служанки все серии? На rasskaz-sluzhanki-smotret.net доступны все 66 серий шести сезонов с профессиональными озвучками. Сериал завоевал множество наград и прочно вошёл в число лучших драм десятилетия — напряжённый до предела, бескомпромиссный и обязательный к просмотру.

  19. Печи завода ПроМеталл из чугуна — оптимальное решение для тех, кто делает ставку на надёжность и длительный срок службы. Серия «Атмосфера» представлена моделями для парных от 14 до 26 м? в двух вариантах исполнения: сетка и камень. Ищете чугунные печи для дома? Заказать печь с доставкой и профессиональной установкой можно на prometall.shop — официальном представительстве завода в Москве с полным комплексом услуг. Модельный ряд доступен от 76 900 рублей и каждое изделие подобрано с учётом размера парной и предпочтений по оформлению.

  21. I was able to find good info from your blog posts. 在线购买大麻用于XXX成人色情视频

  23. с радостью сообщаю что посыль пришла в мой солнечный городи я рад…не только потому что она дошла а тому что всю длинную дорогу 10днейсо мной оставался на связи магазинработает без всяких проволочекбез гемора свойственного многим магазинамвсё дошло конспирация на наивысшем уровне как и сам магазинребята удачных вам продаж и многолетнего существования https://devjatova.ru Заказ Оплачен Жду посылку Как все прийдет сразу отпишу фототак всё неоднознанопока на сколько я заметил о приёмах всяких кричат люди у кого порой даже 50 постов нетудак стоит ли таким верить…Но когда брал у данного продавца последний раз на моей посылке был повреждён штрих кодя человек параноидальный подумал мало ли чё там проверили и стало жутковато.А брал то ещё туси а под ней сами понимаите….сразу меня окружили и т.д. и т.п. ХD с тех пор незаказывал тут.Зато качество было хорошееособенно соединение 2п жёсткое

  25. I was able to find good info from your blog articles. code bonus casino sans depot

  29. Somebody necessarily assist to make significantly articles
    I might state. That is the very first time I frequented your website page and so far?
    I amazed with the research you made to make this actual publish
    incredible. Fantastic job!

    My website quoten rechner wetten (Delilah)

  30. hong kong luxury property index Buying property in Hong Kong down payment apartment for sale in kowloon hong kong

  31. Магазин надежный репутацию оправдал сделал заказ 24 февраля а 26 груз был уже на руках. Если и бывают задержки скорее всего это курьерские фирмы косячат. Сервис тоже на высоте люди адекватные не смотря даже на выше написанные отзывы не разу не усомнился что деньги улетят на ветер https://gdee.ru я в шоке. до последнего думали кидалово. а нет подняли в касание. стафф пушка. кладмену респектВердикт:

  32. VIDEO-CAMER — интернет-магазин, предлагающий один из наиболее полных каталогов оборудования для безопасности и видеонаблюдения. В ассортименте — IP-камеры, уличные и беспроводные видеокамеры, профессиональные видеорегистраторы, видеодомофоны, тепловизоры, металлоискатели, приборы ночного видения и GPS-трекеры. Ищете видеокамеры беспроводные? На video-camer.ru собраны сотни позиций от проверенных производителей с гарантией и доставкой по России. Магазин охватывает как домашние решения — видеоняни, радионяни, умные камеры — так и профессиональное оборудование для охраны объектов, защиты информации и поисковой техники.

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

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

  36. Just desire to say your article is as astonishing. The clearness for your post is simply excellent and that i can suppose you are a professional on this subject. Well together with your permission allow me to seize your RSS feed to keep updated with coming near near post. Thank you a million and please continue the enjoyable work. casino avec bonus sans depot

  37. Ищете изготовление экслибриса в Москве? Посетите сайт https://xn--90anbff6adf4h.xn--p1ai/ где вам предложат гарантию качества и доставку. У нас существенная библиотека образцов изображений, разработка индивидуального макета, качественные деревянные оснастки, подарочная упаковка. Подробнее на сайте.

  38. ПрофМеталМаркет — поставщик алюминия и нержавеющей стали в Москве для строительной, отделочной и производственной сферы. Покупателям доступен полный перечень позиций: уголки, трубы, швеллеры, двутавры, полосы, листы, пороги и профили для потолочных систем. Ищете лист алюминиевый гладкий купить? На profmetal-market.ru представлен весь каталог с актуальными ценами и возможностью заказа онлайн. В наличии анодированный алюминий, зеркальная нержавейка, системы JOKER и полный ассортимент хромированного крепежа. Самовывоз с московского склада и доставка во все регионы страны делают ПрофМеталМаркет практичным выбором для профессиональных и частных заказчиков.

  42. Срочный выезд нарколога на дом позволяет сразу оценить состояние пациента снять симптомы абстиненции и начать детоксикацию организма. Капельницы от запоя и интоксикации составляются индивидуально с учётом новейших медицинских протоколов 2026 года: они включают нейропротекторы гепатопротекторы и витаминно-минеральные комплексы последнего поколения. Это не просто очищение крови — это восстановление работы мозга печени сердечно-сосудистой системы и психики. Подробнее можно узнать тут – наркологическая помощь

  43. Затяжной запой перестает быть бытовой проблемой в тот момент когда организм теряет способность самостоятельно восстанавливаться после интоксикации. Накопление ацетальдегида нарушение водно-электролитного баланса истощение запасов витаминов и перегрузка сердечно-сосудистой системы создают состояние при котором домашние методы перестают быть безопасными. Срочно стабилизировать самочувствие и быстро купировать абстинентный синдром позволяет только контролируемая медицинская среда. Вывод из запоя в стационаре в Нижнем Новгороде становится клинически обоснованным решением когда требуется не просто снятие симптомов а комплексная детоксикация под круглосуточным наблюдением врачей. Наркологическая клиника «Стармед» организует процесс лечения в соответствии с актуальными стандартами доказательной медицины обеспечивая безопасность пациента прозрачность процедур и плавный переход к противорецидивной терапии. Мы понимаем что решение о госпитализации часто принимается в состоянии стресса поэтому наша работа начинается с четкой диагностики честного объяснения плана лечения и соблюдения строгих протоколов конфиденциальности. Опытные специалисты клиники помогут вызвать доверие к процессу восстановления уже на этапе первого контакта. Получить больше информации – http://www.domen.ru

  46. А я так понимаю что у данного магазина просто не мало оптовых покупателей и им уделяется больше внимания. купить закладку мефедрон кокаин скорость Врубим поскорей музончик:Крутой качественный товар Все своевременно

  50. Малому бизнесу сложно пробиться в интернете без системного подхода: разовые посты и хаотичная реклама редко дают результат. Агентство «Креатифф» работает иначе — здесь выстраивают полноценную контент-систему, а не обещают мгновенный рост. На сайте https://promospb.net/ можно изучить весь спектр услуг: SEO-продвижение, ведение VK и Telegram, таргетированная реклама во ВКонтакте и контекстная реклама в Яндекс Директ. С 2008 года команда работает в digital, фокусируясь только на тех направлениях, за которые не стыдно отвечать. Узкая специализация и регулярность — вот что отличает агентство от конкурентов.

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>