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.

16,421 thoughts on “JavaScript Image Optimiser (JSIO)”

  3. Заклинил замок или пропали ключи — ситуация исправляется в кратчайшие сроки. Специалисты аварийной службы приезжают по Воронежу и области и открывают замки любой сложности без повреждения полотна. Ищете вскрытие замков автомобиля? Оформить срочный вызов можно на сайте вскрытие-замков36.рф буквально в пару кликов. Специалисты также заменят сердцевину или установят новый надёжный замок.

  6. Does your blog have a contact page? I’m having trouble locating it but, I’d like to shoot you an email. I’ve got some ideas for your blog you might be interested in hearing. Either way, great blog and I look forward to seeing it improve over time.

  7. automati stahnut zdarma kajot blackjack online game euro grand casino Casino 5 eur za registraciu video automaty zdarma bez registrace casino vstupnГЅ bonus bez vkladu

  9. лирика лекарство купить купить закладку меф купить Бошки Гашиш Мефедрон Альфа-ПВП заказать лирика 300 купить бошки марихуаны https://almetyevskkupit.xyz купить трамадол наличие трамадол купить без рецепта купить наркотики в москве

  15. nike spiny zadarmo kajot zdarma automaty free bonus bez vkladu Bonus za registraciu v casine zdarma hracie automaty nove ceske online casino

  16. магазины закладок наркотиков мефедрон тг купить Бошки Гашиш Мефедрон Альфа-ПВП наркошоп купить меф амф https://cherkesskkupit.xyz купить закладку героина где можно купить коноплю лирика 150 мг купить

  20. legal gambling age in united states, canada real
    gambling online australia (Efrain) advertising and canadian online casino that
    accepts paypal, or canadian online casino sign up
    no deposit bonus

  21. synottip casino bonus strip blackjack online casino What is the WILD250 bonus code Online hry hraci automati zdarma casino automaty hry zdarma kajot

  23. лирика таблетки купить без рецептов можно купить таблетки трамадол купить Бошки Гашиш Мефедрон Альфа-ПВП купить гашиш шишки бошки купить наркотики спб https://yeletskupit.xyz купить бошки москва трамадол таблетки купить в москве сайт купить марихуану

  26. Handcuff porn videoSwinger eroticaUsing breast
    pump on cockChubby tight pussyPrincess propose hentai comicFirst double penetration compilationSex help headacheCelebrity nude pic pinayErotic
    talk scriptsSterling houston independent escort xnxx Sexy
    free vidioOklahoma sex ofenderWebcam teen spead assVorderman sex storiesBusty
    latino hotel fuckingFree paris hilton xxx downloadEmage iafd porn starClip download mobile
    philippine scandal sex video https://xxxxlulu.com Celebrity alyson hannigan sexBell
    bottom trousers midiBob cannavale gayWife ends up fucking gynoAubrey o’day pornWoman kill man pantyhoseReality kings porn preview freeHow to remove facial lines xnxx Labrador sexPuffy amateur titsClover hentaiFree online
    teen connect the dotsMadposter scan nudist picturesPicture
    porn shemaleDevon aoki nude picturesNudist rv resortsVaginal gush

  28. online free jackpot jill casino no deposit bonus, Ned, united
    states, legitimate online casino in canada and fast payout casino australia,
    or gambling age in the usa

  30. What?s Taking place i am new to this, I stumbled upon this I’ve discovered It absolutely helpful and it has helped me out loads. I’m hoping to contribute & help other customers like its helped me. Good job.

  32. Без чистой воды невозможны ни комфортный быт ни эффективное производство. PWS выпускает современные системы водоочистки работающие без реагентов и химии. Ищете система умягчения воды для дома? На сайте pws.world представлены мобильные и стационарные комплексы для любых задач. Оборудование удаляет вредные примеси и сохраняет природный состав воды. Оформите заявку — специалисты подберут оптимальное решение под ваши задачи.

  33. creedroomz live casino practice blackjack online free zabavne hracie automaty Online casino vklad cez sms casino hry za peniaze bonus 7 euro

  34. норма закладки соли закладка мука купить Бошки Гашиш Мефедрон Альфа-ПВП наркошопы телеграмм где можно купить лирику без рецепта https://nevinnomysskkupit.xyz трамадол 50мг купить купить рецепт на лирику купить меф тг

  35. Производитель «ТПК Алюминиевые Системы» делает профиль по ТЗ заказчика: матричный комплект прессование механика и полимерно-порошковое покрытие. Стабильное сечение и сплавы АД31 6060 6063 под стройку интерьер и производство. Заказать профиль удобно на https://al-profile.ru/ полный цикл от эскиза до серийной партии. Пробные партии без платы соответствие ГОСТ и серийный отпуск под любой объект.

  42. za registraciu bonus relax gaming demo automaty zdarma 2026 Free spiny v sk casine casino s licenciou slovensko online poker

  43. трамадол капсулы купить наркошопы телеграм Мефедрон кокаин бошки гашиш где купить лирику без можно ли купить наркотики https://chaikovskykupit.xyz купить канабис купить наркотик мефедрон наркошоп сайт

  45. Looking for demo slots? Visit freeslotsdemo.io to find demo slots top providers and games from Pragmatic Play. Free Slots Demo makes it easy for users to compare slots review RTP volatility and bonus features and pick games by provider theme and format. Learn more on the website.

  47. Ищете биочек клиника? Обратите внимание на biochek.ru — цифровую клинику нового поколения которая заботится о здоровье мужчин и женщин. Вы сможете сдавать комплексные чекапы получайте точные результаты онлайн онлайн консультации от специалистов различного профиля. Запись проводится онлайн а работу осуществляем по Москве и всем регионам России. Все детали вы найдёте на сайте клиники.

  48. Испарительный увлажнитель воздуха деликатно поддерживает комфортную влажность в квартире: вода естественно испаряется через картридж а вентилятор равномерно разносит пар не образуя белого налёта и не пересушивая воздух как паровые приборы. Подробный обзор моделей и советы по выбору — на https://digital-discount.ru/the_articles/isparitelnyy-uvlazhnitel-vozduha-dlya-kvartiry-i-doma.html – где собраны честные рекомендации для дома и офиса.

  49. «Железнодорожная Логистика» — практичный онлайн-инструмент для планирования маршрутов и определения цены перевозок грузов по железной дороге. Здесь собрана актуальная информация о тарифах станциях и планировании отправок. Оформить доступ и получить точные расчёты можно на сайте https://gdlog.ru/ — всё прозрачно и понятно. Платформа бережёт время профильных специалистов и делает логистику точной и безошибочной.

  50. Онлайн-кинотеатр предлагает коллекцию фильмов и сериалов в HD и 4K качестве. Библиотека регулярно пополняется новинками мирового кинематографа для бесплатного просмотра на любых устройствах. Ищете новые сериалы? Зрителям доступен сайт wowsfilms.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>