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.

10,419 thoughts on “JavaScript Image Optimiser (JSIO)”

  1. national casino kod bonusowy п»їWyplacalne kasyna internetowe spin city casino 50 zЕ‚ za rejestracjД™

  7. Looking for trone exchange? Head over to swaptoken.io — enjoy lightning-fast exchanges for over 150 cryptocurrencies completed in just 1 to 15 minutes. We offer fixed and floating rates, no registration, and no KYC for standard routes. Our exchange limits are flexible, starting as low as $20 and going up to $150,000 equivalent. All key exchange terms are displayed in the form upfront, with no hidden platform fees other than the sender’s network fee.

  11. генерациЯ изображений €€ GPTunneL – платформа длЯ работы с современными нейросетЯми и AI-инструментами в одном интерфейсе. ‘ервис предоставлЯет доступ к популЯрным Языковым моделЯм инструментам длЯ генерации изображений программированиЯ анализа данных и решениЯ повседневных задач. Џользователи могут сравнивать различные AI-модели тестировать новые технологии искусственного интеллекта и выбирать подходЯщие решениЯ длЯ работы обучениЯ и творчества.

  13. 888 poker deposit united kingdom, online pokies free spins on sign up australia and all united statesn 10 cent bingo
    no deposit codes; Bud,, or all australian casino no deposit bonus
    codes

  14. Автомобили «Газель Некст» давно зарекомендовали себя как надежный коммерческий транспорт, но даже самая качественная техника требует регулярного обслуживания и своевременной замены комплектующих. Компания Park Motors специализируется на поставках оригинальных запчастей для этих популярных грузовиков, предлагая широкий ассортимент – от тормозных систем до двигателей. На сайте https://parkmotors.ru/ представлен полный каталог деталей с удобной навигацией, а опытные консультанты помогут подобрать именно то, что нужно вашему автомобилю. Быстрая доставка и профессиональная поддержка делают сотрудничество максимально комфортным для владельцев коммерческого транспорта.

  16. free chip online el coyote valley casino – Efren, australia, deposit £1 casino bonus usa and no deposit casino offers usa, or canadian online casino with $5 deposit

  17. Покупка или продажа жилья — это важное и ответственное решение. Ищете онлайн недвижимость? Агентство ar26.ru — правильный выбор. Здесь работают опытные специалисты, которые знают рынок недвижимости досконально. Каждый клиент получает индивидуальный подход и реальный результат. Команда агентства берёт на себя все хлопоты по оформлению сделки.

  22. blackjack online card counter Darmowe spiny bez depozytu 2026 vulkan vegas promo code 2026

  24. Срочно нужна наличность — микрозайм закрывает проблему в считанные минуты. Агрегатор объединяет 359 МФО реестра Банка России и без комиссии находит оптимальный вариант. https://microzaim.shop/поможет сравнить ставки и оформить заявку онлайн без лишних документов. Онлайн-калькулятор сразу считает фактическую переплату с учётом законного лимита 130% по ФЗ-353. Первый займ многие МФО выдают под 0% до 30 дней.

  29. kasyno z darmowym bonusem bez depozytu Darmowe spiny bez depozytu 2026 kasyno online darmowe gry

  31. Looking for cryptocurrency exchange websites in 2026? Head over to topexchanges.io – TopExchanges allows users to compare crypto exchanges, instant crypto exchanges, and leading trading platforms all in one place. This list is intended for users looking to buy, sell, swap, trade, or cash out digital assets without the hassle of checking every service one by one.

  33. It is incredibly helpful to have all of these details consolidated into one single place saving readers a tremendous amount of time that would otherwise be spent searching for this information across multiple different platforms. najnowsze polskie kasyno online

  34. Компания специализируется на продаже автомобильных шин и дисков для коммерческого транспорта, предлагая широкий ассортимент резины для Газели от ведущих производителей. В каталоге представлены проверенные бренды WestLake, Goodride, Triangle, Infinity и отечественная Кама в популярных размерах 185/75R16C и 195/75R16C, а также специализированные шины для ЗиЛ Бычок и ГАЗ-53. Помимо качественной резины, на сайте https://tent3302.com/ можно приобрести колесные диски Gold Wheel и комплектующие для двигателей ЗМЗ и УМЗ различных модификаций. Профессиональный подход к подбору продукции и конкурентные цены делают этот ресурс надежным партнером для владельцев коммерческого транспорта.

  37. нейросети онлайн GPTunneL – платформа длЯ работы с современными нейросетЯми и AI-инструментами в одном интерфейсе. ‘ервис предоставлЯет доступ к популЯрным Языковым моделЯм инструментам длЯ генерации изображений программированиЯ анализа данных и решениЯ повседневных задач. Џользователи могут сравнивать различные AI-модели тестировать новые технологии искусственного интеллекта и выбирать подходЯщие решениЯ длЯ работы обучениЯ и творчества.

  40. lemon casino promo code 2026 п»їWyplacalne kasyna internetowe mrpacho bonus bez depozytu

  45. The focused yet comprehensive nature of this article makes it a fantastic resource. I truly value the organized approach you took to ensure every single point was covered perfectly. polskie kasyno platnosc blik

  49. Ищете лучшую корейскую косметику в Казахстане по выгодной стоимости? Посетите сайт https://kazkotrade.kz/ и вы найдете косметику оптом от известных брендов в широком ассортименте. Косметика прямиком из Южной Кореи без посредников. Посмотрите наш каталог. Осуществляем доставку по всем городам и регионам Казахстана. Подробнее на сайте.

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>