JavaScript Image Optimiser (JSIO)

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.

6,635 thoughts on “JavaScript Image Optimiser (JSIO)

  1. Glassway — специализированный поставщик, выстроивший прямые партнёрства с ведущими заводами отделочной отрасли. Компания предлагает полный спектр решений: подвесные потолки, алюминиевые перегородки и двери, смарт-стекло, зенитные фонари, ограждения и витрины. Ищете подвесной потолок? На glassway.group представлен обширный каталог с актуальными ценами — прямые поставки с заводов обеспечивают конкурентную стоимость на весь ассортимент. Специалисты компании берутся за задачи любого уровня — от типовой отделки до уникальных архитектурных концепций.

  2. всяко подобные магазины нужно стороной обходить.. Купить Бошки Кокаин Гашиш МДМА Мефедрон САБЖ САМ ПО СЕБЕ НЕ ПРЁТ МУТИТЬ НА НЁМ МИКСЫ СМЫСЛА НЕТ ЭТО АНТИДЕПРЕССАНТ Делать надо 1к10 можно и послабже например 1к13 но не более а то 30 минут эт мало хотя смотря для кого

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

  4. Почему ушли из РБ? Купить Бошки Кокаин Гашиш МДМА Мефедрон По АМ могу сказатьчто концентрировать выше 1 к 15 не вижу смысла.Оно не торкает дальше своего известного пределапосле 1 к 15 дальше пойдёт уже переводняк.Тут как с процами-дороже 200 баксов покупать-перевод баблаприроста производительности не заметишь почти.пацаны магаз ровный пишу это уже не раз всегда списываюсь с менеджером все делает ровно и качество и оперативность всегда заказываю и буду заказывать тут т.к. не париться за качество продукта как в других магазах

  5. I enjoy how this post encourages discussion in a calm and positive way while keeping the ideas simple to understand. центр Вирсавия

  6. В этой статье мы обсудим процесс восстановления после зависимостей, акцентируя внимание на различных методах и подходах к реабилитации. Читатели узнают, как создать план выздоровления и использовать полезные ресурсы для достижения устойчивых изменений.
    Жми сюда — получишь ответ – детокс24

  7. Зайдите на https://dom-kamnya.ru/iskusstvennyj-kamen/stoleshnitsy/ — здесь представлен широкий выбор столешниц от производителя в Москве с гарантией высокого качества. Просмотрите ассортимент, закажите бесплатный выезд замерщика онлайн, а гарантия на искусственный камень составляет 10 лет, на монтажные работы — 2 года. Привезём и установим столешницу для вашей кухни за один день.

  8. Отличный магаз парни Удачи Купить Бошки Кокаин Гашиш МДМА Мефедрон Зашла на ваш сайт а там Your site hasnt been activated yet… в общем ничего не выходит. Пробывала и через ТОР и через обычный браузер. Все одно. Что не так делаю?всем добрый день брали 200гр тут всё на высшем уровне подробное описание 5 фоток геоданный клад был поднят в касание место укромное тихое качество продукта вышка советую всем брать у Чема

  9. Статья посвящена анализу текущих трендов в медицине и их влиянию на жизнь людей. Мы рассмотрим новые технологии, методы лечения и значение профилактики в обеспечении долголетия и здоровья.
    Узнайте всю правду – детокс24 краснодар

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

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

  12. Ищете машину в Калининграде без лишней суеты? OmegaX обеспечивает аренду авто без водителя на привлекательных условиях. В наличии Renault Logan, Lada Vesta, Volkswagen Polo, KIA Rio с автоматической трансмиссией. Ищете аренда автомобиля в Калининграде без водителя? Подробности и бронирование на omegax39.ru/arenda_prokat_avto_kaliningrad.html — офис находится прямо в аэропорту Храброво. Удобно для тех кто прилетает: забрал машину и сразу в путь.

  13. В лс пиши сразу. Имей в виду быстрее будет https://pimenov-photo.ru Брал иут пару раз все четкоВсем привет ровной веткемагаз на 5

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

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

  16. В данном материале представлены ключевые тенденции в сфере медицинской науки и практики. Вы узнаете о последних открытиях инновационных подходах к терапии и важности профилактики заболеваний. Особое внимание уделено практическому применению новых методов в клинической практике. Лови подробности – детокс24 краснодар

  17. Текст посвящён распространённым мифам о зависимости и их развенчанию. Мы предоставим научно обоснованную информацию и дадим рекомендации по выбору эффективного способа борьбы с зависимым поведением.
    Хочешь знать всё? – кодирование от алкоголизма балашиха

  18. Ровным парням ровный респект Купить Бошки Кокаин Гашиш МДМА Мефедрон привет что случилось вы работаете не могу второй день в личку отписаться сколько заказывал всё было супер как к тебе попасть теперь что делать отпишитесь …Ровный и Стабильный…

  19. Thanks for your posting. What I want to comment on is that while looking for a good on the web electronics shop, look for a web page with full information on critical indicators such as the personal privacy statement, basic safety details, any payment procedures, and other terms along with policies. Always take time to see the help in addition to FAQ pieces to get a far better idea of what sort of shop will work, what they can do for you, and just how you can make use of the features.

  20. Криотерапия становится одним из самых востребованных направлений в wellness-индустрии, а азотная криокапсула CryoOne открывает новые возможности для бизнеса и здоровья. Воздействие экстремально низких температур до -180°C запускает мощные восстановительные процессы в организме, ускоряет метаболизм и способствует эффективному снижению веса. На сайте https://cryoone.ru/ представлено современное оборудование российского производства с полным комплектом поставки, включая сосуд Дьюара, бесплатной доставкой и двухлетней гарантией. Это выгодное вложение для фитнес-центров, spa-салонов и медицинских клиник, которое быстро окупается благодаря растущему спросу на инновационные процедуры восстановления и омоложения.

  21. Насчет этого магаза ничего не скажу но лично я 5иаи ни у кого приобретать не буду ну а ты поступай как хочешь вдруг тут будет нормально действующим в-во https://baykal-atlantis.ru Был постоянным клиентом магаза неделю назад прислали с нулевым эфектом года два назад была проблема с ними решили сразу сейчас на вопрос -как будем решать ответили что мы решим – напишите в конце недели типа не разводите панику на форуме недельку а мы пока людей пошвыряем…. неделя прошла на вопросы не отвечают…решать не хотят…. был магаз ровный теперь людей решили покидать…. админы вообще никуда не смотрят раньше хоть как то было гарантией что они в списке доверенных сейчас деньги заплатили за форум выставились и швыряют .тоже хочу заказать бро

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

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>