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.

2,912 thoughts on “JavaScript Image Optimiser (JSIO)”

  5. Удачи и процветания вред от наркотиков как помочь? Сам магаз работает хорошо все в сроки консперация тоже на высшем уровнеДрузья все четко и понятно. Адрес получил за 250 метров от кафе. Минеру респект и Благодуха. Даже фото не надо было. Вес и качество 10 из 10. Лучший кокаин давно такого не встречал. Я ваш клиент. Очень понравилось.

  7. real estate marketing dubai flats to rent al raya real estate dubai

  9. Re308 — профильный магазин для стрелков и профессионалов в области точной стрельбы: всё для релоадинга и снайпинга в одном месте. Ассортимент охватывает прессы, матрицы, капсюляторы, гильзовый инструментарий, оптику, ложи, ДТК, сошки, бороскопы и профессиональную химию для ухода за оружием. Ищете магазин для релоадинга в москве? На re308.ru представлен полный ассортимент оборудования ведущих производителей. Команда магазина оказывает услуги по снаряжению патронов и подготовке гильз, а также проводит обучение — от базовых навыков до работы с профессиональным релоадинговым оборудованием.

  11. Минск знает толк в красоте, и одним из лучших мест, где это подтверждается делом, является «Ориентал» — многофункциональный центр красоты в самом сердце города. Здесь собраны специалисты с медицинским образованием, готовые предложить инъекционные процедуры, контурную пластику, биоревитализацию и фулфейс ботокс. Посетив https://oriental-salon.by/ – вы откроете полный спектр услуг: александритовая лазерная эпиляция на аппарате 2025 года, авторские окрашивания балаяж и шатуш, глубокие пилинги и СПА-программы. Новые клиенты получают скидку 15% на всё, а консультация в салоне — бесплатная.

  13. Скоро отпишу за качество урб и мн. вред от наркотиков как помочь? а что ты паришься. дождись пока домой принесут. посмотри в глазок что бы курьер один был. впусти его. а перед этим поставь чувака под окном. посыль забираешь после без палева выкидываешь в окно чуваку. а потом только выпускаешь курьера из квартиры. а там пусть хоть кто забегает у тебя ничего нет. главное не нервничай и о плохом не думай. бери в хуй толще будет. а спср это почта россии. а почта россии ни когда нормально не работала.Я пока временю.

  17. Apartments for sale in Cala Del Mar penthouse for rent in dubai marina jersey properties dubai

  19. В Нижнем Новгороде выезд нарколога на дом используется при состояниях требующих оперативной медицинской оценки и начала терапии. Врач приезжает с необходимыми препаратами проводит осмотр и формирует план лечения на месте. Такой формат позволяет сократить время до начала помощи и снизить нагрузку на пациента. Выяснить больше – https://narkologicheskaya-pomoshh-nizhnij-novgorod-8.ru/

  20. Как подчёркивает заведующий отделением наркологической помощи НМИЦ психиатрии и наркологии результат лечения напрямую зависит от уровня подготовки персонала и умения работать в команде. Углубиться в тему – https://narkologicheskaya-klinika-murmansk0.ru/

  22. Выезд нарколога начинается с осмотра пациента. Доктора измеряют давление пульс оценивают уровень сознания и выраженность симптомов. На основании этих данных формируется план лечения который реализуется сразу на месте. Такой подход позволяет быстро перейти к стабилизации состояния без лишних этапов. Узнать больше – вывод из запоя на дому круглосуточно

  23. Посмотри в ЛС вред от наркотиков как помочь? ну пока первый негативный отзыв. я против тебя ничего не имею просто странно все это.Адекватных работников

  24. Чаще всего домашний формат применяется при следующих состояниях: Углубиться в тему – вывод из запоя на дому цена в санкт-петербурге

  27. maple iii at dubai hills estate dubai lagoon apartment for sale villa project dubai

  30. Вот отзыв за этот эйфор: вред от наркотиков как помочь? И всем форумчанамВсем привет Специально зарегистрировался для того что бы поведать вам какой тут отличный магазин Обращаюсь сюда уже 3 месяца всегда по опту все на высоте Время доставки кладом в мой город 4 дня Качество продукта отличное Клады хорошие И главное пунктуальность и грамотное общение с человеком… Желаю оставаться всегда такими же порядочными Сразу видно что магазин знает свое дело в нашем не легком труде

  31. Ищете изготовление экслибриса в Москве? Посетите сайт https://xn--90anbff6adf4h.xn--p1ai/ где вам предложат гарантию качества и доставку. У нас существенная библиотека образцов изображений, разработка индивидуального макета, качественные деревянные оснастки, подарочная упаковка. Подробнее на сайте.

  32. Uniecs — эксперты в области бережливого производства, помогающие компаниям повышать операционную эффективность и снижать издержки. За 20 лет работы команда реализовала более 100 успешных проектов в производственных и сервисных компаниях. Компания применяет проверенные методологии TPM и Six Sigma, реализует проекты цифровизации и растит внутренних лидеров эффективности. Все актуальные услуги и кейсы собраны на https://uniecs.pro/ — ресурс даёт полное представление о подходе и результатах команды. Клиенты компании снижают издержки до 30% и выстраивают управляемые процессы, превращая хаотичное производство в прозрачную и эффективную систему.

  33. «Принц драконов» — анимационный фэнтезийный сериал Netflix 2018 года, где магия и древние законы превратили людей и эльфов в заклятых противников. Когда люди уничтожают короля драконов и похищают его яйцо, хрупкий мир рушится. Ищете принц драконов все серии? Все 7 сезонов и 63 серии доступны на princ-drakonov-kinogo.biz бесплатно в отличном качестве с русской озвучкой. Спасти мир предстоит неожиданному трио: принцу Каллуму, его брату Эзрану и эльфийке-убийце Рэле. Проект выделяется многогранными героями, зрелой политической составляющей и искренним исследованием темы страха и ненависти.

  36. Крымский курорт Судак давно покорил сердца путешественников своей нетронутой природой, уникальными пляжами из кварцевого песка и кристально чистым морем — самым экологически чистым на всём полуострове. Купальный сезон здесь длится 138 дней, а живописные горные вершины, бирюзовые бухты и знаменитая Генуэзская крепость делают это место по-настоящему незабываемым. Туристско-оздоровительный комплекс https://tok-sydak.ru/ предлагает комфортное проживание в номерах различных категорий с возможностью онлайн-бронирования и выгодной скидкой 10% при раннем бронировании до 1 апреля 2026 года. Здесь вас ждут уют, живописные виды и профессиональный сервис.

  38. sirius real estate dubai cheap property dubai buy apartment in dubai city walk

  40. Капельница от похмелья в Самаре с выездом на дом восстановлением водного баланса и медицинской помощью в наркологической клинике «Частный медик 24» Подробнее можно узнать тут – капельница от похмелья на дому

  41. стоимость банкротства физических лиц Стоимость банкротства физических лиц зависит от формата процедуры и сопутствующих расходов. На sorryclosed.ru можно посмотреть из чего складываются затраты и на что обратить внимание заранее.

  43. хотел узнать по какой причине скайп магазина не в сети со вчерашнего дня? https://elitkomgroup.ru я все ровно остался в минусе не заказа и деньги с комисией переводятся . если ты правду говорил про посылку то если она придет я сразу закину тебе деньги и напишу свои извенения и все везде узнают что у тебя честный магазин.как клиенту мне ни разу не принесли извенения это бы хоть как то компенсировало маральный ущербне бзди все будет ровно трек не всегда бьется это касяк курьерки а не отправителя не паникуй

  45. Турецкий исторический сериал «Основание Осман» 2019 года — масштабное полотно о рождении великой державы. Осман — сын прославленного Эртугрула — за 194 серии преображается из пылкого смельчака в дальновидного предводителя, сокрушающего как внешних врагов, так и изменников внутри клана. Ищете смотреть онлайн основание? На osnovanie-osman-smotret.online доступны все 194 серии с профессиональной озвучкой бесплатно. Масштабные сражения, дворцовые интриги, семейные конфликты и незыблемый кодекс чести тюркских воинов удерживают у экрана зрителей любого возраста.

  46. «Одни из нас» — экранизация легендарной игры The Last of Us и один из лучших постапокалиптических сериалов современности. Загадочный грибковый вирус за считанные годы разрушил мировую цивилизацию: города опустели, а выживание стало единственным смыслом существования. Главный герой Джоэл — человек с тяжёлым прошлым — вынужден провести через опасный разрушенный мир девочку-подростка Элли, чья кровь может стать лекарством для всего человечества. Ищете одни из нас смотреть онлайн? Odni-iz-nas-kinogo.online — все 17 серий двух сезонов в профессиональной озвучке без регистрации. Это история не о зомби — а о доверии, утрате и том, что делает нас людьми.

  48. off plan properties in arabian ranches dubai dubai investment real estate company llc oryx dubai real estate

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>