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

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

  4. united kingdom casino no deposit bonus 2021, united kingdom tax can you gamble
    at a casino (Sondra) winnings and yukon gold
    casino, or new 2021 usa casinos online

  6. Ребята хватит писать бред про арестованные посылки продавец ни в чем не виноват Берите закладками Продавец выполняет свою работа на 100 с ним всегда все четко даже подарок сделал ко дню рождению Бро ты лучший купить Мефедрон Бошки Гашиш Марихуану Альфа-ПВП Брали ни один раз в последний раз было несколько косяков. Всё разрешилось вчера плюс бонус за предыдущий косяк.

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

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

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

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

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

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

  13. statistics of gambling in canada, are there casinos in saskatchewan united kingdom and no deposit cash bonus hard
    rock casino in cancun mexico (Nannie) canada,
    or niagara falls usa casino

  14. live poker uk 2021, online casino no deposit bonus no download instant
    play united states and best pokies united kingdom, or trusted casino online
    usa

    Also visit my blog post gold miner pokie machine – Trudi,

  17. KingSize вас не отловить нигде в аське нету на страницу прайс не заходите откликнитесь пожалуйста купить Мефедрон Бошки Гашиш Марихуану Альфа-ПВП Ровный магаз фарта и одекватных клиентов

  19. casino london uk, free spins sign up casino australia and australian prime minister blackjack, or online slots guide uk

    Also visit my blog post irs form 1099 gambling winnings (Jame)

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

  23. Арендовать яхту в Адлере можно для проведения корпоративного мероприятия. Такой формат помогает создать непринужденную атмосферу и подарить участникам яркие эмоции: арендовать яхту в Адлере

  24. курьерки на мой запрос поиска трека ответ что инфа закрыта для доступа купить Мефедрон Бошки Гашиш Марихуану Альфа-ПВП раньше и хуй крепче был и бабы красивей

  25. Заказал получил трэк ждем купить Мефедрон Бошки Гашиш Марихуану Альфа-ПВП Уважаемы участники форума

  26. Спасибо будем работать тогда тоже купить Мефедрон Бошки Гашиш Марихуану Альфа-ПВП Раньше розницей занимались благодаря вашему опытусейчас время другоестабильная честная работа

  27. ОО мне то же все пришло купить Мефедрон Бошки Гашиш Марихуану Альфа-ПВП Выстовляет Эскимос список тестеров в Списке сверкает мой ник bob marli

  29. Casino platforms regularly expand their game libraries with new titles featuring innovative gameplay unique themes and advanced visual effects: Goldenbet Casino

  31. На ацетоне делай он быстро выветривается и не пахнет совсем купить Мефедрон Бошки Гашиш Марихуану Альфа-ПВП По моему отзыв о марочках был явно не про этот магазин О_о

  33. хочу выразить благодарность оператору за поддержку очень переживал он меня успакоили купить Мефедрон Бошки Гашиш Марихуану Альфа-ПВП Сама в ахуе ни употреблять эту дрянь ни толкнуть…..

  34. no deposit bonus free spins uk, best online games for
    real money (Fleta)
    $10 deposit bonus new zealand and legal gambling in united states, or free sign up bonus united
    statesn casino

  35. new zealandn poker 2 free game, real money pokies canada app and big bucks bingo australia,
    or pokies online canada

    Here is my webpage – gambling def francais; Danae,

  37. canadian poker stars, legal canadian online pokies and
    new gambling legislation united states, or pay by
    phone bill casino australia

    Here is my page – play casinos; Rob,

  38. new zealandn pm blackjack oak leaves identification (Miles), best payout online casino
    united states and no deposit casino bonus usa august 2021, or usa only online casinos

  40. Принять могут в любой курьерке и уж тем более на почте. 1 случай без полных подробностей и выяснения всех обстоятельств о самом человеке и его деятельности на пару сотню посылок это не тот случай когда нужно отказываться от удобной курьерки. Об этом уже говорили неоднократно. Возвращаться к этой теме больше не стоит. Купить Бошки Гашиш Мефедрон Альфа-ПВП Марихуану Отправки посылок и эта информация в 2-х местах прописана на сайте 2-10 РАБОЧИХ ДНЕЙ. В 999 случает сроки не нарушаются.

  41. online gambling laws in uk, spin usa ok tx border casino (Kassandra) and online australian pokies, or
    the top online pokies and casinos in australia day

  44. у кого взять собрался его ? Купить Бошки Гашиш Мефедрон Альфа-ПВП Марихуану Привет ребята

  48. Кто-нить брал тут 307 ?? просто ппц какой-то. уже 2 гр выкинул. Делал и 1к10 и чистым курил ваще НОЛЬ. Как такое можт быть ? Купить Бошки Гашиш Мефедрон Альфа-ПВП Марихуану Магаз не подведет

  49. Дубай давно перестал быть «сухим» городом: премиальный алкоголь здесь доступен с быстрой курьерской доставкой прямо до двери. Ищете liquor delivery dubai? Сервис dubaialco.ru предлагает широкий выбор виски, шампанского и водки от проверенных поставщиков с гарантией качества. Заказ оформляется быстро и без лишних формальностей с доставкой по всему Дубаю — Marina, JBR, Palm Jumeirah и Downtown.

  50. Турция стабильно привлекает путешественников тёплым морем, продуманной инфраструктурой и приятной стоимостью отдыха. Ищете ответ на вопрос какой курорт турции лучше для отдыха? Лучшие курорты для пляжного отпуска, экскурсий и активного досуга собраны на сайте evrobuket-nn.ru/top-kurorty-turcii-gde-otdyhat/ Тут просто подобрать вариант под собственные пожелания и финансы, чтобы путешествие удалось на славу.

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>