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

  7. купить марихуану в москве – мефедрон бошки кокс купить через закладку купить гашиш шишки бошки купить наркотики https://vologdakupit.xyz заказать коноплю

  10. kasГ­na s minimГЎlnym vkladom 1 eur hrat automaty zdarma mega jokerblackjack online game for fun

  13. how much is a i lost my rent money gambling (Dale) license in canada,
    online slot casino usa and poker tour australia, or craps guide uk

  14. zahranicne casino pre slovakov automaty hry zdarma sis linkautomaty hry zadarmo

  18. Автошкола «ДРАЙВ» в Туле готовит водителей категории B по-настоящему уверенно. Занятия ведут опытные инструкторы а программа подстраивается под ваш темп и график. Ищетестоимость обучения категории б тула? Подробности и запись — на сайте drivepluspro.ru — теория площадка и город без спешки. Учиться комфортно без криков и лишнего стресса. Результат — не только права но и реальный опыт вождения.

  20. п»їonline kasina slovensko online casino s okamЕѕitГЅmi vГЅplatamicasino na paysafecard

  21. kasГ­na s minimГЎlnym vkladom casino bonus za pozvani kamaradaonline kasГ­no bonusy

  23. где купить тест на наркотики – мефедрон бошки кокс купить через закладку сайт купить наркотики заказать трамадол https://kurgankupit.xyz амфетамин закладкой

  24. zahranicne casino pre slovakov hra automaty online zdarmamodelka z reklamy fortuny

  26. Выбор колёс в Кирове занимает минуты когда в наличии и легковые и грузовые шины резина для спецтехники и десятки брендов от Yokohama и Michelin до Kama и Cordiant. Фильтры работают в двух режимах — по авто и по параметрам: ширина диаметр вылет. Ищете шины киров официальный сайт? Каталог с ценами и наличием открыт на сайте xn—-dtbqbjqkp0e6a.xn--p1ai — скидка на шиномонтаж при покупке и бесплатная доставка колёс в сборе. Три магазина в городе весь товар сертифицирован.

  27. bonusy casino dnes volne tocenia za registraciuapollon games hracie automaty

  29. купить коноплю мощную – мефедрон бошки кокс купить через закладку купить канабис лирика лекарство купить https://kaliningradkupit.xyz купить наркотики телеграмм

  30. kasГ­na s minimГЎlnym vkladom 10 eur slovensko online pokerlow stakes blackjack online

  32. MobilnГ© kasГ­no pre SlovГЎkov casino free spiny bez vkladu skfree spiny bez vkladu za registrГЎciu

  35. гашиш закладками – мефедрон бошки кокс купить через закладку где продают гашиш вейп с тгк купить https://petrozavodskkupit.xyz гашиш тг

  36. nove online kasína sk casino bonusywinspark 5 €

  40. zahranicne casino pre slovakov betx casino bonus za registraci bez vkladubonus casino bez vkladu

  44. Компания СВАРТЕХКОМПЛЕКТ поставляет сварочные аппараты инверторы и расходные материалы для профессионалов и частных мастеров. Ассортимент включает продукцию надёжных брендов по выгодной стоимости. Ищете сварочное оборудование? Полный ассортимент и актуальный прайс размещены на сайте http://www.svartk.ru — здесь удобно оформить заказ онлайн. Заказы оперативно доставляются в любой регион России а консультанты подскажут оптимальную модель под ваши цели.

  45. Гидроманипулятор на самосвале расширяет возможности грузовика позволяя грузить разгружать и переносить массивные материалы. Компания Steelmagic производит надёжное оборудование под ваши задачи — оформить заказ можно на сайте https://steelmagic.ru/gidromanipulyator-dlya-samosvala/ Прочная конструкция удобное управление и продолжительная эксплуатация вам обеспечены.

  46. С 2006 года автошкола «Драйв» в Туле учит водить на категорию B готовя не к сдаче экзамена а к настоящей жизни за рулём. Профессиональные инструкторы удобные классы и теория онлайн свободный график и полное сопровождение в ГАИ на автомобилях школы. Записаться на курс можно на сайте https://drivepluspro.ru/ — там же цены и акции. Доверьте обучение профессионалам «Драйв».

  47. best real money casino united kingdom, best online casino australia no deposit bonus and no deposit mobile casino
    canada, or online casino slots real money australia

    My blog bingo machine go ruling (Julian)

  50. купить коноплю мощную – мефедрон бошки кокс купить через закладку кокаин гашиш купить трамадол купить без рецепта https://tambovkupit.xyz купить скорости спб

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>