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.

14,645 thoughts on “JavaScript Image Optimiser (JSIO)”

  1. ruleta online zadarmo bez registrГЎcie п»їnajlepЕЎie online kasГ­no losovanie online ruleta

  2. Компания «Компэл» через портал https://components.ru/ предлагает широкий выбор электронных компонентов от ведущих мировых и российских производителей. Здесь вы найдёте микросхемы датчики разъёмы источники питания и модули для любых задач — от прототипа до серийного производства. Удобный поиск техническая поддержка инженеров актуальные складские остатки и оперативная доставка делают закупку простой и надёжной для профессионалов рынка.

  4. Электронику для схем ищут быстро и дешевле рынка. Ищете электронные компоненты? Каталог микросхем резисторов конденсаторов и разъёмов собран на components.ru — проверенные поставки от производителей с гарантией подлинности. Заказ оформляется за пару минут а склад отпускает партии любого размера. Технические консультации по замене номиналов бесплатны доставка работает по стране.

  5. Форумные ссылки по-прежнему считаются одним из самых надёжных инструментов повышения позиций сайта. Специалисты сервиса https://seobomba.net/ размещают ссылки вручную на живых площадках с реальными пользователями. Каждый донор проверяется по ИКС а работа завершается развёрнутым отчётом в формате Excel. Тарифные планы понятные и без скрытых доплат: от стартового пакета для новых сайтов до мощного буста для коммерции.

  6. australia no deposit online casino, new zealandn online casino sign up no deposit bonus and how to hack canadian pokies, or online casino allowed in united states

    Feel free to surf to my page – famous gamblers who lost everything (Laura)

  7. nowe kasyno bez depozytu Zagraniczne kasyna z bonusem bez depozytu Czy granie w kasynie jest legalne

  8. blackjack online casino strategy automaty online realne peniaze free spiny na dnes

  9. купить наркотики мефедрон Купить Кокаин Мефедрон Бошки Гашиш Марихуану купить трамадол 100мг https://ulyanovskkupit.xyz купить наркотики интернет магазин

  10. trusted online pokies australia, free spins
    no deposit casinos usa and online review casino
    royale david niven (Kandi)
    available in australia, or el torero slot usa

  11. casino zodiac registration п»їnajlepЕЎie online kasГ­no hraci automaty za penize

  12. casino online usa all sites, gambling stocks in united
    states and poker run thousand islands 2021, or fishin freuky slot

    My blog post: craps roulette rules (Epifania)

  13. tЕ™Г­vГЎlcovГ© automaty zdarma KasГ­na s minimГЎlnym vkladom 20 eur online casino real money 2026

  14. This artgicle iis really a fastiidious onne itt
    asssists nnew nett people, wwho aare wishing inn favor
    off blogging. xnxx

  15. закладку со скоростью Купить Кокаин Мефедрон Бошки Гашиш Марихуану какие наркотики купить https://permkupit.xyz где купить лирику без

  17. leovegas online casino united states, duke nukem forever slot machine
    jackpot and best online casino usa 2021, or 50 free spins thunderstruck no deposit usa

    Feel free to visit my blog; blackjack pc – Orlando -

  18. Безупречный вид мужчины начинается с грамотно подобранного костюма. В каталоге представлены брюки элегантные жилеты и классика из качественных материалов. Ищете рубашка мужская? На сайте menssegment.com легко подобрать пиджак и рубашку под любой образ. Клиенты могут записаться на примерку без очереди получить бесплатную подгонку брюк и советы стилиста. Магазин расположен в центре Москвы в ТЦ «Райкин Плаза» рядом с метро Марьина Роща.

  19. casino royale online automaty online realne peniaze hracie automaty firma tiger

  21. slovenskГ© online kasГ­no 2026 online casino bonus za registrГЎciu starlight princess demo

  22. blackjack online play free 50 zЕ‚ bez depozytu za rejestracjД™ bonus urodzinowy kasyno

  24. где купить альфа пвп Купить Кокаин Мефедрон Бошки Гашиш Марихуану заказать лирику https://saratovkupit.xyz купить наркотики телеграмм

  25. Thanks for giving your ideas. One thing is that pupils have a choice between fed student loan as well as a private education loan where it really is easier to opt for student loan debt consolidation than through the federal education loan.

  29. hracie automaty the mummy 27 linie casino bonus bez vkladu bonus ice casino

  31. Автомобильные весы CXT — оптимальный выбор для точного взвешивания большегрузного транспорта в любой отрасли. Надежные конструкции справляются с большими нагрузками служат десятилетиями и гарантируют верные измерения при любых климатических условиях. Ознакомиться с полным модельным рядом и характеристиками можно на сайте https://cxt.su/products/avtomobilnye-vesy/ — здесь вы подберете оборудование под свои задачи и бюджет.

  32. Рост сайта в выдаче держится на тексте который приводит клиента и продаёт. Эксперты изучают лидеров топ-10 выверяют плотность ключей и подключают LSI-лексику. Ищете частный seo специалист москва? Подробные условия и примеры работ смотрите на dstudio.su Проработка идёт по каждой карточке и каждой статье поэтому поисковый трафик растёт последовательно а позиции остаются устойчивыми.

  34. Теплый пол на электричестве — удобный вариант обогрева для дома квартиры и офиса. Система быстро нагревает комнату снижает расходы на отопление и устанавливается под любое покрытие. Ищете электриеский теплый пол купить недорого? Выбрать нагревательные маты и кабель по выгодной цене можно на сайте теплый-пол-электрический-купить.рф с доставкой по всей России. Вся продукция сертифицирована и имеет гарантию производителя.

  36. czy w polsce jest legalne kasyno kasyno online z blikiem Czy kasyno jest legalne

  39. трамадол таблетки купить в москве Купить Кокаин

  40. Скульптуры из проволоки становятся ярким акцентом в интерьере дома и офиса. Изящные фигуры феи и абстрактные композиции создаются мастерами вручную и подчеркивают вкус владельца. Ищете скульптуры из проволоки? На сайте wirespace.ru представлен каталог готовых работ с ценами и фото. Всякая работа объединяет гибкость линий и световые эффекты делая помещение похожим на галерею. Заказы отправляются в любые регионы России оплатить покупку можно комфортным способом.

  41. casino vklad mobilom hracie automaty kajot hry zdarma

  42. Thanks for your article on this web site. From my own personal experience, there are times when softening upwards a photograph could provide the digital photographer with a little an artistic flare. Sometimes however, the soft blur isn’t just what you had in your mind and can in many cases spoil a normally good photograph, especially if you consider enlarging the item.

  43. Howdy! I know this is kinda off topic but I was wondering if you knew where I could get a captcha plugin for my comment form?
    I’m using the same blog platform as yours and I’m having trouble finding one?

    Thanks a lot!

  44. Будинок для людей похилого віку «Велика родина» у Львові гарантує якісний догляд. Кваліфіковані працівники медичний супровід повноцінне меню та затишні кімнати. Детальні умови проживання й перелік послуг доступні на сайті https://big-femily.com.ua/misto-lviv/ Тут пенсіонери щодня відчувають підтримку увагу та домашній комфорт.

  45. united kingdom casino guide 2021 review, online 32 cards casino
    rules – Hayden – games for real money
    uk and does united states have casinos, or real money slots
    new united states

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>