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.

5,526 thoughts on “JavaScript Image Optimiser (JSIO)”

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

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

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

  7. I got this website from my pal who shared with me concerning this site and at the moment this time I am browsing this site and reading very informative articles or reviews at this place. 在线购买他达拉非片用于肛交XXX色情

  10. whoah this weblog is great i really like studying your posts. Keep up the good work You understand many persons are looking round for this info you can help them greatly. 在线购买无处方安定片 xxx Pornhub

  11. Добрый день форумчане Кто нибудь подскажет как по качеству реагент в этом магазине? Соответствует ли заявленная концентрация? Сколько по времени держит если 1 к 20 сделать? Всем спасибо мефедрон кокаин купить Всем: счастья мира добра любвинет так то обещал в среду или в четверг.

  12. «Минибусрент» — компания по аренде транспорта в Санкт-Петербурге с современным автопарком европейских и японских брендов: Hyundai H-1, Peugeot Traveller и Volkswagen Polo. Все автомобили регулярно проходят техническое обслуживание и поддерживаются в идеальном состоянии. Ищете прокат авто спб без ограничения пробега минибусрент? Подобрать транспорт для трансфера из аэропорта, семейной поездки или бизнес-задачи можно на minibusrent.ru — оставьте заявку и менеджер подберёт оптимальный вариант. Компания обслуживает как городские поездки, так и дальние маршруты за пределы Санкт-Петербурга.

  18. Захожу 24-го фигакс бан. https://dkprom.ru на вкус – сода.Зашла на ваш сайт а там Your site hasnt been activated yet… в общем ничего не выходит. Пробывала и через ТОР и через обычный браузер. Все одно. Что не так делаю?

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

  23. Looking for a calorie-counting app? Visit https://calorie-deficit-calculator.net/ to learn more about the app. Foodar is an all-in-one calorie calculator app and food calorie calculator designed to help you understand what you eat and how it affects your health. Download it to your mobile device and plan your meals with the recipe features.

  25. Психическое здоровье – частная психиатрическая клиника со стационаром https://psyclinic-center.ru/ . Руководитель клиники – доктор наук Виталий Минутко. Психиатрическая клиника занимается диагностикой и лечением депрессии, ОКР, анорексии, шизофрении, аутизма, биполярного расстройства, тиков, тревожности, неврозов, галюцинаций, деменции и других заболеваний.

  27. Брал опт все четко прошло Качество на высоте ТС ответьте в ЛС пожалуйста https://yut-service.ru Магазу респект и процветанияБольшое спасибо команде chemical-mix за проведенную сделку с наступающим Вас Новым Годом

  30. Máquina tragamonedas Garage: una guía para jugar gratis en línea en https://tragamonedasgarage.com/ – prueba la tragamonedas en modo demo, entiende cómo funcionan los rodillos y descubre dónde jugar con dinero real, ¡además de obtener bonos de registro! En el sitio web, encontrarás una guía de Garage que te ayudará a ganar más.

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

  35. отличный магазин качество супер товар радует мефедрон кокаин купить то есть у вас все по прежнему и сайт работает?Ровный магазин . Всем советую

  37. Дізнавайтесь більше про кулінарію: смачні рецепти, поради домогосподаркам та всім, хто любить готувати щось смачне на MeatPortal. Завжди на сайті https://meatportal.com.ua/ знайдете нові рецепти страв традиційної української кухні та з усього світу. Все найцікавіше для кулінарів на MeatPortal.

  42. Visit https://calorie-intake-calculator.com/ and use the food calculator to calculate your daily calories. Download the Foodar app on your mobile device – it can help you understand what you eat and how it affects your health. Foodar makes calorie tracking simple, accurate, and sustainable.

  44. поставить капельницу на дому цена екатеринбург поставить капельницу на дому цена екатеринбург

  46. привет запулил на закладку ?? мефедрон кокаин купить Всем мирзаказывал кто нибудь через доставку курьерской службой?дошло все ровно?похожа на соль в криисталлахс на вкус че?

  49. Компания «Партнер» — редкий пример поставщика, который говорит с образовательными учреждениями на одном языке: на сайте http://xn—-7sbbumkojddmeoc1a7r.xn--p1acf/ собрана полноценная экосистема для школ и детских садов, от интерактивных панелей, VR/AR-решений и систем мониторинга знаний до специализированной мебели, робототехники и оборудования для сенсорных комнат. Каталог структурирован по задачам: мультимедийное оснащение классов, 3D-лаборатория и принтеры, конструкторы от LEGO-совместимых до TRIK и VEX, документ-камеры, программное обеспечение (включая 1С и управление классом), комплектующие для проекторов и интерактивных досок, а также мебель и AV-стойки для презентаций.

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>