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

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

  2. Капельница от похмелья — это медицинская процедура, направленная на быстрое восстановление организма после алкогольной интоксикации. Ее состав подбирается индивидуально с учетом состояния пациента, степени обезвоживания, выраженности симптомов и наличия сопутствующих заболеваний. В отличие от самостоятельных попыток «отпиться» или принять таблетки, внутривенное введение растворов позволяет действующим веществам сразу поступать в кровь, минуя желудочно-кишечный тракт, что обеспечивает более быстрый и выраженный эффект.
    Ознакомиться с деталями – капельница от похмелья на дому в самаре

  4. Нарколог на дом в Воронеже с круглосуточным вызовом врача стабилизацией состояния и лечением в наркологической клинике «Частный медик 24» Углубиться в тему – http://narkolog-na-dom-voronezh-2.ru

  6. А вот еще немного…Вскрыл взвешал – все в норме. для начала взял 1гр.растворяется АМ2233 в спирту хреновов след.раз попробую на растворителе сделатьпричем грел все это дело на водяной банемешално до конца так и не растворилось.делал это долго и упорномолочного оттенка раствора не наблюдалосьпрозрачный скореено остался осадок в виде белого порошка.В итоге так и залил все это дело 1к20. Сушится теперь. Как высохнет опробуем и напишу что получилось. Буду надеятся на лучшее. https://arsenal38.ru ВЫ ЛУЧШИЕСкоро новые вкусности уууу…. ждем

  8. Добро пожаловать в blacksprut Marketplace Крупнейшее в России сообщество любителей марихуаны и грибов приветствует новых друзей ? Сотни магазинов с оптовыми и розничными предложениями рады показать вам новый уровень отношения к каннабису и грибам. bs2best at blsp at bs2best ссылка

  9. Вывод из запоя на дому в Санкт-Петербурге с инфузионной терапией и контролем состояния пациента в наркологической клинике «Частный медик 24» Ознакомиться с деталями – вывод из запоя на дому санкт-петербург

  12. В Нижнем Новгороде стационарное лечение используется при наличии факторов которые увеличивают риск осложнений или делают домашний формат недостаточным особенно при алкоголизме или тяжёлом состоянии больного. Врач принимает решение на основе осмотра консультации анализа данных и оценки симптомов и динамики состояния пациента. Основная цель — обеспечить безопасность человека и создать условия для контролируемого лечения алкоголизма. Получить дополнительную информацию – https://vyvod-iz-zapoya-v-staczionare-nizhnij-novgorod-1.ru/

  13. Вывод из запоя в стационаре — это медицинская помощь при которой лечение проводится в условиях постоянного врачебного контроля и поэтапной стабилизации состояния. Такой формат применяется когда состояние пациента требует наблюдения и быстрого реагирования на изменения. В наркологической клинике «Частный медик 24» в Нижнем Новгороде лечение выстраивается на основе клинической оценки и последовательного подхода: каждый этап направлен на достижение конкретного результата без избыточной нагрузки на организм. Получить дополнительную информацию – вывод из запоя в стационаре нижний новгород

  14. Этот процесс не занимает много времени — обычно процедура длится от 30 до 60 минут. Важно что врач контролирует все этапы обеспечивая безопасность пациента и корректируя терапию по мере необходимости. Такой подход позволяет быстро и эффективно облегчить симптомы похмелья и вернуться к нормальной жизнедеятельности. Углубиться в тему – капельница от похмелья на дом в самаре

  18. SmartElectron реализует проекты любой сложности в сфере разработки и производства электронных приборов и устройств. Специалисты берутся за проект с нуля: составляют техническое задание, разрабатывают схемотехнику, проектируют печатные платы и готовят документацию для серийного выпуска. Подробный каталог услуг и реализованных проектов представлен на https://smartelectron.ru/ — здесь можно оценить масштаб и уровень компетенций команды. Компания передаёт клиенту готовую документацию и гарантирует техническую поддержку на каждом шаге серийного производства. Подобная модель работы исключает потерю качества и обеспечивает надёжность выпускаемой электроники в течение многих лет.

  19. 2.Почему на сайте нет ниодного упоминания о ритейлев то времякак заказы надо делать через него? https://alekseysolopov.ru магазин роботает отлично сам проверил и не поверю не каму кто скажет что это не такОТЛИЧНЫЙ МАГАЗИН ВСЕ НА ВЫСШЕМ УРОВНЕ

  21. Турецкая мелодрама «Постучи в мою дверь» 2020 года — романтическая история с искромётным юмором и настоящей химией между героями. Целеустремлённая студентка и холодный успешный бизнесмен заключают дерзкую притворную сделку — и с этого момента их жизнь перестаёт подчиняться чужим правилам. Ищете постучись в мою дверь смотреть онлайн? Все 161 серию двух сезонов смотрите бесплатно на postuchis-v-moyu-dver-smotret.biz с профессиональной озвучкой в хорошем качестве. Притворство уступает место настоящим эмоциям: герои снимают маски, открывают свои раны и учатся доверять друг другу вопреки всему прошлому.

  23. Выбор краски для стен — задача, от которой напрямую зависит уют и долговечность вашего интерьера. Профессионалы советуют отдавать предпочтение латексным и акриловым составам: они легко наносятся, быстро сохнут и устойчивы к влажной уборке. Для кухни и ванной подойдут моющиеся краски с антигрибковыми добавками, а для спальни и гостиной — матовые дышащие составы, скрывающие мелкие неровности. Развёрнутые советы по выбору и подробный обзор популярных брендов вы найдёте на https://stroy-m2.ru/chem-pokrasit-steny-v-kvartire/ — ресурсе, где собраны актуальные рекомендации от строительных экспертов. Здесь же можно подобрать все необходимые материалы: от грунтовок до финишных покрытий, с доставкой и профессиональной консультацией.

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

  26. Студия Standard-Landing.com работает с 2010 года: разрабатывает продающие лендинги и профессионально настраивает Яндекс Директ с упором на реальные конверсии. За годы работы студия реализовала свыше 1500 проектов, цель каждого — привести в бизнес платёжеспособных клиентов. Ищете заказать сайт лендинг? На standard-landing.com можно заказать лендинг, настройку рекламы, SEO-продвижение, написание текстов и изготовление логотипов. Аналитика и постоянная оптимизация трафика позволяют команде выжимать максимум результата из каждого рубля рекламных вложений.

  27. Наркологический стационар в Санкт-Петербурге: круглосуточная помощь лечение зависимости и восстановление в наркологической клинике «Похмельная служба» Изучить вопрос глубже – лечение в наркологическом стационаре санкт-петербург

  28. Капельница от похмелья в Воронеже с индивидуальной инфузионной терапией и врачебным контролем в наркологической клинике «Похмельная служба»
    Получить дополнительные сведения – капельница от похмелья на дом воронеж

  29. Лечение в наркологическом стационаре в Санкт-Петербурге включает в себя комплекс мероприятий, направленных на восстановление физического и психического состояния пациента. Важно понимать, что лечение зависимости — это многогранный процесс, включающий не только медицинские процедуры, но и длительную реабилитацию, которая помогает человеку вернуться к нормальной жизни. В стационаре пациенты получают круглосуточное наблюдение, что значительно увеличивает шансы на успешное лечение и предотвращение рецидивов.
    Получить дополнительную информацию – http://www.domen.ru

  31. друзья всем привет брал через данный магазин порядком много весов скажу вам магазин работает ровнечком адрики в касание просто супер доставка работает на сто балов четко успехов вам друзья и процветания https://art-melodika.ru Скрины с радикала не грузятся. Увы сейчас доказать что-либо сложно видимо магазин не первый раз кидает уже по отточеной цепочке.у СПСР постоянно такая хрень порой по неделе не пробиваются трекипроверено на себе… тоже срал кирпичамина рафика причем а говорят быстрей ЕМС. не верю

  32. cheap condo room for rent singapore Studio Apartment for Rent Singapore apartments for rent singapore

  35. Капельница от похмелья — это медицинский способ восстановления организма после алкогольной интоксикации который позволяет быстро устранить симптомы и нормализовать состояние. В отличие от домашних методов инфузионная терапия воздействует на причину ухудшения самочувствия а не только на внешние проявления. В наркологической клинике «Похмельная служба» процедура проводится с участием врача который контролирует состояние пациента на каждом этапе. Получить дополнительную информацию – kapelnicza-ot-pokhmelya-voronezh-6.ru/

  37. Южнокорейский сериал «Милый дом» — жёсткий и атмосферный хоррор-триллер, который захватывает с первых минут. Необъяснимая эпидемия делает из людей монстров, олицетворяющих их скрытые комплексы и ужасы. Одинокий подросток Чха Хёнсу попадает в окружённый многоквартирный дом, где соседи внушают не меньший страх, чем монстры снаружи. Ищете сериал милый дом? Все три сезона доступны на milyy-dom-smotret.net — смотреть онлайн бесплатно в высоком качестве с профессиональной озвучкой. Проект виртуозно объединяет психологическую драму, экшен и фантастику, не отпуская зрителя до последней минуты.

  38. VPN Alcohol Dubai — сервис доставки алкоголя в Дубае для тех, кто ценит скорость, дискретность и широкий ассортимент без лишних вопросов. В ассортименте представлены виски, коньяк, водка, джин, текила, ром, вино и шампанское от ведущих производителей мира. Ищете delivery drinks dubai? На dubaialco.ru можно выбрать и оформить заказ в несколько кликов — доставка осуществляется быстро и конфиденциально. В числе фаворитов — Hennessy XO, Patron Silver, Blue Label и Bacardi по привлекательным ценам.

  40. Тусишки рекомендую дозу от 25 мг. https://9et.ru про тусиай ….. что я могу сказать про тусиай от этого магазина…. пойду лучше трип-реппорт напишу…. такой тусишки ещё не елтусишка хороша я как го грешил что нирвановская была какая то тёмная так вот у чемикала она вообще практически бежевая :D качество порадовало хорошая вещь

  42. Запойное состояние сопровождается выраженной интоксикацией, нарушением сна, слабостью и тревожностью, что характерно для алкоголизма и различных форм зависимости. При этом самостоятельный выход из него часто затруднён из-за ухудшения самочувствия и отсутствия контроля над симптомами. Выезд нарколога позволяет быстро стабилизировать состояние человека и начать восстановление без дополнительной нагрузки, связанной с поездкой в клинику, а при необходимости вовремя определить показания к лечению в стационаре.
    Подробнее – вывод из запоя на дому анонимно в санкт-петербурге

  43. are penthouses good investments in singapore Buy Property in Singapore for Foreigners penthouse price singapore

  44. Запой сопровождается интоксикацией, нарушением сна, слабостью, тревожностью и нестабильностью работы сердечно-сосудистой системы, что характерно для алкоголизма и других форм зависимости, включая наркомании. При этом самостоятельный выход из состояния может сопровождаться усилением симптомов, что требует медицинского вмешательства. Капельницы на дому позволяют очень быстро снизить выраженность проявлений и начать восстановление под наблюдением врача, помогая человеку стабилизировать состояние.
    Подробнее тут – вывод из запоя на дому круглосуточно в санкт-петербурге

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

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

  49. Капельница от похмелья в Нижнем Новгороде: снятие симптомов похмелья, восстановление и поддержка под наблюдением врачей в наркологической клинике «Похмельная служба»
    Узнать больше – http://www.domen.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>