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.

4,501 thoughts on “JavaScript Image Optimiser (JSIO)”

  2. Этот обзор предлагает структурированное изложение информации по актуальным вопросам. Материал подан так чтобы даже новичок мог быстро освоиться в теме и начать использовать полученные знания в практике. Ознакомиться с отчётом – вывод из запоя с выездом на дом

  7. отпишите народ за 5 iai кто брал спс заранее купить мефедрон скорость кокс Доброго времени суток все друзья:hello:Отличный магазинВсегда ровные движения работал с ним.Всем советуюСпасибо за объективный отзыв мы работаем – что бы Вы улыбались:ok:

  8. mexico ts escorts VIP High Class Escort Service Dubai – Verified Models women rome ga escorts

  10. Этот текст призван помочь читателю расширить кругозор и получить практические знания. Мы используем простой язык, наглядные примеры и структурированное изложение, чтобы сделать обучение максимально эффективным и увлекательным.
    Не упусти шанс –

  11. Thanks for sharing your thoughts. I really appreciate your efforts and I am waiting for your further write ups thanks once again. The Dog House Megaways

  12. I got this web page from my friend who told me on the topic of this site and at the moment this time I am browsing this web site and reading very informative articles here. Candy Blitz Bombs

  13. В этой статье представлен занимательный и актуальный контент, который заставит вас задуматься. Мы обсуждаем насущные вопросы и проблемы, а также освещаем истории, которые вдохновляют на действия и изменения. Узнайте, что стоит за событиями нашего времени!
    Обратитесь за информацией – нарколог на дом екатеринбург цены

  14. Appreciating the time and effort you put into your blog and in depth information you provide. Its nice to come across a blog every once in a while that isnt the same out of date rehashed material. Excellent read Ive saved your site and Im including your RSS feeds to my Google account. Idol Pop Fever

  22. на icq – в четверг обещал трек в пятницу обещал трек пропал… купить мефедрон скорость кокс да наверно я попал на фейка или угонщика но мне не понятно как фейк может потверждать переписку с броси на форуме?Здравствуйте есть и 50 и 100 сейчас откорректирую можете заказывать уже

  25. shangri la escorts VIP High Class Escort Service Saint-Tropez – Verified Models escort shemale in dubai

  26. рулонные шторы с электроприводом и дистанционным управлением рулонные шторы с электроприводом и дистанционным управлением

  28. Эта познавательная публикация погружает вас в море интересного контента который быстро захватит ваше внимание. Мы рассмотрим важные аспекты темы и предоставим вам уникальные Insights и полезные сведения для дальнейшего изучения. Полезно знать – вызвать нарколога на дом нарколог 24

  31. посылка упакована оригинально =) и скорость сборки удивила https://pacificgreen-moscow.ru Ну как видишь соответсвует …вобщем решение принято заказ буду делать ТУТ

  32. Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates. Ive been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates. Inca Queen

  33. Эта разъяснительная статья содержит простые и доступные разъяснения по актуальным вопросам. Мы стремимся сделать информацию понятной для широкой аудитории, чтобы каждый мог разобраться в предмете и извлечь из него максимум пользы.
    Заходи — там интересно – вызов нарколога на дом анонимно

  35. Nice post. I learn something totally new and challenging on websites I stumbleupon every day. It will always be useful to read content from other writers and practice something from other web sites. Candy Blitz Bombs

  36. ts escort pittsburgh Antalya escorts VIP escort Antalya: elite escort girls in Antalya kelly dream escort

  38. Awesome Its actually awesome article I have got much clear idea regarding from this post. Triple Pot Diamond

  40. пиши разберемся купить мефедрон скорость кокс Во-во МАГАЗИН Обозначил цену так по ней и продавай На мыло упало – Цена заказа -4250 и .. А потом начались догонялки…. Магазины так не поступают а поступают именно БАРЫГИ как точно выразился РОГАТЫЙ ОБИТАТЕЛЬ данной веткиУрал и Chemical продукт знают как сделать грязно

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

  47. флудить в курилку купить мефедрон скорость кокс Может еще вернемся.Вот уже Артем хохочет

  48. MoscowWaterWays — удобный сервис для организации речных прогулок по Москве с отправлением от главных городских причалов. Сервис предлагает маршруты с отправлением от Китай-города, Парка Горького, Воробьёвых гор, Москвы-Сити и множества других знаковых мест. Ищете маршрут теплохода от киевского вокзала до зарядья? На платформе moscowwaterways.ru можно выбрать маршрут и оплатить билеты онлайн — они придут на электронную почту. В расписании предусмотрены специальные рейсы на 9 Мая, День города, выпускные вечера и новогодние праздники. Причалы удобно расположены рядом с метро и МЦК, а посадка занимает минимум времени.

  50. Why viewers still use to read news papers when in this technological globe all is available on web? Candy Blitz Bombs

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>