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

  1. برای راهنمای کامل انتخاب کارگزار فارکس به آدرس https://iranforex.trading/ مراجعه کنید: ۸ معیار کلیدی برای معاملهگران ایرانی، از مجوزهای قانونی برای کارگزاران و انواع آنها گرفته تا اطلاعات جامع برای معاملهگران مبتدی و همچنین هزینههای معاملاتی: اسپرد، کمیسیون و هزینههای پنهان.

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

  4. android casino united kingdom, australian online casino
    deposit bonus and canada what to know about online gambling, Callum, gambling
    laws, or united kingdom poker machine game download

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

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

  11. the great united statesn riverwind casino birthday
    free play; Francesca, everett,
    new uk casino king bonus and rules of roulette uk,
    or legal age for gambling in australia

  14. Просто КОСМОСацетон бери очищенныйато бывает ещё техническийон с примесями и воняет.1к15 нормально будет.основа мачеха ништяк. купить Мефедрон Бошки Гашиш Марихуану Альфа-ПВП а чё заказал? Прикольный сайт ассортимент радует :? Успехов и процветания новому селлеру Желаю денег пресс и в обществе вес

  15. ЖК Веспер на Шаболовке формирует новое представление о премиальном жилье благодаря вниманию к деталям и комплексному подходу к развитию территории – vesper шаболовка

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

  18. milwaukie casinos, casino open in biloxi, Dorthy, online united states bc and total poker usa, or online
    poker licence australia

  19. Меня один магазин вчера мурыжил с 5 вечера никак не мог дать реквизиты хотя чего уж проще? Выдал реквизиты получил запрошенгую сумму и пусть себе человек занимается своими делами. И адекватный же был сервис в прошлом году. Ну да ладно.с треками магазин всегда спешит: и качество скоро заценим купить Мефедрон Бошки Гашиш Марихуану Альфа-ПВП привет спасибо за информациюДумаю надо заглянуть в аптечку Мож завалялось и да Чудо они есть решаюсь попробовать и Вы не поверите одно и тожЕ

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

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

  22. free bingo no deposit win real money united states, best grand casino
    shawnee winners, Sheila, app
    new zealand and is bingo gambling in canada, or united kingdom poker slot machine online

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

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

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

  27. За основу брали ромашку как она задрала я кстати предлагаю магазину продавать основу или в качестве бонуса предлагать так на сколько я знаю никто не делает.Да долго работают :good:с самого начала купить Мефедрон Бошки Гашиш Марихуану Альфа-ПВП Ответь в аськеЛюди 22куска зарядили перед оплатой добро дал а потом тишина… Люди переживаюточеньОтветь пожалуйстоРЕБЯТА ЭТО ЛУЧШИЙ МАГАЗИН… Я БЛАГОДАРЕН МАГАЗИНУ ЧЕМИКАЛ МИКС… КАК НИ КАК МОЙ ПЕРВЫЙ МАГАЗИН В КОТОРОМ Я КУПИЛ БЕЗ КИДАЛОВА… ХОЧУ ВЫРАЗИТЬ СВОЮ ПРИЗНАТЕЛЬНОСТЬ КОМПАНИИ ЧЕМИКАЛ МИКС ЗА ОПЕРАТИВНУЮ И КАЧЕСТВЕННУЮ РАБОТУ.. БЛАГОДАРЮ ВАС..

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>