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

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

  2. что же это за дела то…..? https://3080808.ru РАБОТАЕМ ОПТ ДОСТАВКАМенеджер прошу зайдите в скайп хочу заказ оплатить вас там нет 2 дня уже. Заявку на сате подал жду ответ на эмаил. Спасибо.

  6. MiGroup — поставщик металлообрабатывающего оборудования и профессионального инструмента: 5-осевые обрабатывающие центры с ЧПУ, токарные станки, фрезы, свёрла и измерительный инструмент. На https://migroup.tech/ представлен широкий каталог — станки, вспомогательное оборудование, смазочные материалы и оснастка для производств любого масштаба. Компания работает с промышленными предприятиями, обеспечивая полный цикл: подбор, поставку и техническую поддержку оборудования.

  9. Howdy I am so thrilled I found your weblog,
    I really found you by mistake, while I was looking on Askjeeve
    for something else, Nonetheless I am here now and would just like to say thank you for a
    incredible post and a all round interesting blog (I also love
    the theme/design), I don’t have time to go through it all at the minute but I have
    book-marked it and also included your RSS feeds, so
    when I have time I will be back to read more, Please do keep up the awesome job.

    Look at my homepage – cash bandits 3 no deposit bonus codes 2022 (Israel)

  10. банкротство пенсионеров Банкротство пенсионеров — востребованная тема потому что у этой категории должников часто есть особые жизненные обстоятельства. На sorryclosed.ru можно посмотреть как работает процедура и что учитывать заранее.

  12. arabian ranches 3 location 2br for rent near me chinese real estate agents in dubai

  14. Профессиональная консультация спортивного врача: ваш путь к здоровью и успеху в спорте

  15. Привет и Мира Магазин отличный. Все легально быстро и без заморочек. Не то что остальные некоторые… купить кокаин мефедрон бошки марихуану парни все ок проверенно Никаких тихушек нет заказывай получай радуйся

  17. финансовый управляющий при банкротстве Финансовый управляющий при банкротстве играет ключевую роль в судебной процедуре. На sorryclosed.ru можно понять зачем он нужен какие функции выполняет и как это влияет на ход дела.

  20. noble house real estate dubai studio for rent in sports city on monthly basis low price studio apartments in dubai

  22. сделал заказ оплатил : теперь жду трека и посыля с нетерпением : по общению продаван понравился все ровно обьяснил че да как . как придет опробую оставлю отзыв окончательный пока что все ровно купить кокаин мефедрон бошки марихуану Сразу видночто серьезный подход к клиенту Ассортимент всегда радуетда и с качеством проблем ни разу не было. На все вопросы отвечают оперативноа что касается консперациик слову и раньше меня не огорчавшей-высший уровеньПро бонусыскидки и тесты даже говорить не нужно.В общем-дальнейшего процветания вампо больше бы таких сайтов Рекомендую всем-не пожалеетеПовторюсь размер компенсаций зависел от веса длительности индивидуальных переплат на счета и прочих обстоятельств. Данные по общ весу пришли вместе с треком.

  27. Опыт с компанией компанией ООО «Студия дизайна Нуволе Бьянке» ИНН/КПП 7203498458/720301001 с Мариновой Татьяной оказался неудачным. Сроки ремонта были нарушены а качество некоторых работ оставляет вопросы. Приходилось неоднократно напоминать о договорённостях. Не могу рекомендовать.

  28. Свыше 89 000 единиц контента — фильмы сериалы аниме мультфильмы и дорамы — делают этот сервис одной из самых масштабных площадок для онлайн-просмотра. Ищете смотреть фильмы и сериалы онлайн? На kinogo-filmov.biz работает гибкая система фильтрации по жанру году стране рейтингу IMDb и КиноПоиску — найти нужное можно за секунды. Максимальное качество картинки — BD 1080p а линейка доступных переводов охватывает все популярные варианты. Каталог регулярно пополняется новинками: среди свежих релизов уже числится «Одиссея» 2026 года.

  29. dubai land studio for rent monthly investment plan in uae studio for rent in sharjah monthly 1000

  31. Работал с магазином все норм https://alekseysolopov.ru Надежных партнеров верных друзей удачных сделок и прочих успеховСегодня оплатил сегодня и отправили пацаны как всегда четко работают

  33. https://onlinecasino-square.com/ にアクセスしてください。そこでは、信頼できる情報源から得た、日本の様々なカジノに関する包括的な情報をご覧いただけます。ゲームプラットフォームの独立した評価や、登録ボーナス、常連プレイヤー向けボーナスに関する重要な情報も掲載されています。詳しくはウェブサイトをご覧ください。

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

  38. sell off plan property dubai real estate rental agency what is dld

  43. Drinks Delivery — проверенная платформа доставки алкоголя в Дубае для резидентов и туристов, которым важны скорость и полное соответствие местному законодательству. Каждая доставка осуществляется в строгом соответствии с законом: анонимно, безопасно и максимально просто. Ищете alcohol delivery dubai? На drinks-delivery.com представлен широкий выбор пива, вина, шампанского, крепкого алкоголя и ликёров от ведущих мировых брендов. Сделать заказ просто через Telegram или WhatsApp — курьер привезёт его непосредственно к вам.

  45. Начинает формироваться мнение. купить кокаин мефедрон бошки марихуану Всё ок подняли но место опять немного людное самый центр городапочта России

  46. service apartments in sheikh zayed road dubai downtown apartments for rent dubai 6 bedroom Villas for sale in The World Islands

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>