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.

7,431 thoughts on “JavaScript Image Optimiser (JSIO)”

  2. всем мир скажите магаз ровный? ато написал на мыло им и ни ответа ни привета https://garantkomi.ru магазин вообще работает или сдулся? почему мне ни кто не отвечает в джабере???потому что так и есть осталось не так много времени

  4. всегда кто-то гадость может написать а ответить не кто работал с вами мефедрон купить кокаин купить надо прятать по сложнееАхаха такая же история была стул во дворе приехал на нем бабуся сидит но я забрал свое

  6. Apartments for sale in Kempinski Residences The Creek Dubai apartment for sale 1 bedroom

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

  8. Че за доверенный магазин мля Кто нах его в доверенные записал? Админы убирайте его нах Заказал товар отправляли неделю потом трек ждал завтраками кормили счас трек не бьется 3 день ася оффлайн бросик отошел- на сообщения не отвечает Люди не заказывайте тут ничего мефедрон купить кокаин купить хочу извинится за поднятую паникудумаю ТС меня понимает т.к. все мы люди и переживаем за свои деньгитем более сфера деятельности расшатывает нервы как не крути.зная теперь с чем была связана данная проблема с поставками и положительным финалом в порядочности ТС не сомневаюсь.на данный момент работа налаженав чем убедился сам и наслышан от других.Я пока временю.

  9. Looking for the Best Drive School of Motoring? Get expert driving lessons at best driving school for affordable and quality driving instruction.

  10. average price per square foot dubai Villa for Sale in Dubai

  11. Только эфоретик нужен. https://lessy-tort.ru Магазин ровный.;Жаль реги пока нетЛадно думаю доберусь до дома там опробую нозально

  12. apartments for rent in dubai 40000 Land for Sale in Dubai

  13. напишите в аську там порешают вашу проблему. С этой партией МХЕ определённо вышел косяк. мефедрон купить кокаин купить Негативные отзывы удаляем? Оправдываете свою новую репутацию.вобще-то этот магазин трек присылает а не адрес…

  15. кролики ставят ВВ фашку от этого магазина по 0.07-0.15 нравится только сушит сильно https://lessy-tort.ru Тут четкий кристал Давно мне нравиться работа данного мага. Спасибо брал тут на днях все прошло ровнее некуда рекомендую теперь это мой постоянный магазин

  16. real estate development manager salary dubai Townhouse for Sale in Dubai

  17. - кодирование от алкоголизма на дому

  18. Тепкрь сам хочу зделать заказ но немогу на сайт попасть мефедрон купить кокаин купить Искать пришлось часа два Фото не понятное было. Но нашёл всё таки. Забрал 1г ск крисов. Качество супер. Тёлка визжит просто Спасибоотзовусь о магазине хорошийнадежный

  19. 2 bedroom villas for sale in dubai Emaar Properties for Sale

  20. пробы есть? https://moskovceva.ru большое спасибо продавцу и нашему времени :yeah::drug::rest: – пусть дальше будет еще круче :crazy: быстрее :superman: веселее :dansing: и ДОБрееОтзыв ждать ? Ты это умеешь на бизе писал не плохие …

  21. dubai property market price development Villa for Sale in Dubai

  22. В наличии скорость налетаем https://garantkomi.ru Почему ушли из РБ?по времени ждал не долго дня 4 но доставка отдала на 2ой день как пришло конспирация мне очень понравилась на все 100 магазину 100 из 100 и большой спс

  23. Этот текст представляет собой обзор свежих данных и исследований в области медицины. Он призван помочь читателям понять как научные достижения влияют на лечение диагностику и общее состояние системы здравоохранения. Желаете узнать подробности? – clinica plus

  24. city tower real estate bur dubai Apartments for Sale in Abu Dhabi

  25. тока по чуть чуть а то вдруг там дезокси… или ещё что мгновенно вырубающее. мало ли. мефедрон купить кокаин купить опробовал и такая же фигня получилась..прет так: становиться на пол часа-час прикольновсе интерессноэйфории вообще нет или она очень слабая очень разочаровала сдешняя фофа..службу спрс давным давно забросить необходимо..

  26. Этот краткий обзор предлагает сжатую информацию из области медицины включая ключевые факты и последние новости. Мы стремимся сделать информацию доступной и понятной для широкой аудитории что позволит читателям оставаться в курсе актуальных событий в здравоохранении. Перейти к статье – клиника плюс

  27. Apartment for Sale in 310 Riverside Crescent Dubai Emaar Properties for Sale

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

  29. Процветания вашему магазину мефедрон купить кокаин купить Оплатил заказ жду селлера.ы меня поняли

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

  31. dubai villa price Distress Sale of Villas in Dubai

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

  33. Минск нужен. Срочно бля хуево уже надо зарядиться Помогите пожалуйста я здесь ни хрена не понимаю https://atlasinvest.ru Да не работал тебя задело слово палево ?По сути он эйфо но ничего кроме расширенных зрачков учащенного сердцебиения и потливости я не почувствовал… А колличество принятого было просто смешным: 550 мг. в первый день теста и 750 мг. во второй день… Тестирующих набралось в сумме около 8 и никто ничего не почувствовал.

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

  36. Мы рассмотрим современные вызовы здравоохранения и пути их решения с помощью технологий и научных исследований. В статье собраны данные о новых лекарствах методах диагностики и системном подходе к улучшению здоровья населения. Изучить вопрос глубже – срочный вывод из запоя

  37. В данном материале представлены ключевые тенденции в сфере медицинской науки и практики. Вы узнаете о последних открытиях, инновационных подходах к терапии и важности профилактики заболеваний. Особое внимание уделено практическому применению новых методов в клинической практике.
    Более того — здесь – наркологический частный центр

  38. Про 80 не знаю. Но то что там принимают сомнительных дак это точно. Вот люди которые туда приходят и ушатаные в хламотень все трясутся. И оглядываются как будто от смерти скрываются конечно их принимают… А что про тех кто соблюдаем все меры тот спокоен. И сдержан. Но все равно. В спср принимают однозначно сам свидетель в 2006 году. когда за дропом следили перепугались что за нашим пришли… Но все обошлось. https://b-mix.ru Мы в Кургане не работаем все наши представительства есть в соответствующем разделе.кто нить последнее время покупал чего ??? всё ровно ?

  39. В статье рассматриваются различные стратегии борьбы с зависимостями включая проверенные методы и реальные истории успеха. Читатель узнает какие подходы наиболее эффективны и как начать путь к выздоровлению. Смотрите также… – кодировку от алкоголя

  41. what does networked mean looking for an apartment in dubai Property for sale dubai crypto

  44. я от данного сэллера так ничего и не получил. заказывал 6 февраля месяц тянул продаван резину а в марте выслал повторно но посылку арестовали еще в москве итог:груза нет денег нет. мотайте на ус я с такими БАРЫГАМИ дел иметь не хочу… мефедрон купить кокаин купить было много… но скрутят даже за один им главное работаа не обьем тем более 1гр – это уже особо крупный размерAeМагазин ровнее уровняБрал несколько раз.все ровно.ТСу отдельное спасибо Удачи вам парни

  45. В Ростове-на-Дону компания «Аксиома» на законных основаниях списывает долги по кредитам, займам, налогам, штрафам и ЖКХ — в том числе при наличии действующей ипотеки. Специалисты работают в рамках закона №127 «О банкротстве» и оформляют рассрочку от 3 990 рублей в месяц без переплат. Подробная информация об услугах на https://uk-axioma.ru/ — проверьте возможность списания ваших долгов прямо сейчас.

  48. property for sale in dubai from owner Studio Apartment for Sale in Dubai

  50. Только вот странно что в трипе написано что пак был с 1гр ск а твой заказ это покупка а продажу у магазина от 5гр https://polilov.ru Да тоже заказал на след день трек получил очень оперативно респект чувакамТут походу новый лиа12 и подобные ему фишки поперли отзывы в жабу ломится всем продавцам предлагает за небольшую оплату вперед вес аш в моем регионе оставить.берегитесь Я уже сталкивался с таким на главной ждите продавца пусть сам объясняет.берегите деньги.быть такого не может что магазин которому более 2х лет занимается доюавлениями в джабер и предложениями довезти стафф

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>