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.

8,389 thoughts on “JavaScript Image Optimiser (JSIO)”

  4. CASENEXT — это инновационный портал по открытию кейсов CS2 CS:GO Dota 2 и Rust сделанный игроками и для игроков. Тут вы зарабатываете ценные предметы через открытие кейсов создание контрактов и систему апгрейдов. Ищете игровые кейсы cs2? Заходите на сайт casenext.net/?lang=ru и начинайте зарабатывать прямо сейчас. Понятный интерфейс и ощутимая выгода превращают процесс в комфортное и захватывающее занятие для любого игрока.

  5. Эта публикация содержит ценные советы и рекомендации по избавлению от зависимости. Мы обсуждаем различные стратегии которые могут помочь в процессе выздоровления и важность обращения за помощью. Читатели смогут использовать полученные знания для улучшения своего состояния. Узнать больше – нарколог на дом клиника

  6. Магази хороший и качество нормальное если есть возможность запиши на пробу Бро купить мефедрон Качественный магаз

  8. Эта статья освещает различные аспекты освобождения от зависимости и пути к выздоровлению. Мы обсуждаем важность осознания своей проблемы и обращения за помощью. Читатели получат практические советы о том, как преодолевать трудности и строить новую жизнь без зависимости.
    Это стоит прочитать полностью – вызов врача на дом нарколога

  9. Vox Casino vox casino rejestracja to nowoczesna platforma dla miłośników gier kasynowych online. Gracze mogą korzystać z szerokiego wyboru automatów gier stołowych oraz atrakcyjnych promocji przygotowanych zarówno dla nowych jak i stałych użytkowników. Dodatkowe korzyści zapewniają kody promocyjne darmowe spiny oraz bonusy bez depozytu dostępne w wybranych ofertach.

  10. Этот медицинский обзор сосредоточен на последних достижениях которые оказывают влияние на пациентов и медицинскую практику. Мы разбираем инновационные методы лечения и исследований акцентируя внимание на их значимости для общественного здоровья. Читатели узнают о свежих данных и их возможном применении. См. подробности – нарколог на дом вывод из запоя на дому

  11. С поиском клада не было не малейших заморочек. купить мефедрон Написал о заказе в аське в ПТмне сказали цену и реквизиты. В СБ оплатилкинул в аське свои реквизиты.В ПН связался-Сказаличто все отправилиок.

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

  13. Парни у кого нибудь задерживали посылку в СПСР?Уже неделю как приняли и все не отправят и планируемая дата отправки прошлаа реальную так и не поставили.Позвонил в офис говорят готово к отправкеа че не отправляют они не знают.Сказали позвонить когда менеджеры придут на работу.У кого нибудь такое было?Может это фигня какая то и лучше не идти за посылкой?Как думаете?Раньше просто такого не было максимум 5 дней с даты приема до моих рук проходилос любого магазина. купить мефедрон супер магаз

  15. Эта публикация обращает внимание на важность профилактики зависимостей. Мы обсудим, как осведомленность и образование могут помочь в предотвращении возникновения зависимости. Читатели смогут ознакомиться с полезными советами и ресурсами, которые способствуют здоровому образу жизни.
    Где почитать поподробнее? – нарколог на дом круглосуточно

  16. Мечтаете об отдыхе у моря без лишней суеты и переплат? На уютном Толстом мысу в Геленджике вас ждут чистые пляжи всего в 300 метрах и настоящий домашний комфорт. Сдаём комнаты и квартиры посуточно напрямую от собственника — забронировать жильё без комиссий и посредников можно на сайте https://otdykh-u-morya.ru/, где собраны честные фото, отзывы и доступные цены. Тишина, забота и море ждут вас!

  17. Нет сомнения купить мефедрон Парни начинается параноя Завтра посыль приходит как получать А?

  18. Привет Что хочу сказать по поводу работы магазина- просто супер связались сразу приняли заказ обработали и на следующий день он уже в пути. 3 дня и уже у меня. Качество отличное В общем респект Вам ребята так держать не сбавляйте оборотов и хорошо будет всем купить мефедрон вот вот..ждать неизветсности самое такое нервное….

  22. В общем магазу УВАЖУХА купить мефедрон Спасибо. Похож на ам23

  24. studio for rent in dubai bur dubaistudio apartment for sale in dubai sports citythe residences tower 6 https://lfzombiegames.com dubai properties head officejw marriott hotel apartments dubai creek in al jadaf

  26. I realized more interesting things on this fat reduction issue. One issue is a good nutrition is extremely vital when dieting. An enormous reduction in bad foods, sugary ingredients, fried foods, sweet foods, red meat, and white-colored flour products can be necessary. Having wastes parasitic organisms, and toxins may prevent targets for fat loss. While a number of drugs briefly solve the challenge, the awful side effects will not be worth it, they usually never present more than a non permanent solution. It is a known undeniable fact that 95 of fad diets fail. Thank you for sharing your opinions on this site.

  27. все огонь люди работаютпс за поддержку купить мефедрон Клад был описан понятно и ясно

  29. Vox Casino vox casino bonusy to nowoczesna platforma dla miłośników gier kasynowych online. Gracze mogą korzystać z szerokiego wyboru automatów gier stołowych oraz atrakcyjnych promocji przygotowanych zarówno dla nowych jak i stałych użytkowników. Dodatkowe korzyści zapewniają kody promocyjne darmowe spiny oraz bonusy bez depozytu dostępne w wybranych ofertach.

  31. Greetings, I do think your werbsite couild possibly bee hving interrnet browsder compatibilityy problems.
    Wheen I loook aat your site in Safari, itt looks fjne however, iff operning iin I.E.,
    iit has somee overlapping issues. I jjust wanted tto
    provide youu with a qujck heads up! Besikdes that, gret website!

    Loook inro mmy paage :: xxx2021.biz

  33. canadian online gambling regulations singapore (Christine) pokies that accept paypal, casino new south
    wales united states and betway poker australia,
    or european roulette layout usa

  34. commercial properties for rent in dubai investment parkdubai real estate investment reportgolden galaxy real estate dubai https://jeuxdenaruto.org real estate report dubairent a villa for one day in dubai

  35. Пришол 250 сделал 1к10-12 ппц уносит 250 у вас лучший магазу респект даже не ожидал что такой джив будет 1к10 меньше это ппц.. купить мефедрон Респект Магазу

  36. 2 bedroom apartments for rent in dip dubaiigo property development dubaiforum group real estate dubai https://fis2009.org Sienna Viewsproperty tax in dubai

  37. Я вам Касух советовал бы в скайпе этот вопрос решить. И в субботу и воскресенье магазин не работает так что вполне закономерно что вам не отвечают. купить мефедрон вот и я уже трясусь.

  38. Яхтенные прогулки в Адлере позволяют насладиться теплым климатом чистым морем и великолепными видами Кавказских гор. Это отличный способ провести свободное время во время отпуска: https://yachtkater.ru/

  39. freehold property in dubai visaapartments for rent in dubai near metro stationdubizzle ajman room for rent studio apartment dubai for sale joint ownership of property in dubaiceo of synergy international real estate dubai

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>