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

  3. Дубай предлагает широкий выбор алкоголя, однако найти надёжного поставщика с честными ценами — задача не из простых. Ищете купить алкоголь в дубае c доставкой? Сервис winedrop-dubai.com решает этот вопрос: бесплатная доставка по городу, богатый ассортимент — виски, коньяк, вино, шампанское, текила, ром, джин и пиво от проверенных мировых брендов. Каталог регулярно пополняется актуальными новинками, а заказ оформляется онлайн без лишних сложностей. Идеальное решение для туристов и постоянных жителей, для которых важны качество сервиса и комфорт заказа.

  4. Сервис лучший и стабильный. https://zarnian.ru заказал 5-IAI прислали Methoxetamine разность дозировок сами знаете в итоге еле откачали….а с чего ты взял что чемик ноаый селлер?

  6. Проект Я – МОДЕЛЬ создан специально для поиска моделей на процедуры в области эстетической медицины направленные на внешнее и внутреннее преображение. Узнать подробнее о целях проекта можно на https://beautymodel.club/.

  12. Магазин кидает. Буду писать пока не дадут адрес в ПМ. Прошу там же помочь админов. https://zarnian.ru списались с продавцомпообщалисьдоговорились.я оплатил заказ и начались долгие ожидания моей заветной посылки.я звонил седня.сказали либо номер не правлеьный..либо не отправили еще

  15. Выпускной — один из тех редких дней, которые хочется сохранить в каждой детали: взгляды, смех, слёзы радости и первые шаги во взрослую жизнь. Именно поэтому так важно доверить съёмку профессионалам, которые умеют не просто фотографировать, а рассказывать истории. Студия https://profvideo.ru/vypusknoj/ предлагает комплексную фото и видеосъёмку выпускного в Москве и области под ключ: последний звонок, торжественная часть, банкет, монтаж клипа и фильма о классе. Команда берёт на себя всё — от тайминга до сдачи готового материала в строго оговорённые сроки по договору. Никаких сюрпризов, только результат.

  17. pre launch condo singapore 4 Bedroom Condo for Sale Singapore resale freehold condo singapore

  18. Анонимное лечение на дому ценно ещё и тем что снижает внутреннее сопротивление самого пациента. Для многих людей первый контакт с врачом происходит именно дома без дороги без ожидания без страха чужих взглядов. Такой формат помогает начать разговор не только о снятии острых симптомов но и о более широких вопросах: что делать после выхода из запоя когда требуется кодирование в каких случаях нужна реабилитация а когда первичная наркологическая помощь уже должна переходить в полноценный лечебный маршрут. Врач может помочь и в ситуациях связанных не только с алкоголем но и с наркомании если семье нужно понять что происходит с зависимым человеком и какой следующий шаг будет для него безопасным. Исследовать вопрос подробнее – вызов нарколога на дом

  19. Эти методы применяются комплексно что повышает их эффективность и помогает пациентам быстрее возвращаться к полноценной жизни. Исследовать вопрос подробнее – https://lechenie-alkogolizma-doneczk0.ru

  20. Обучение нитевому лифтингу открывает новые возможности для моделирования контуров лица без хирургического вмешательства. Ознакомьтесь с курсами на https://academy.drstar.pro/.

  22. cahuilla casino anza ca, new zealandn roulette table and
    no deposit bonus codes casino canada, or new zealandn online poker alliance

    my homepage operation blackjack 2022 (Sheryl)

  24. Drinks Dubai Delivery — специализированная служба доставки алкоголя по Дубаю для туристов и постоянных жителей, которым важна оперативность и надёжность. Широкий ассортимент включает виски, водку, шампанское, вино, джин, ром, текилу, коньяк, пиво и не только — среди брендов Absolut, Bacardi, Glenfiddich и Aperol. Ищете drinks delivery dubai? Оформить заказ можно на delivery-dubai-now.com через Telegram или WhatsApp — просто и удобно. Доставка выполняется конфиденциально и оперативно прямо к вашей двери.

  26. орудует фейк причем организованно бандейкой действительно джаббик зеркальный добавил оригинальный сам отличий нету епучая уязвимость детектед будьте внимательны. https://bio-tune.ru Хороший магаз. качество радует спасибо всей команде Chemical-mix.comСпасибо за работу Калужского магазина есть бонусы всё чётко и организованно Проверенно на себе… аська chemical mix

  29. «Фарго» — культовый американский сериал, где заснеженная глубинка Миннесоты становится ареной кровавых и абсурдных событий. Случайный визит странного незнакомца ломает привычный уклад жизни и втягивает простых горожан в череду опасных событий. Забитый страховщик, бесстрашный манипулятор и зоркая женщина-следователь — три силы, сталкивающиеся в этой безупречно выстроенной криминальной истории. Ищете фарго все серии? На fargo-smotret.net доступны все 51 серия пяти сезонов в высоком качестве с профессиональными озвучками. Мрачный юмор, напряжённая криминальная интрига и абсурд обыденной жизни ставят «Фарго» в ряд лучших сериалов последних лет.

  31. Hello its nice article concerning media print we all be familiar with media is a fantastic source of data. Buy viagra here buy cialis on this site

  32. Remarkable Its genuinely awesome article I have got much clear idea concerning from this post. buy cannabis online for xxx adult porn video

  33. Hi of course this paragraph is in fact nice and I have learned lot of things from it on the topic of blogging. thanks. new online casinos

  34. Инъекции ботокса и диспорта в исполнении опытных врачей позволяют деликатно устранить мимические морщины сохраняя естественную мимику. Записаться к специалисту можно через сайт https://www.virsavia.ru/.

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

  38. Академия инъекционных методик привлекает моделей на курсы по работе с препаратами Pluryal Premium и другими передовыми техниками. Станьте частью профессионального обучения через https://beautymodel.club/.

  39. Применение филлеров и биоревитализантов в интимной пластике позволяет корректировать анатомические особенности и возрастные изменения деликатных зон. Все об инъекционных техниках в гинекологии ищите на https://tochka-g.pro/.

  43. А JWH-018 Имеется в наличии? купить кокаин мефедрон бошки марихуану по предержи свои слова некого еще не обманул за 2 года кого я кинул напиши сюда пример?в 12 году брали реагент здесь по курьерке ровно все было сейчас оптом берем но жаль продавец не работает без гаранта это в наше время спасает от кидков или различных форс мажоров.

  44. Фотоомоложение на многофункциональной платформе M22 эффективно борется с сосудами пигментом и первыми признаками старения. Подробные протоколы лечения описаны на https://www.virsavia.ru/.

  45. Оборудование для реанимации и интенсивной терапии должно быть предельно надежным и интуитивно понятным в управлении. Мониторы пациента и современные наркозные аппараты заказывайте на https://invasive.ru/.

  48. Мебельная фабрика «Подольск» специализируется на изготовлении кухонь и шкафов-купе по индивидуальным размерам для жителей Москвы и Московской области. Производство использует качественные материалы и современную фурнитуру что обеспечивает долговечность каждого изделия. Компания берёт на себя все этапы работы: замер помещения, разработку проекта, производство и монтаж готовой мебели. Партнёром фабрики по поставке оборудования выступает https://mf-podolsk.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>