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.

5,488 thoughts on “JavaScript Image Optimiser (JSIO)”

  2. Ищете купить венок? Зайдите на купить-венок.рф — здесь вас ждут доступные цены на траурные венки, живые цветы и ритуальные корзинки. Изучите наш ассортимент: как производители мы предлагаем венки любых форм и размеров, а сам заказ занимает буквально пару кликов. Все детали и условия заказа вы найдёте на нашем сайте.

  4. на вкус – сода.? купить мефедрон бошки гашиш альфа-пвп чистым не очень понравился:Я поддержу Советую С 2012 года знаю Всё ровно С тобой тоже ребята в Мск работали Все ровняки тут собрпались Удачи в Будущем

  5. В этой заметке мы представляем шаги, которые помогут в процессе преодоления зависимостей. Рассматриваются стратегии поддержки и чек-листы для тех, кто хочет сделать первый шаг к выздоровлению. Наша цель — вдохновить читателей на положительные изменения и поддержать их в трудных моментах.
    ТОП-5 причин узнать больше – наркологическая клиника в ростове на дону

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

  7. JetronSport — производитель футбольной формы для команд любого уровня: от детских секций до взрослых клубов. Форма изготавливается из премиальных дышащих тканей с высокой терморегуляцией и эластичностью, соответствует ГОСТам и имеет гарантию на цвета и нанесения. Минимальный заказ — одна единица, срок производства составляет от одного до трёх дней. На https://jetronsport.ru/ представлены модели взрослой, детской и вратарской формы с нанесением номеров и фамилий. Коллекции Jetron Space, Star и Winner сочетают усиленные конструктивные элементы, светоотражающие вставки и Quick-Dry материал для подлинного спортивного комфорта.

  9. А будете ли работать в Беларусии? купить мефедрон бошки гашиш альфа-пвп Оплатил через 49 минут уже получил адрес люди забрали надежную закладку эйф-диссоциатив опробовали все довольны. Мир и респектРовный магаз фарта и одекватных клиентов

  12. Успехов вам и поменьше всяких заморочек https://extazykypit.shop спроси в лички номер аси думаю все ровно будет без базара броСпасибо большое что вы с нами и доверяете нам

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

  15. - За сколько? купить мефедрон бошки гашиш альфа-пвп в каком городе брал и когда?интерисует барнаулвопросик заказ мин скока вес ? че т в аське молчат не отвечают

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

  18. Whats up mates how is all and what you want to say regarding this piece of writing in my view its genuinely remarkable for me. adult xxx video porn site xxx sex video

  19. CryoOne производит азотные криокапсулы российского производства для бизнеса в сфере красоты, спорта и восстановления. Срок окупаемости составляет 6 месяцев: лицензия не нужна, а впечатляющий результат процедуры обеспечивает постоянный приток клиентов. На https://cryoone.ru/ представлены четыре комплектации — Standard, Business, Pro и Comfort — с гарантией 24 месяца и бесплатными доставкой, монтажом и обучением. Каждая капсула поставляется с сосудом Дьюара в комплекте, и производитель гарантирует лучшую цену на рынке.

  20. Да тут дофига кто чего отписывает.только вот пробы нормальным людям раздайте.что бы видели липчане работу вашу https://alphapvpkypit.shop Нет сомненияа кто нибудь пробовал все таки эту куреху urb

  23. Заказал вчера 30гр 4-FA . Трек пока не получил. Надеюсь что все будет олрайт. В планах долговременное сотрудничество купить мефедрон бошки гашиш альфа-пвп всегда работают и делают свою работу на 5Очень странно что 203 не растворился в ацетоне. Сколько брал ацика на 10 гр основы?

  24. Good post. I learn something totally new and challenging on blogs I stumbleupon on a daily basis. Its always helpful to read content from other authors and practice something from their web sites. Xxx video onlyfans sex video site

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

  27. Полиуретановая плёнка эффективно оберегает лакокрасочный слой от сколов, царапин и внешних воздействий, продлевая презентабельность кузова на долгие годы. Ищете оклейка кузова полиуретаном? Профессиональная оклейка выполняется на individual-design.ru/nashi-uslugi/452-okleyka-avto-poliuretanom с гарантией качества и точной подгонкой материала под любой кузов. Материал обладает эффектом самовосстановления и снимается без следов — идеальный выбор для тех, кто бережёт вид и стоимость своего автомобиля.

  28. расширяться собираетесь? купить мефедрон бошки гашиш альфа-пвп хороший магазКак только появится обьявим на форуме

  30. Whats up after reading this amazing post i am as well happy to share my know-how here with friends. Watch sexual porno video xxx sex adults site

  31. Этот текст представляет собой обзор свежих данных и исследований в области медицины. Он призван помочь читателям понять, как научные достижения влияют на лечение, диагностику и общее состояние системы здравоохранения.
    Не упусти шанс – частный медик 24 рнд

  32. Номер заказа: 10004015 оплачен мыло выслано с информацией купить мефедрон бошки гашиш альфа-пвп Мне пока ещё не пришло но ты уже напугал….:orientation: кто знает где весы купить можно чтоб граммы вешатьспс вот уже пришло что отправлено в пн ждать трек буду

  34. Hi I am so delighted I found your weblog I really found you by accident while I was browsing on Askjeeve for something else Regardless I am here now and would just like to say thank you for a remarkable post and a all round entertaining blog I also love the theme/design I dont have time to browse it all at the minute but I have book-marked it and also added in your RSS feeds so when I have time I will be back to read more Please do keep up the fantastic work. Xxx video onlyfans sex video site

  37. В этой публикации мы исследуем ключевые аспекты здоровья, включая влияние образа жизни на благополучие. Читатели узнают о важности правильного питания, физической активности и психического здоровья. Мы предоставим практические советы и рекомендации для поддержания здоровья и развития профилактических подходов.
    Это стоит прочитать полностью – Похмельная служба в Анапе

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>