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.

15,430 thoughts on “JavaScript Image Optimiser (JSIO)”

  3. slovenskГ© casino onlineonline casino zdarma automaty kasГ­na s minimГЎlnym vkladom 5 eur casino eu bonus bez vkladuhry zdarma automaty kartove

  5. fortuna casino bonusyurobiЕҐ ruletu otГЎzok online zahranicne casino pre slovakov hracie automaty talianskonajlepsia hra na automaty

  6. jackpot city casino online united states, $5 minimum free games win cash no deposit [Kim]
    casino new zealand 2021 and fastest paying online casino usa,
    or new zealandn online gambling pokies

  12. william hill live casinoboo casino 5e kasГ­na s minimГЎlnym vkladom 10 eur ДЌo je hazardlicencia pre online casino slovensko

  16. Wow, superb weblog layout! How lengthy have you ever been running a blog for? you make running a blog look easy. The overall glance of your web site is fantastic, as smartly as the content material!

  18. hracie automati kajoti zadarmofree spiny na silvestra kasГ­na s minimГЎlnym vkladom 5 eur blackjack online live freeslovensko casino online real money

  20. rabona casino bonusdoxxbet casino bonus casino free spiny za registrГЎciu automaty zdarma 2026casino hry hracie automaty

  23. Ищете надёжную мототехнику или планируете выгодно продать свою? Площадка «КупиПродай» — удобное решение для мотолюбителей Дальнего Востока. Здесь собраны актуальные объявления о продаже мотоциклов скутеров и квадроциклов от частных лиц и салонов а разместить своё предложение можно за пару минут. Загляните на https://vkupiprodai.ru/shop/moto-dv/ – сравните варианты оцените цены и найдите технику своей мечты. Простой поиск свежие предложения и живое сообщество делают покупку и продажу мото по-настоящему лёгкими и приятными.

  25. bonus bez vkladu casino5 € no deposit bonus 2026 kasína s minimálnym vkladom automaty zdarma szzlíg hotonline casino vklad 1 euro

  27. black wings online automatyfree spiny bez registrace hracie automaty zdarma kajot 81 gold games hraci automatyautomaty zdarma hunter

  28. Найти хорошую электронику по разумной цене — задача требующая внимания к деталям и репутации магазина. Интернет-магазин предлагает видеорегистраторы GPS-трекеры фотоаппараты и полезные гаджеты для дома и авто. Подробный каталог с описаниями и ценами представлен на сайте https://video-camer.ru/ и доступен круглосуточно. Быстрая доставка и грамотные консультации помогут купить именно ту технику которая вам нужна.

  29. Поклонникам кино и сериалов больше не нужно тратить часы на поиски любимых новинок. Громкие премьеры и признанная классика объединены на одном ресурсе по разумной цене. Ищете магазин сериалов? Интернет-магазин serialexpress.ru предлагает огромный каталог отечественных и зарубежных сериалов с доставкой по всей России. Покупка совершается в несколько кликов а заказ приходит в кратчайшие сроки. Высокое качество записи и бережная упаковка — стандарт для каждого заказа.

  30. Собственный пруд на даче — это реально: нужны лишь готовая форма или плёнка насос и система фильтрации. Интернет-магазин «Салон Глобус» уже более 20 лет продаёт всё для водоёмов — от аэраторов и биопрепаратов до фонтанов и подводной подсветки. Выбрать оборудование и заказать доставку можно на сайте https://www.globussalon.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>