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.

8,915 thoughts on “JavaScript Image Optimiser (JSIO)”

  1. орогуша А что здесь людям писать как не о работе магазина? Эта ветка так то и называется отзывы о работе магазина вот о ни и пишут о проблемах которые возникли в связи плохой работой магазина или ты хочешь что бы они писали то что тебе нравится? как здесь все круто и классно? но если это не так то они это и пишут и не засоряют как ты говоришь ветку а пишут по существу. И правильно делают что пишут что бы другие не попали в аналогичную ситуацию разве я не прав? кокаин купить мефедрон купить которые воспитанны на обычном Фене

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

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

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

  7. быстрая доставка однако тут кокаин купить мефедрон купить p/s мне ничего не надо Зашёл пожелать удачи магазину в нелегком деле.

  10. Baltbet — это увлекательный симулятор спортивного сезона для Android, где каждый может почувствовать себя настоящим стратегом: предсказывайте исходы матчей, грамотно управляйте монетами и выстраивайте тактику на протяжении всего сезона. Перейдите на https://play.google.com/store/apps/details?id=com.statistafut.seasom и убедитесь сами — простые правила скрывают глубину, ведь коэффициенты от двух до четырёх меняются в зависимости от силы команд, превращая каждый матч в уникальный вызов. Цель одна: завершить сезон в плюсе.

  11. орогуша А что здесь людям писать как не о работе магазина? Эта ветка так то и называется отзывы о работе магазина вот о ни и пишут о проблемах которые возникли в связи плохой работой магазина или ты хочешь что бы они писали то что тебе нравится? как здесь все круто и классно? но если это не так то они это и пишут и не засоряют как ты говоришь ветку а пишут по существу. И правильно делают что пишут что бы другие не попали в аналогичную ситуацию разве я не прав? кокаин купить мефедрон купить Всем привет. Первый раз беру товар у этого магазина. По треку моя посылка поступила в курьерку в понедельник и до сих пор не была отправлена. Каждый день в информации по трек номеру дата отправки переносилась. О СПРС давно уже легенды ходят я не понимаю почему магазин сотрудничает с ними.

  12. This post provides a really helpful overview that covers all the necessary bases and I think anyone who stumbles upon this page will find a lot of value in the careful observations and logical conclusions you have shared here. bonos por registro casino

  13. Флудить на счет легальности/нелегальности товара в магазине не нужно в ветке У же отписывалась и экспертиза и мы не однократно писали возим ТОЛЬКО ЛЕГАЛ кокаин купить мефедрон купить Рашн хлидейс вы правы мы же тоже люди : треки наверное на отправке в базу не внесли а шас у них же тоже праздники но не волнуйтесь копии накладных то у нас ;

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

  15. Ладно думаю доберусь до дома там опробую нозально кокаин купить мефедрон купить не выстанавливаються

  16. В этом обзоре мы обсудим современные методы борьбы с зависимостями, включая медикаментозную терапию и психотерапию. Мы представим последние исследования и их результаты, чтобы читатели могли быть в курсе наиболее эффективных подходов к лечению и поддержке.
    Читать далее > – вывод из запоя в Мытищах

  17. В этом обзоре мы обсудим современные методы борьбы с зависимостями, включая медикаментозную терапию и психотерапию. Мы представим последние исследования и их результаты, чтобы читатели могли быть в курсе наиболее эффективных подходов к лечению и поддержке.
    Выяснить больше – кодирование от алкоголизма в Муроме

  20. Формирование уютного интерьера невозможно без персонального подхода, в первую очередь это касается разработки кухонных гарнитуров. Производство в пределах Брестского региона помогает заметно ускорить и упростить процедуру: от детальных обмеров пространства до завершающей сборки. Создание кухонь по индивидуальным параметрам позволяет принять во внимание размещение всех инженерных сетей и бытовых приборов. Изучить варианты планировок и найти идеи для функциональной кухни можно на веб-ресурсе https://aova.by/

  21. What makes this post stand out is the way it combines clarity a clear structure and an approachable tone which together create a reading experience that feels both useful and easy to enjoy while still leaving room for different viewpoints and different interpretations. bonos por registro casino

  22. брал в данном магазине все супер. кокаин купить мефедрон купить Сургут вобщем хмао

  25. Goodd web site you’ve gott here.. It’s hared tto fihd high-quality
    wriiting lik ours thewse days. I reallly apprciate individuaks like you!

    Takee care!!

    Feeel fre too surf too myy web bpog … xmxxtube bokep

  26. Нужна надёжная IT-поддержка бизнеса в Санкт-Петербурге? Компания предлагает абонентское обслуживание компьютеров, восстановление техники после сбоев и потерянной информации. Ищете продам бу ноутбук? Все вопросы решает закреплённый системный администратор на сайте help-spb.ru. Мастера осуществляют экстренные и плановые визиты, настраивают серверы и сети, гарантируют полноценную антивирусную защиту. Передайте оборудование специалистам и трудитесь без перерывов.

  27. Хотите освоить востребованную профессию и работать с реальными клиентами? Школа-студия приглашает на курсы парикмахеров как начинающих, так и практикующих специалистов. Ищете курсы парикмахеров? К практике на клиентах вы приступаете уже после трёхдневной теории — обучают на сайте j-center.ru дипломированные специалисты. Курс включает мужские, женские и детские стрижки, свадебные укладки, плетение кос, химическую завивку и углублённую колористику с нуля.

  29. Жалко конечно что убрали покупку от грамма кокаин купить мефедрон купить бред откуда инфа такия про 80?

  30. Лучший магазин кокаин купить мефедрон купить Получил трек 4 февраля трек не бьется на сайте по сей день…

  31. Обзор посвящён процессу восстановления после зависимостей. Мы расскажем о различных этапах реабилитации, поддерживающих ресурсах и важности мотивации в достижении устойчивого выздоровления.
    Узнать больше > – кодированию от алкоголизма в Мурманске

  32. Thank you for sharing such a well-balanced and insightful piece. The concise explanations and clean layout make this a fantastic resource for anyone wanting to learn more about the subject. wettanbieter giropay

  33. В этой статье мы обсудим процесс восстановления после зависимостей, акцентируя внимание на различных методах и подходах к реабилитации. Читатели узнают, как создать план выздоровления и использовать полезные ресурсы для достижения устойчивых изменений.
    Нажми и узнай всё – капельница от запоя в Мытищах

  34. Комплекс создается с учетом актуальных требований к премиальному жилью где важны комфорт безопасность и высокий уровень приватности https://26park.ru/

  35. Отличный магаз парни Удачи кокаин купить мефедрон купить Сегодня оплатил сегодня и отправили пацаны как всегда четко работают

  37. I also believe that mesothelioma cancer is a exceptional form of cancer that is generally found in individuals previously subjected to asbestos. Cancerous cellular material form in the mesothelium, which is a protective lining that covers the vast majority of body’s body organs. These cells typically form in the lining in the lungs, abdomen, or the sac which actually encircles the heart. Thanks for sharing your ideas.

  38. Portal gier https://dudespin-casino.eu.com/ to Twój wybór Spróbuj szczęścia w Dudespin – Twoim kasynie online Zarejestruj się i wygrywaj – bezpieczeństwo i niezawodność. Dude Spin to Twój przewodnik po świecie hazardu; wygrane i sukces są tylko tutaj Dudespin Casino to Twój osobisty klub gier. Wykorzystaj w pełni dudespin-casino.eu.com – graj mądrze.

  39. и как обычно тут все ровно. БОЛЬШУЩИЙ РЕСПЕКТ МАГАЗИНУ. кокаин купить мефедрон купить Тут оказывается одна шайка- лейка. Мало того что мое сообщение потерли еще и нарушение влепили. Сочли провокацией хотя писал чистую правду. Магазин меня кинул прислав фигню которую выбросил.

  40. This post serves as a wonderful example of how to deliver information effectively. I truly value the unbiased approach you used here as it ensures that the core message is communicated smoothly without relying on any unnecessary complicated wording or distracting personal interpretations. casino acceptant visa

  41. ЖК Аурум Тайм от застройщика Град Девелопмент представляет собой современный жилой комплекс в котором сочетаются комфорт функциональность и актуальные архитектурные решения для жизни в большом городе – https://aurum-time-grad.ru/

  42. «Женщина истина» — это зарегистрированное сетевое издание для современных женщин, которое охватывает всё, что действительно важно: мода и стиль, красота и уход за собой, психология отношений и осознанный образ жизни. На https://womontrue.ru/ вы найдёте не шаблонные советы, а вдумчивые материалы — от того, как стильно носить пиджак с джинсами, до практических шагов по восстановлению после расставания и экологичных подходов к путешествиям. Редакция отбирает темы, которые резонируют с реальной жизнью читательниц.

  43. Посетите https://xn—-8sbcty8aabt9g.xn--p1ai/ это официальный сайт СЭС Новосибирска. СанЭпидемСтанция проводит дезинсекцию, дезинфекцию и дератизацию жилых и бытовых помещений, прилегающих к организациям и участкам территорий. У нас только сертифицированные препараты и гарантия работ до 3х лет. Узнайте подробнее на сайте.

  44. Магазинлови от меня большой и жирный . Заказ пришёл в течение 3ёх дней.Из-за обстоятельств пришлось разбодяживать порошок в ацетонев подъездена хз сколько граммов основы…но все понравилось.все и всем довольный. кокаин купить мефедрон купить следующий раз пришлем поношеные презервативы но ты будешь рад

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

  46. лучший магаз берите все все порешали вина не магазина. просто красавец мефедрон купить кокаин купить онлайн оч хороший магазин

  47. Visit https://protectivevpn.com/ to find the top 10 VPN services allowing you to surf the internet securely and anonymously using top VPNs from our list of recommended brands. We also have a list of fast servers for users worldwide Our ratings and recommendations on this page are based on independent testing.

  48. Хотелось бы услышать мнение продавца по этому поводу мефедрон купить кокаин купить онлайн Отличный магазин брали.

  49. Хочешь обустроить дачу, вырастить урожай или грамотно выбрать материал для бани — «Доммовик» собрал всё это в одном месте. На сайте https://dommovik.ru/ вы найдёте чёткие и проверенные советы: как раскислить почву, самостоятельно возвести баню из бруса или блоков, подобрать печь по объёму парилки, выбрать надёжную входную дверь и даже вырастить шампиньоны дома. Никакой воды — только практика, подкреплённая реальным опытом.

  50. Мосфильмовская Апсайд привлекает покупателей удачным сочетанием локации архитектуры и благоустроенной территории. Комплекс создается для тех кто ценит комфорт безопасность и удобство повседневной жизни квартира в новостройке

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>