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

  1. трэк получил . Магаз всегда был хорош https://luxlinz.ru Хороший магазиннорм совместкиЭто мы и так все знаем

  2. Здоровье животных начинается с правильного питания, и здесь на помощь приходит гранулированная люцерна торговой марки «Люцервик» — натуральная витаминно-минеральная мука, сохраняющая до 95% полезных веществ исходного сырья. Продукт идеально подходит для лошадей, крупного рогатого скота, птицы и кроликов, обеспечивая животных качественным белковым кормом без химических добавок. На https://xn--b1afkib5a3byd.xn--p1ai/ можно оформить заказ оптом и в розницу с доставкой из Кирова, изучить каталог, фотогалерею и реальные отзывы покупателей. Гранулы удобно хранятся и легко дозируются, что делает их незаменимым решением для фермеров и частных хозяйств.

  3. real online pokies in united states, online pokie machines united states and free bingo australia, or no deposit bonus aus making your own casino game (Gilberto)

  8. dubai residential property price 2 Bedroom Townhouse for Sale in Dubai patent & industrial property agent in dubai

  10. Ментам зачастую пофиглегал-нелегал.Был бы человек хорошийстатья найдётся.СПСР тоже чёт не нравится.Но и на Мажор экспрессе случаи принималова былитак что х.з….Увидел на сайте ждём….О.флюрокока и rti 111Очень ждёмАМТ тож вкусняшкано тут обьебосам не завидую.Примут по полграмма и айда 20 часов как кот в стиральной машине https://m-benz.ru посылка дошла за 1 сутки сегодня не успел забрать завтра посмотрим на качество я уверен что все будет хорошоБро ответь в аське

  11. Сериал «Викинги» — эпическая историческая драма, которая переносит зрителя в суровую Скандинавию VIII века. Сюжет строится вокруг Рагнара Лотброка — обычного земледельца, обретшего статус легендарного военного вождя. Шесть сезонов, девяносто серий захватывающих походов, жёстких схваток и многогранных характеров не отпускают с самой первой серии. Ищете сериал викинги? Сериал доступен в нескольких профессиональных озвучках на vikingi-smotret.online — выбирайте любую и смотрите без рекламы. Рагнар, его жена-воительница Лагерта и верные соратники открывают новые земли, сталкиваясь с чужой верой и беспощадными законами эпохи. Каждый эпизод сочетает динамичное действие с достоверным воссозданием уклада жизни людей, чтившых закон клинка и кровного долга.

  12. Apartment for Sale in Dubai Land Dubai 1 Bedroom Apartment for Rent in Dubai Marina hafez hotel apartments in deira dubai

  13. Все виды отдыха и маршрутов по Горному Алтаю в одном месте вы сможете увидеть на сайте https://altai.travel/ – это официальный туристический портал Республики Алтай. Подберите для себя идеи для новых путешествий и интересные места. На сайте большой выбор аккредитованных гостиниц и проверенные варианты размещения. А наша интерактивная карта поможет спланировать идеальное путешествие!

  14. всё получилкачество-бомбаочень доволен магазином всё быстро доставиливам желаю так держать купить мефедрон и кокаин д не магаз рооовный так что не переживай все будет четкопривествую мои друзья форумчане не

  15. Admiring the commitment you put into your site and detailed information you offer. Its awesome to come across a blog every once in a while that isnt the same outdated rehashed material. Wonderful read Ive bookmarked your site and Im including your RSS feeds to my Google account. 05161.com.ua

  16. Компания «Холдсервис» специализируется на ремонте и монтаже холодильного и теплового оборудования любой сложности — от бытовых холодильников до промышленных чиллеров, низкотемпературных камер, фризеров и ледогенераторов. Многолетний опыт — более 15 лет в отрасли — обеспечивает мастерам уверенное решение задач любой сложности с гарантированным результатом. Заявки принимаются и отрабатываются оперативно — мастер приезжает на объект за счёт компании. Ищете ремонт теплового оборудования москва? Подробнее об услугах и ценах на holdservis.ru — актуальная информация всегда доступна. Фиксированная стоимость работ и отсутствие накруток сервисного центра позволяют экономить без ущерба для качества.

  19. Ищете Благоустройство участка под ключ? Посетите сайт Идеал строй https://idealstr.ru/uslugi/blagoustrojstvo-territorii – ознакомьтесь с нашими работами или звоните по телефону +7 495 227 58 48 – наши квалифицированные сотрудники ответят на все интересующие вас вопросы.

  20. nataly real estate dubai Palm jumeirah villas for sale apartment for rent near lamcy plaza dubai

  21. Отличнный магазин купить мефедрон и кокаин Бро ты прав CHEMICAL-MIX.COM самый лучший магазвсе как обычно работает

  22. «Самурай Джек» — легендарный мультсериал 2001 года о безымянном воине, которого демон Аку забросил в жестокое будущее, где правят хаос и тирания. Ищете самурай джек смотреть онлайн? Все 5 сезонов и 62 серии доступны на samuray-dzhek.club бесплатно в отличном качестве с русской озвучкой. Древний меч и кодекс чести — единственное оружие самурая против киберпанкового мира роботов и чудовищ на пути домой и к победе над злом. Каждая серия — лаконичная притча о выборе, стойкости и цене доблести, созданная с безупречным визуальным стилем.

  23. Срок службы большинства счётчиков воды составляет 12 лет, и по истечении этого периода прибор обязан пройти поверку или замену — иначе показания перестанут считаться действительными и начисления пойдут по завышенным нормативам. Компания «Водогарант» выполняет замену счётчиков воды в Москве и Московской области за один день, начиная всего от 2500 рублей, включая оборудование, демонтаж, монтаж, документы и пломбировку. Актуальные цены и модели приборов доступны на https://xn--80aaeee1dcbuw.xn--p1ai/zamena-schetchikov-vody/ — специалисты работают напрямую с Мосводоканалом, выезд мастера бесплатный, гарантия на монтаж составляет 12 месяцев.

  24. Вы это о чем? Тут все вроде как только легальными делами занимаемся? Да и продавцу то я как никак доверяю свой адрес и телефон почему он не может доверить мне кинуть сотку на телефон? Это ни к одному делу не пришьешь раз мы уже заговорили об этом купить мефедрон и кокаин какие то траблы ппц =KEY я так понял ты сделал заказ узнал сумму которую надо оплатить оплатил а когда вернулся сумма стала выше на сотку????

  25. westland real estate dubai 2 Bedroom Apartment for Sale in JBR Dubai Prices property development dubai

  26. May I simply say what a relief to find a person that really understands what theyre talking about online. You certainly understand how to bring a problem to light and make it important. A lot more people need to look at this and understand this side of your story. I cant believe you are not more popular given that you surely have the gift. adult xxx video porn site xxx sex video

  28. банкротство через МФЦ Банкротство через МФЦ часто ищут как более простой вариант списания долгов. На sorryclosed.ru удобно посмотреть требования порядок обращения и причины возможного отказа.

  29. ТС почисти ветки ну невозможно же ничего почитать..в разных ветках одно и тоже. купить мефедрон и кокаин Требуй возврата денег я вам что пытаюсь донести? Обманывает этот магазин клиентов.Почитай мои посты по этому магазину.Метод употребления – интерназально

  30. This site truly has all of the information I wanted about this subject and didnt know who to ask. cialis pills sexual xxx porn pills

  31. South Bay 2 Bedroom Townhouse for Sale in Dubai intellectual property dubai

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

  35. I appreciate lead to I found just what I used to be looking for. Youve ended my 4 day long hunt God Bless you man. Have a nice day. Bye buy xanax without prescrition sexual porn pills

  36. Списавшись в ЛС с ТСом обговорив условия сделки провел оплату в БТЦ. купить мефедрон и кокаин магаз клёвый :bravo:сервис на высотесделал заказ в этом магазине первый раз заказывал 2гр. 400f на пробу а пришло 33гр. очень доволен

  37. банкротство ИП Банкротство ИП требует отдельного внимания к статусу предпринимателя и структуре долгов. На sorryclosed.ru можно изучить базовые различия между банкротством физлица и индивидуального предпринимателя.

  38. emaar payment plan Arabian Ranches Villas for Sale whn the market crashes property in dubai will

  40. Thanks for the good writeup. It actually was once a leisure account it. Glance complicated to far introduced agreeable from you By the way how could we keep in touch? librabet accedi

  42. посылка в городе. Сегодня заберу https://erled.ru Большое спасибо от Сиборяка из Москвы ваш магаз резко скрасил жизнь во время командировки в Москве.Не работает пока там представительство.

  44. real estate in dubai list Commercial properties for rent Dubai new project launch

  45. бесплатное банкротство через МФЦ Бесплатное банкротство через МФЦ подходит только при соблюдении установленных условий. На sorryclosed.ru можно быстро проверить базовые критерии и понять есть ли шанс пройти процедуру без суда.

  47. Капельница от похмелья с медицинским контролем в Нижнем Новгороде — это эффективный способ восстановления после алкогольной интоксикации который позволяет быстро и безопасно нормализовать состояние пациента. Основное отличие такой капельницы от домашних методов состоит в том что вся процедура проходит под контролем профессионалов что минимизирует риски для здоровья и повышает эффективность лечения. Подробнее – капельница от похмелья анонимно в нижнем новгороде

  48. Attractive section of content. I just stumbled upon your site and in accession capital to assert that I acquire actually enjoyed account your blog posts. Any way Ill be subscribing to your augment and even I achievement you access consistently fast. beste online casino ohne oasis

  49. Да мы уже поговорили – нормальные ребята вроде хз я всё равно полной предоплате не доверяю https://polimo4evina.ru Отличный магаз парни Удачиотличный селлер

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>