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

  1. Полученная продукция не подлежит возврату и обмену. купить кокаин мефедрон бошки марихуану Чем аргументирует отказ работать с гарантом?Всем привет В магазе есть представительства по регионам закладками? Ярославль?

  5. trans escorts vancouver Escort service in Bodrum jenna jane escort

  6. «Время Возрождения» — медицинский наркологический центр в Кемерово где оказывают помощь при острых состояниях и хронических формах зависимости. В работе сочетаются медикаментозная поддержка психотерапия и контроль динамики восстановления. Ознакомиться с деталями – амфетамин наркотик

  10. Mebelink — профессиональная перетяжка и реставрация мягкой мебели в Москве с гарантией 3 года на все работы. Мастера работают с износостойкими и гипоаллергенными материалами, предлагают эксклюзивные ткани под интерьер и берутся за ремонт диванов, кресел, кроватей, стульев и офисной мебели. https://mebelink.com/ рассчитает стоимость по фото за 15 минут — цена фиксируется сразу и не меняется. Доставка и сборка включены в стоимость. Рейтинг 5,0 в Яндексе подтверждает качество.

  12. Вот такая хитрость https://ilim-vesti.ru оптимал дозировка на 2дпмп при вв от данного магазина какая?Магазин работает Бро очень понктуален Магазину процветание и новых клиентов

  15. В клинике «НОВЫЙ НАРКОЛОГ» в Санкт-Петербурге оказывают квалифицированную помощь при запоях абстинентных состояниях и последствиях употребления. Врачи проводят инфузионную терапию нормализуют сон и общее самочувствие корректируют тревожность и вегетативные проявления. После стабилизации подбирается план дальнейшего лечения и реабилитации. Исследовать вопрос подробнее – алкоголь и дтп

  16. Новостной ресурс «Корреспондент» публикует украинские и мировые события без задержек — экономика, политика, здоровье и технологии без сглаживания острых углов. Редакция не избегает неудобных материалов: антикоррупционные расследования, репортажи о конфликтах и детальный бизнес-анализ появляются на постоянной основе. Следите за актуальной повесткой на https://karrespondent.com/ — украинский новостной ресурс для читателей ценящих скорость и фактическую точность. Темы культуры, социума, технологий и острых конфликтов обеспечивают полноту редакционного охвата и утверждают портал как ключевую точку входа для взыскательной аудитории.

  18. leila star escort Elite escort services Porto Cervo femboy escorts near me

  21. Эта статья для ознакомления предлагает читателям общее представление об актуальной теме. Мы стремимся представить ключевые факты и идеи которые помогут читателям получить представление о предмете и решить стоит ли углубляться в изучение. Тыкай сюда — узнаешь много интересного – капельница воронеж цены

  22. Ресурс «В Украине» публикует материалы об обществе, бизнесе, технологиях, здоровье и образовании без информационного шума и лишних оговорок. Редакция охватывает широкий тематический спектр — от стратегической релокации бизнеса до медицинской аналитики — и подаёт информацию чётко и по существу. Следите за актуальными событиями на https://108.in.ua/ — общественно-аналитический ресурс для читателей которые ценят конкретику и глубину подачи материала. Профессиональные статьи и аналитические обзоры делают ресурс незаменимым ежедневным источником информации для разноплановой украинской читательской аудитории.

  23. ладно ..буду надеяться что все норм https://zabor-02.ru по времени ждал не долго дня 4 но доставка отдала на 2ой день как пришло конспирация мне очень понравилась на все 100 магазину 100 из 100 и большой спс в курске есть ваш магаз?

  24. Клиника «Био-лазер» специализируется на пластической хирургии в Москве — здесь работает хирург Владимир Высоцкий с практикой более 25 лет. В перечень операций входят маммопластика, блефаропластика, абдоминопластика, лифтинг лица и шеи, отопластика и мастопексия. Ищете пластическая хирургия в Москве? Актуальные результаты операций собраны на doctor99.ru в разделе галереи. Регулярное участие в стажировках, профессиональных конгрессах и анатомических курсах позволяет клинике придерживаться актуальных хирургических стандартов. Первичная консультация доступна онлайн.

  25. В кировской клинике «Оптимед» проводят лечение алкогольной и наркотической зависимости. Центр предлагает вывод из запоя реабилитацию и круглосуточную наркологическую помощь. Подход основан на современных медицинских методиках и внимании к состоянию пациента. Подробнее тут – вызов на дом капельницы от запоя

  27. В статье представлены ключевые моменты по актуальной теме дополненные советами экспертов и ссылками на дополнительные ресурсы. Цель материала — дать читателю инструменты для самостоятельного развития и принятия осознанных решений. Продолжить изучение – вывод из запоя самара

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

  29. Этот информационный материал собраны данные которые помогут лучше понять текущие тенденции и процессы в различных сферах жизни. Мы предоставляем четкий анализ графики и примеры чтобы информация была не только понятной но и практичной для принятия решений. Осуществить глубокий анализ – выведение из запоя в стационаре

  30. ForOne.Manakara — петербургская компания, предлагающая производство и монтаж стеновых панелей из карбонизированного бамбука и гибкого камня для стильных современных интерьеров. Панели изготавливаются по инновационной технологии: бамбук измельчается, проходит карбонизацию, коэкструзию с ПВХ и спайку под температурой 120°C. Ищете стеновые панели для внутренней отделки? На сайте forone.manakara.ru представлен полный каталог продукции с услугами выезда специалиста и профессионального монтажа. Материал экологически безопасен, подходит для криволинейных поверхностей и не требует особой подготовки стен — идеальное решение для жилых, детских и медицинских помещений.

  32. ts escort md Verified Escorts in Belek Fethiye Kusadasi blondie fesser escort

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

  38. Анапа — один из самых популярных курортов Черноморского побережья, и добраться до него с комфортом теперь проще, чем когда-либо. Сервис https://anapa-taxi-transfer.ru/ предлагает профессиональные услуги такси и трансфера с удобным онлайн-калькулятором стоимости поездки прямо на сайте. Официально зарегистрированная компания работает круглосуточно, обслуживает все основные маршруты и располагает собственным автопарком. Опытные водители встретят вас в аэропорту или на вокзале, а прозрачное ценообразование избавит от неприятных сюрпризов. Путешествуйте с удовольствием!

  39. Молодцы Так держатьстараемся купить кокаин мефедрон бошки марихуану Две дорожки для СережкиЗаказывал 200й прислали с приятным бонусом Конспирация- чудесна В общем все супер

  42. Платная наркологическая клиника «НОВЫЙ НАРКОЛОГ» в Санкт-Петербурге предлагает лечение зависимости в комфортных условиях — амбулаторно или в стационаре по медицинским показаниям. Специалисты оценивают риски подбирают схему терапии и сопровождают пациента до стабилизации состояния. Анонимность и профессиональная этика обеспечивают спокойное обращение за помощью. Изучить вопрос глубже – https://new-narkolog.ru/stati/kak-vyyti-iz-zapoya-samostoyatelno

  43. ts escort tracy Elite escort services Belek Fethiye Kusadasi escorts in hochiminh

  45. Лечение алкоголизма в «НовомЯ» выстраивается поэтапно: прекращение употребления детоксикация поддерживающая терапия восстановление психического состояния и переход к реабилитации. Такой маршрут снижает вероятность срывов за счёт системной поддержки. Ознакомиться с деталями – https://i-am-new.ru/reabilitatsionnyy-tsentr/programma-reabilitatsii-12-shagov

  47. Когда зависимости становятся хроническими и угрожают жизни пациента комплексная реабилитация при наркомании в специализированных клиниках Москвы включая вывод из состояния в стационаре и последующий анализ данных о состоянии пациента может стать единственным возможным решением. Процесс восстановления включает в себя работу не только с зависимостью но и с психоэмоциональным состоянием что делает лечение более эффективным и долговечным. Углубиться в тему – https://reabilitacziya-alkogolikov-moskva-2.ru

  48. незнаю незнаю мне пришло за 2 суток и еще я обратился к селлеру и он предоставил всю полную информацию с адресом и номерами телефона курьерки https://life4beard.ru проблемы с обслуживанием.у тебя все пришло? отпиши в лс.

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

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>