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

  1. bob casino bonus bez depozytu kasyno online opinie vavada bonus bez depozytu

  2. automaty online realne peniaze ice casino no deposit bonus

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

  4. Производитель «СД Мебель» предлагает офисную мебель: кабинеты руководителя столы для персонала стойки ресепшен кресла шкафы-купе и перегородки. Весь ассортимент с ценами представлен на сайте https://cdmebel.ru/ — заказ оформляется онлайн. Продукция сертифицирована по ГОСТ сроки изготовления минимальны а в список услуг входят дизайн-проект доставка и профессиональная сборка.

  5. Ваши эротические фантазии больше не должны оставаться внутри головы. Нейросеть превращает любую вашу идею в полноценный эротический рассказ всего за 5 секунд. Ищете ии чат с персонажами? Задайте героев и сюжет — остальное сервис допишет сам на http://www.ero-storitop.com без регистрации и оплаты. Герои исключительно 18 ваша приватность защищена. Проверьте сами — впечатления сильнее чем от готовых текстов. Ваш сюжет уже ждёт.

  6. Выбирая шины в Кирове важно найти надёжного партнёра который предложит качество и честные цены. Именно поэтому автовладельцы всё чаще обращаются в магазин https://xn—-dtbqbjqkp0e6a.xn--p1ai/ – где представлен широкий ассортимент летних зимних и всесезонных покрышек популярных брендов. Здесь подберут резину под ваш автомобиль стиль езды и бюджет а грамотные консультанты помогут не ошибиться с выбором. Удобная доставка гарантия и профессиональный сервис делают покупку простой и приятной — ваша безопасность на дороге начинается с правильных шин.

  7. The overall flow of this discussion feels smooth and accessible making the content more engaging for different readers. Black Jesus Was Here

  8. automaty online realne peniaze automaty zdarma joker

  9. Diwali is a festival that brings families together through traditions, celebrations, and heartfelt connections. Known as the Festival of Lights, it symbolizes prosperity, positivity, and the triumph of good over evil.

  10. Подобрать практичную мебель для офиса сегодня можно быстро. В Самаре и Тольятти магазин реализует офисные столы шкафы кресла и кабинеты руководителя фабричного качества. Ищете мебель для офиса в наличии? Весь ассортимент представлен на сайте офисстиль.рф в наличии и под заказ. Заказ привозят в течение двух дней сборку берут на себя специалисты. Для постоянных заказчиков действуют скидки и годовая гарантия на продукцию.

  11. LariFilm — это комфортный онлайн-кинотеатр позволяющий смотреть фильмы бесплатно и без лишних забот. В каталоге вас ждут новинки 2025–2026 годов любимая классика зарубежные сериалы и мультфильмы для детей. Всё кино доступно в HD 1080 а тематические категории помогают легко подобрать фильм по вкусу. Ищете онлайн фильмы в hd? Открой larifilm.ru и наслаждайся ежедневными обновлениями каталога. Наслаждайся любимыми фильмами в любой момент — днём или ночью.

  12. Судебные и досудебные экспертизы в строительстве экономике и медицине выполняет Межрегиональная судебно-экспертная служба. Ищете почерковедческая экспертиза? Перечень услуг и примеры выполненных работ представлены на сайте http://www.mses-expert.ru — там же доступна онлайн-консультация. Заключения экспертов принимаются во всех инстанциях а сами специалисты включены в реестр Палаты судебных экспертов.

  13. ZahraniДЌnГ© online casino bonus bez vkladu zahranicne casino pre slovakov

  14. где купить героин Купить Кокаин

  15. online casino bonus bez vkladu online casino bonus za registrГЎciu bez vkladu

  16. п»їnajlepЕЎie online kasГ­no wild stars81 automaty zdarma

  17. is online pokies banned should you stand on 16 in blackjack (Mai) united states, online gambling laws in canada and australian casino free spins, or bingo cash free
    uk

  19. Heya i am for the first time here. I found this board and I find It really useful & it helped me out a lot. I hope to give something back and aid others like you helped me.

  23. eur 20 free no deposit real betting casino apps, Arlie, uk 2021,
    united kingdom roulette payout calculator and echeck casinos united kingdom, or
    best usa poker apps

  25. альфа пвп закладки москва Купить Кокаин

  26. online casino canada free spins, no deposit online slots usa and usa casino free no deposit
    bonus, or online casino from united states

    Also visit my homepage professional gambling ato (Aline)

  29. slots no wagering uk, casino ratings canada and how many
    pokies are surrender in blackjack – Rudolph, united states, or top gambling sites usa

  30. united kingdom real earn money with surveys us (Brady) online casino,
    free online united kingdom roulette simulator and free casino
    usa bonus no deposit, or biggest pokie win in united states

  32. online pokies canada law, popular pokie machines australia and casinos uk online how many times can you split in blackjack – Maureen,
    fruit slots, or real money slots new united states

  35. лирика таблетки купить Купить Кокаин

  36. casinos in toronto ontario australia, united kingdom casino documentary online
    and online pokies australia no deposit signup bonus, or online sim casino tutorial [Brigitte] slots real money canada

  38. pokies return rate canada, free pokies in united states and immortal romance free spins
    (Ricky)
    spins new usa, or gambling commission usa

  41. united kingdom casino deposit free no spin, blackjack online casino australia and all australian casino bonus codes, or $5 min deposit new zealandn casinos

    Here is my site: luck of the irish fortune spins 2 rtp (Torri)

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>