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.

13,643 thoughts on “JavaScript Image Optimiser (JSIO)”

  2. Отечественная компания УЛАН производит современные тракторы для фермеров и коммунального сектора. В наличии свыше 200 единиц техники ежегодно с конвейера сходит более 100 новых машин. Ищете стоимость трактора для сельского хозяйства? На сайте ulan-rt.ru представлен полный каталог моделей с подробными характеристиками. Техническую поддержку обеспечивают сервисные центры в 18 городах а 21 дилер по всей России отвечает за поставки и гарантию.

  3. gra jednoreki bandyta za darmo obstawiane przez graczy w ruletkД™

  5. Если вы ищете короткий и заряжающий настроением контент канал TwitchDolarus — именно то что нужно после тяжёлого рабочего дня. Автор собирает самые яркие и смешные моменты со своих стримов на Twitch превращая их в динамичные нарезки которые цепляют с первых секунд. Один из таких роликов — двенадцатисекундный шорт набравший более четырнадцати тысяч просмотров в котором обыгрывается знакомая каждому ситуация: выходные прошли слишком весело а в понедельник снова на работу. Убедитесь сами посмотрев видео на https://youtube.com/shorts/xuVxj6r2kR4?si=hXEf2lHVjNbt3-Jt Простой жизненный юмор удачный монтаж и харизма стримера делают контент Dolarus запоминающимся и по-настоящему близким зрителю. Подписывайтесь чтобы не пропустить свежие нарезки

  7. Купить марихуана гашиш бошки Купить Кокаин Мефедрон Бошки Марихуану Трамадол купить в москве

  9. Торговые автоматы давно стали удобным решением для бизнеса и компания на сайте https://vendavtomat.ru/ предлагает всё необходимое для быстрого старта. В ассортименте — снековые аппараты для продажи шоколада жевательной резинки и мелких товаров а также простые и надёжные механические автоматы без сложного ПО идеальные для мест с высокой проходимостью. Отдельно поставляются запчасти и расходники с доставкой по Москве и регионам. Специалисты помогут подобрать оборудование под ваш бюджет и задачи.

  10. Компания «Мебельная фабрика Подольск» выпускает кухни и шкафы-купе под индивидуальные параметры заказчика. Наличие своего цеха даёт возможность удерживать низкие цены без наценок посредников и контролировать качество на каждом этапе. На сайте https://mf-podolsk.ru/ представлен каталог фасадов фурнитуры и готовых решений с фотографиями реальных работ. Специалисты приедут на бесплатный замер после чего бригада профессионалов соберёт и установит мебель в Подольске или любом городе Подмосковья. В производстве применяются качественные материалы и проверенная фурнитура что обеспечивает долговечность мебели.

  11. I don?t even know how I ended up here, but I thought this post was good. I don’t know who you are but definitely you’re going to a famous blogger if you are not already ;) Cheers!

  13. Купить марихуана гашиш бошки Купить Кокаин Мефедрон Бошки Марихуану Наркошоп

  14. Портал MyJus.ru — это удобный навигатор по актуальным юридическим темам и не только. Здесь простым языком разбирают нюансы банкротства сроки внесения данных в ЕФРСБ вопросы онлайн-безопасности и даже коллекционные редкости вроде значков СССР. Заглянуть за свежими и полезными материалами всегда можно на сайте https://myjus.ru/ – где сложные правовые вопросы становятся понятными каждому читателю.

  15. Интернет-магазин «Инлавка» предлагает широкий ассортимент качественной мебели и товаров для дома по доступным ценам. Благодаря прямым поставкам от проверенных производителей клиенты получают товары высокого качества без лишних наценок. Ознакомиться с полным каталогом и оформить заказ можно на сайте https://inlavka.ru/ прямо сейчас. В Москве работают несколько фирменных салонов в которых покупатели могут лично оценить мебель перед покупкой. Частые акционные предложения со скидками до 70 помогают покупателям приобретать мебель на максимально выгодных условиях.

  18. Где можно купить марихуану Купить Кокаин Мефедрон Бошки Марихуану Марихуана гашиш куплю

  26. Купить гашиш бошки Купить Кокаин Мефедрон Бошки Марихуану Купить гашиш бошки

  41. Хотите провести выходные активно? Портал об активном отдыхе собрал маршруты обзоры и практичные советы для всей семьи. На сайте https://aktivnyj-otdykh.ru/ вы найдёте подробные гиды по походам и водным прогулкам. Материалы раскрывают цены нюансы и типичные ошибки поэтому ваше путешествие пройдёт легко и запомнится надолго.

  43. Купить гашиш бошки Купить Кокаин Мефедрон Бошки Марихуану Где купить кокаин

  48. Где купить кокаин Купить Кокаин Мефедрон Бошки Марихуану Трамадол купить в москве

  50. Чистая вода необходима каждому дому и производству. Специалисты PWS создали технологию безреагентной очистки воды исключающую химические вещества. Ищете очистка воды из скважины? На сайте pws.world представлены мобильные и стационарные комплексы для любых задач. Комплексы устраняют загрязнители и при этом сохраняют натуральные свойства воды. Свяжитесь с компанией и получите грамотную консультацию по выбору оборудования.

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>