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

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

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

  6. Кафе «Фабрико» в Перми — это место, где римская и неаполитанская пицца готовится по классическим рецептам, а меню включает роллы, суши, бургеры, супы, пасту и десерты на любой вкус. Ищете доставка пиццы? На fab-pizza.ru можно оформить доставку или самовывоз со скидкой 10%. При заказе трёх больших пицц четвёртая достаётся в подарок, а именинники пользуются скидкой 15% в течение трёх дней до и после праздника. Панорамные окна, детская зона и банкетный зал на 25 человек создают комфортную атмосферу для отдыха и мероприятий.

  7. Thank you Ive just been looking for info approximately this subject for a while and yours is the best I have discovered so far. However what about the conclusion? Are you sure about the source? Buy Tadalafil Online anal sex xxx porn pills

  11. Тоже чуть дольше чем обычно ждал посылкуно все получил в полном объеме.Я думаю лучше маленько подождать и без суеты забрать. https://haroro.top проверенный магазинТепкрь сам хочу зделать заказ но немогу на сайт попасть

  14. Металлические детали с фирменной символикой — это не просто декор, а мощный инструмент брендинга. Компания Инпекмет специализируется на литье значков и бирок из сплава ЦАМ (Zamak) — прочного, коррозиестойкого и экологически безопасного материала. На сайте https://inpekmet.ru/ можно рассчитать тираж и оформить заказ от одного экземпляра. Изделия отличаются высокой детализацией, а финишная обработка включает полировку, покраску, чернение и лакирование. Производство работает быстро и гибко — от одного дня.

  16. Издание «Спільно» — ресурс громадянського суспільства — охватывает политику, криминал, коррупцию, культуру и общество без редакционных фильтров и уклончивых формулировок. Редакция и блогеры платформы публикуют конкретные расследования злоупотреблений и офшорных структур с опорой на доказательную базу и верифицированные факты. Следите за независимой гражданской журналистикой на https://spilno.net/ — украинский портал для читателей требующих честного анализа и прямой гражданской позиции. Блоги и авторские колонки расширяют редакционный формат и превращают ресурс в живую площадку для общественной дискуссии.

  17. Pragmatichub https://pragmatic-promo.com/ is a premier hub for Pragmatic Play slots enthusiasts. Explore detailed reviews of top titles like Gates of Olympus, Sweet Bonanza, and Big Bass Bonanza. We provide free demo gameplay, RTP data, and volatility analysis to help users understand every mechanic. Our platform ensures secure access via verified mirrors and certified partners. Find the best online gaming sites and reliable info for a safe experience with Pragmatic Play’s world-class casino software.

  18. Еще раз извините. Треки тоже бьются не сразу курьерки в завалах иногда он только начинает определяться на сайте курьерки а его уже вручают или вручили получателю. Не пугайтесь что мониторинг начнется не сразу вам всем все придет заказанное. https://kypitboshki.shop Успехов и процветания новому селлеру Желаю денег пресс и в обществе весВЫ ЛУЧШИЕ

  23. Профильные системы для строительства и отделки — это то, на чём держится качество любого ремонта. Компания Waltzprof производит металлические профили, которые давно стали стандартом среди профессиональных строителей. На сайте https://waltzprof.com/ представлен полный каталог: профили для гипсокартона, штукатурные и маячковые изделия, угловые и арочные решения. Продукция соответствует ГОСТ, поставки — по всей России. Выбирайте надёжного производителя.

  25. сколько зарядил? https://kypitmetadon.shop хуй ты отпишешь наркоман проклятыйДа хватает придурков только смысл писанины этой что он думает что ему за это что то дадут кроме бана явно ничего не выгорит Тс красавчик брал 3 раза по кг сделки и всегда все чётко Жду пока появиться опт на ск

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

  30. Да трек получил но я не про это я про задержки сейчас у них все должно быть ровно https://kypitgeroin.shop Ребятвообще 307 наваливает хорошоНОпопрошу в разделе магазина флуд и оффтоп прекращать…Для этого есть раздел Информация из жизни LegalRCв котором все описано и сказанно….Или создайте топик с обсуждениями там…ВСЕМ САЛЮТ :hello:

  32. Ремонт «под ключ» при сотрудничестве с Мариновой Татьяной директор компании ГК Арте Дизайн и ООО «Студия дизайна Нуволе Бьянке» ИНН/КПП 7203498458/720301001 оказался сплошной проблемой: срыв сроков постоянные переделки и масса технических ошибок. После получения оплаты качество и ответственность резко исчезли. Не рекомендую.

  33. Интернет-магазин спортивного питания https://power-mag.ru/ Тюмень – это ведущий магазин спортивного питания. Занимаемся продажей спортивного питания и БАД и предлагаем только проверенные пищевые добавки по низким ценам. Работаем с крупнейшими поставщиками пищевых добавок и спортивного питания, а также доставляем БАДы из США, например те, что есть на маркетплейсе Айхерб. Имеется доставка в любой район города Тюмень и отправка в любой город России почтой, СДЭК и другими транспортными компаниями.

  39. спасибо магазу Купить Кокаин Купить Мефедрон брал в данном магазине все супер.привет стоит брать в этом магазине?

  40. Гастрономический круиз по Москве-реке — это не просто ужин с видом, это целое событие, которое запоминается надолго. Сервис https://riverwalktickets.ru/ за 10 лет работы на рынке речного флота собрал более 100 маршрутов на любой вкус и формат: романтический вечер на двоих, семейный обед или корпоративная прогулка. Команда лично отбирает теплоходы, проверяет качество кухни и сервиса — именно поэтому более полумиллиона гостей уже выбрали этот сервис. Отправляйтесь в плавание от Воробьёвых гор, Парка Горького или Зарядья и откройте Москву с новой, водной стороны!

  41. Если вы давно мечтали провести незабываемый вечер на воде в самом сердце столицы, то речные прогулки по Москве-реке — именно то, что вам нужно. Сайт https://ticketscruise.ru/ собрал лучшие рейсы с живой музыкой, DJ-сетами и авторскими шоу-программами, чтобы каждый выход в город становился настоящим событием. Удобное онлайн-бронирование за пару минут, электронный билет с QR-кодом и скидки до 90% на популярные маршруты делают сервис по-настоящему привлекательным. Бар, коктейли и продуманный до мелочей сервис на борту завершают картину идеального московского вечера.

  42. Дім, сад, будівництво і фермерство – ці теми розглядаємо в блозі – Українська Хата. На сайте https://xata.od.ua/ корисні поради власникам будинків, садівникам, будівельникам і фермерам. Актуальні теми, новини зі світу будівництва і фермерства. Українська хата (XATA.OD.UA) розповість про цікаве та корисне.

  46. Горная вода считается эталоном чистоты — и не случайно. Компания «Вода с гор» доставляет натуральную артезианскую воду прямо к вашей двери. На странице https://voda-s-gor.ru/166 представлены актуальные тарифы на доставку и удобные форматы заказа. Вода добывается из защищённых источников, проходит многоступенчатый контроль качества и разливается в чистую тару. Забудьте о кипячении и фильтрах — просто закажите настоящую чистую воду.

  47. Всё здорово спасибо Вам https://umiu.top Ты себя хорошо чувствуешь ? Ты в какую аську пишешь ?у меня в подписи проверь

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>