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.

12,643 thoughts on “JavaScript Image Optimiser (JSIO)”

  1. kasyno minimalny depozyt 10 zЕ‚ kasyna bez depozytu darmowe spiny

  7. Где купить героин Купить Кокаин Героин ЛСД МДМА Экстази

  12. I am very pleased to have stumbled upon this specific article. It is not always easy to find a fully neutral and universally useful overview but you have managed to hit all the right notes with your logical formatting and incredibly clear explanations right here. https://lisaschrijft.nl/

  18. Где купить кокаин Можно купить наркотики

  21. Без надёжной ссылочной массы и выверенной стратегии добиться высоких позиций в поиске нельзя. Требуется сео продвижение сайта заказать? Надёжным помощником станет сервис seomarket.store с эффективными инструментами для роста позиций и увеличения трафика. Клиенты отмечают заметный рост позиций и приток посетителей уже через несколько месяцев сотрудничества. Понятные тарифы и доступная стоимость услуг подходят бизнесу любого масштаба.

  22. Приобретение готовых аккаунтов Telegram — повседневная задача для арбитражников маркетологов и специалистов по SMM. Подобрать надёжные аккаунты в форматах Tdata Session JSON или с доступом по номеру и коду — задача не из лёгких из-за обилия недобросовестных продавцов. Купить аккаунт тelegram – возможен вход по номеру и коду на marketgram.cc решает эту проблему раз и навсегда. Сервис предлагает обширный выбор аккаунтов с гарантией мгновенной доставкой и честными условиями сотрудничества. Любой аккаунт проверяется перед продажей благодаря чему доля брака практически исключена. Простой дизайн сайта и логичная структура дают возможность купить нужный аккаунт за считанные минуты.

  24. kasyno online automaty kasyno na prawdziwe pieniadze sklep play

  26. cash frenzy free slots, mini slot machine united states and best online casino payout
    uk, or where are the cheapest roulette tables in vegas –
    Lyndon –
    usa casino

  27. Наркошопы ссылки Заказать наркотики

  36. kasyno minimalny depozyt 10 zЕ‚ dobre kasyna bez depozytu

  37. It is refreshing to read something that is just straightforward and informative. I wanted to make sure I left a comment to acknowledge the solid effort that went into producing this. https://rijschoolzuidlaren.nl/

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

  42. Thanks for your blog post. The things i would like to make contributions about is that personal computer memory should be purchased if your computer still can’t cope with whatever you do with it. One can add two random access memory boards of 1GB each, as an example, but not certainly one of 1GB and one with 2GB. One should always check the company’s documentation for one’s PC to be sure what type of memory is necessary.

  44. Купить мефедрон бошки Купить Бошки Шишки Мефедрон Кокаин

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>