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.

6,488 thoughts on “JavaScript Image Optimiser (JSIO)”

  1. с радостью сообщаю что посыль пришла в мой солнечный городи я рад…не только потому что она дошла а тому что всю длинную дорогу 10днейсо мной оставался на связи магазинработает без всяких проволочекбез гемора свойственного многим магазинамвсё дошло конспирация на наивысшем уровне как и сам магазинребята удачных вам продаж и многолетнего существования https://lissa-shop.ru так всё неоднознанопока на сколько я заметил о приёмах всяких кричат люди у кого порой даже 50 постов нетудак стоит ли таким верить…Но когда брал у данного продавца последний раз на моей посылке был повреждён штрих кодя человек параноидальный подумал мало ли чё там проверили и стало жутковато.А брал то ещё туси а под ней сами понимаите….сразу меня окружили и т.д. и т.п. ХD с тех пор незаказывал тут.Зато качество было хорошееособенно соединение 2п жёсткоеПришол 250 сделал 1к10-12 ппц уносит 250 у вас лучший магазу респект даже не ожидал что такой джив будет 1к10 меньше это ппц..

  8. Фотометрическая лаборатория «Сила Света» выполняет точные светотехнические измерения и выдаёт официальные протоколы с полной юридической силой. На http://silasveta-lab.ru/ доступна проверка подлинности любого протокола по уникальному коду или QR-коду — это исключает подделки и гарантирует достоверность данных. Деятельность лаборатории полностью соответствует нормативным требованиям и подтверждена актуальными свидетельствами о поверке средств измерений.

  9. Современные финансовые технологии открывают новые возможности для тех, кто оказался в сложной ситуации и нуждается в срочных средствах. Онлайн-займы стали настоящим спасением для миллионов россиян: заявка рассматривается за считанные минуты, а деньги поступают на карту практически мгновенно. На платформе https://xn—-7sbujpz2a7c.xn--p1ai/ собраны проверенные предложения от надёжных микрофинансовых организаций с прозрачными условиями. Особенно привлекательно, что новые клиенты могут получить первый займ под 0%, а одобрение возможно даже при непростой кредитной истории. Сервис работает круглосуточно, избавляя от необходимости посещать офисы и стоять в очередях — всё решается дистанционно за 15 минут.

  11. Профессиональная финская химия Teknos — надёжный выбор для долговечной защиты и декоративной отделки дерева. TEKNOL AQUA 1410-01 эффективно предотвращает биопоражения древесины, AQUA PRIMER 2900-02 гарантирует надёжное сцепление слоёв, а лак AQUATOP 2600-94 формирует стойкое защитно-декоративное покрытие. Ищете лучшая краска для фасадных работ? На teknotrend.ru представлен полный ассортимент оригинальной продукции Teknos с оптовыми ценами и быстрой доставкой по Москве и России.

  12. «Элек-Опт» занимается оптовыми поставками электротехники для строительных организаций, профессиональных монтажников и частных заказчиков. Сертифицированная продукция охватывает полный спектр потребностей в электромонтаже и профессиональном освещении. Ищете провода неизолированные мг? Заказать товар с доставкой по России можно на elek-opt.ru — актуальный каталог с быстрым оформлением заказа доступен круглосуточно.

  13. и меня тоже: в любом случае трек получил товар придёт отипшусь. Думаю всё ровно чем ближе к вверху ветка тем старше и выше реппутация у магазина я так понимаю Купить Мефедрон Экстази Кокаин Бошки Гашиш Качественная продукция советую заскочить товар стоит вашего вниманияа я яй я ж отвечаю вам каждый раз как есть возможность пишут много людей одновременно.

  14. Качественные двери – это не только безопасность и комфорт, но и визитная карточка вашего дома. Компания TopLocker предлагает жителям Тулы и области профессиональное решение под ключ: от выбора входных и межкомнатных конструкций до их установки. На сайте https://toplockertula.ru/ представлен впечатляющий ассортимент моделей ведущих производителей – Bravo, Profilo Porte, Stabile Porte, Мариам и других. Здесь вы найдете надежные металлические входные двери с терморазрывом, элегантные межкомнатные варианты из экошпона, массива и эмали, а также современные скрытые системы invisible. Опытные специалисты помогут подобрать оптимальное решение для любого интерьера и бюджета, обеспечив качественный монтаж и гарантию на все работы.

  15. ハイセンシとは シュラウド ヴァロラントの感覚 頂点の精神 ヴァロラントの感覚 これらはすべて当社の Web サイト https://gamersettings.net/ にあります – すべてのイベントの最新情報を入手できる最新情報をお見逃しなく

  16. Планируете поездки по Калининграду на своих условиях? OmegaX сдаёт автомобили в аренду без водителя по честным ценам. Автопарк составляют Renault Logan, Lada Vesta, Volkswagen Polo, KIA Rio — исключительно автоматы. Ищете автопрокат в Калининграде? Подробности и бронирование на omegax39.ru/arenda_prokat_avto_kaliningrad.html — офис находится прямо в аэропорту Храброво. Удобно для тех кто прилетает: забрал машину и сразу в путь.

  17. Группа компаний САФОРА — надежный производитель лакокрасочных материалов, предлагающий профессиональные решения для ремонта и творчества. В ассортименте представлены колеровочные пасты, акриловые эмали с различными эффектами, краски для любых поверхностей, лаки для дерева и стен, а также защитные составы от плесени и гидроизоляция. На сайте https://safora18.ru/ можно подобрать качественные материалы для отделки радиаторов, печей и каминов, найти специализированные художественные краски и лаки для декупажа. Компания также предлагает грунтовки, клеи, монтажную пену и другие строительные материалы собственного производства, что гарантирует стабильное качество продукции и доступные цены для профессионалов и частных заказчиков.

  18. Интересный контент сегодня — это не просто развлечение, а способ узнавать новое каждый день. Сайт https://vseinteresno.com/ собирает познавательные материалы на самые разные темы: наука, история, природа, технологии и необычные факты со всего мира. Читатели находят здесь короткие и ёмкие статьи, которые расширяют кругозор без лишней воды. Если хочется каждый день открывать что-то новое — этот ресурс станет приятной привычкой для любознательного человека.

  19. シャチ 賢い, ドグラマグラ ネタバレ, 徒然草 作者, 詩集 小学生, 詩 短い. あなたはこれまで、こんな疑問を抱いたことがありますか？あるいは、答えがわからない他の疑問は？https://www.daremomiteinai.com/ にアクセスすれば、あなたのあらゆる疑問への答えが見つかります。このサイトは、あなたが答えを知らないかもしれない、重要かつ日常的な疑問に答えることに特化しています。

  22. Откройте для себя удивительную Японию вместе с профессиональным туроператором «МОЙ ТОКИО», который специализируется исключительно на турах в Страну восходящего солнца. Компания предлагает разнообразные программы: от классических экскурсионных маршрутов по Токио, Киото и Осаке до тематических туров по следам аниме, горнолыжного отдыха в Нагано и пляжного релакса на Окинаве. На сайте https://dvmt.ru/ вы найдете готовые групповые туры и возможность создать индивидуальный маршрут с учетом ваших интересов. Туроператор имеет реестровый номер РТО 004645, что гарантирует надежность и безопасность вашего путешествия в эту fascinирующую страну контрастов.

  24. Речные прогулки по Москве давно перестали быть просто экскурсией — теперь это насыщенный вечер с музыкой, шоу и живыми выступлениями на борту. Формат на выбор — дискотеки 80–90-х, DJ-сеты, тематические концерты и элегантные Premium-круизы с ужином — всё это работает ежедневно для любой компании. Ищете расписание теплоходов с музыкой и танцами? Билеты бронируются онлайн на ticketscruise.ru — быстро и без лишних шагов. Особой популярностью пользуется концерт «Хиты Италии» на борту «Ривер Паласа» — отправление с причала Сити-Экспоцентр.

  26. Дали трек… думаю все норм придет Купить Мефедрон Экстази Кокаин Бошки Гашиш Магазин супер.от души мужики все как всегда оплатил поехал забрал 5Как-то развёл 2c-i на кубы воды и выбрал в выборку для точности дозировки.Так один кролятина вляпался в/в.Позавидовать ему трудно былоэто точно.Но в конце когда оклемалсядаже прикололся.

  28. I like how this post encourages discussion in such a smooth and positive way since the ideas are presented clearly and the overall tone makes it easier for readers to share their own perspectives comfortably and thoughtfully. курсы для косметологов

  31. Почему больше не забегаете ? https://wnation.ru Магазину огромное спасибо ЗаУ Данного Магазина я так понимаю Принцип не отвечать в Аське?=)

  34. Интернет магазин пептидов https://gormon.org/ позволяет купить заказать отправить доставкой в любой город России. В наличии популярные пептиды, биорегуляторы, препараты уколы похудение жиросжигание, набор мышечной массы, оздоровление, лечение травм, послекурсовая терапия, пкт, витамины и добавки для роста волос и бороды. Официальный сайт отзывы poleznoo polezno полезно полезноо дешего недорого скидки.

  36. самое норм я думаю лучше лс нет а сайт это вы о нас заботетесь комфорта только себе и клиентам больше а это GUD https://zdorovsarov.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>