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

  1. 1 bedroom condo singapore Buying Commercial Property Singapore room for rent in landed property singapore

  2. Дубай удивляет контрастами, и купить качественный алкоголь здесь оказывается куда легче, чем ожидаешь. Ищете delivery drinks dubai? Сервис dubaishopdrinks.ru предлагает быструю и бесплатную доставку спиртных напитков прямо до вашей двери — без очередей, лишних вопросов и бюрократии. Ассортимент охватывает всё необходимое: виски, коньяк, текила, водка, вино и шампанское от ведущих мировых производителей по доступным ценам. Заказ оформляется онлайн в несколько кликов, а доставка работает круглосуточно — идеальное решение для туристов и резидентов.

  4. У данного сллера только легал. Все проверено. https://studiostitch.ru бро а эффект очень слаб?единственная существенная проблема данного магазина – отсутствие автоматизированной системы оформления заказов… Вроде прикручивают к сайту но что то долго уже…

  6. Потеря близкого человека — одно из самых тяжёлых испытаний в жизни, и достойная память о нём заслуживает особого внимания. Салон камня «ДМ» во Владимире уже 19 лет создаёт гранитные памятники и мемориальные комплексы, воплощая в камне тепло и уважение к ушедшим. Более 2000 реализованных проектов, собственное производство с современными фрезеровальными и гравировальными станками — всё это гарантирует безупречное качество. Познакомиться с каталогом из пятисот образцов и воспользоваться удобным онлайн-конструктором можно на сайте https://pamyatniki-vladimir.ru/ — здесь же легко оформить заказ и получить бесплатную консультацию. Компания работает строго по договору, без скрытых платежей, а на установку даётся уникальная для региона гарантия — 5 лет.

  7. Запрос на выезд врача связан не только с классическим запоем. На практике домашняя помощь нужна в разных ситуациях когда организму уже трудно компенсировать последствия употребления а откладывание визита увеличивает риск осложнений. Выяснить больше – запой нарколог на дом

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

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

  12. Алко Маркет Дубай — специализированный интернет-магазин доставки алкоголя в Дубае для туристов и экспатов. Каталог охватывает более 75 позиций: водка, виски, вино, шампанское, коньяк, текила, джин, ром, ликёры, пиво и бризеры — всё от проверенных мировых брендов. Ищете alcohol delivery dubai? Заказы оформляются через alkomarketdubai.ru напрямую через WhatsApp без лишних формальностей. Доставка осуществляется быстро и конфиденциально — с учётом местного законодательства ОАЭ.

  14. cheapest landed house in singapore 4 Bedroom Condo for Sale Singapore condo unit for sale in singapore

  15. Детоксикация на дому начинается с осмотра пациента. Доктора оценивают витальные показатели уровень сознания и выраженность симптомов анализируя текущие данные. После этого формируется план лечения который реализуется сразу. Такой подход позволяет сократить время до начала терапии и повысить её эффективность. Получить дополнительную информацию – вывод из запоя на дому

  16. «Запретный плод» — турецкий сериал 2018 года: шесть захватывающих сезонов интриг и запретных страстей в декорациях роскошного Стамбула. В центре сюжета две сестры: принципиальная Зейнеп строит карьеру честным трудом, а Йылдыз готова рискнуть всем ради попадания в высший свет. Ищете запретный плод смотреть онлайн? Все 177 серий с профессиональной озвучкой смотрите бесплатно на zapretnyy-plod-smotret.online в хорошем качестве. Влиятельная Эндер — властная и беспощадная — втягивает Йылдыз в опасную авантюру с одной целью: уничтожить репутацию собственного мужа. Сестёр разлучают не только обстоятельства, но и моральный выбор, который каждая делает по-своему.

  17. Магазин кидает. Буду писать пока не дадут адрес в ПМ. Прошу там же помочь админов. https://bio-tune.ru не будет 307го. ожидается 203 250 rcs-4 и 1220й… вот что мне сказали в той же аське где спрашивал ты Рады вашей работе

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

  24. can singapore citizen buy property in india Commercial Property for Sale Singapore biggest landed house in singapore

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

  26. Капельница от похмелья с мягким восстановлением — это метод направленный на быстрое восстановление организма после алкогольной интоксикации при котором используется более щадящий подход. В отличие от стандартных капельниц целью которых является быстрый вывод токсинов из организма капельница с мягким восстановлением действует постепенно восстанавливая водно-солевой баланс и поддерживая внутренние органы без перегрузки организма. Эта процедура особенно полезна тем кто предпочитает не только избавиться от похмелья но и почувствовать себя восстановленным и энергичным при этом помощь может оказываться при запое когда врач выезжает на дом для лечения алкоголизма. Подробнее можно узнать тут – https://kapelnicza-ot-pokhmelya-samara-12.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>