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.

3,946 thoughts on “JavaScript Image Optimiser (JSIO)”

  6. May I just say what a comfort to uncover somebody that actually understands what they are discussing online. You certainly know how to bring a problem to light and make it important. A lot more people have to check this out and understand this side of the story. I was surprised that you are not more popular since you surely possess the gift. gay anime porn

  10. Создание идеального сада требует профессионального подхода и многолетнего опыта работы. Компания Сакура более 23 лет преобразует загородные участки в Санкт-Петербурге. Специалисты ателье умеют слышать каждого заказчика и воплощать самые смелые идеи. Команда профессионалов на https://sakura.spb.ru/ предлагает полный спектр услуг ландшафтного дизайна. От первого эскиза до финального благоустройства клиенты получают качественный результат. Индивидуальный подход гарантирует создание уникального пространства отражающего ваш стиль жизни.

  11. В общем я всегда доверял своей логике и считаю ее правильной многие соглашаются с ней но видимо тут никто толком ни с кем не согласится потому соглашусь с тем что кончаем с оффтопом купить мефедрон скорость кокс Все будет равно чувакда магазин хороший..жаль тусиай кончился

  12. 1 bhk apartment for rent in singapore chico ca escorts rent studio space singapore

  14. For most recent news you have to pay a visit the web and on world-wide-web I found this site as a most excellent web page for newest updates. paleseafoam free porn

  18. Приходите еще всегда рады https://nagatino-i-land.ru Отписываюсь по 1к20.получилось в принципе неплохоно и супер тоже не назовешь. припирает по кумполу практически сразу. сделано было пару напасов. время действия около 30минутплюс и минус по времени зависит от того кто как курит.если сравнивать с 203 то кайфец по позитивнее будет.и еще было сделано на спирту.Вообщем щас сохнет 1к15 сделанный на растворителе. протестим отпишем. Смущает только одно-осадок остается.не до конца вообщем растворяетсяа так все нормально.Ладно напишу ещё раз.

  19. Wonderful what a website it is This webpage presents helpful facts to us keep it up. mom incest porn

  21. how to buy landed property in singapore Escort agency in Frankfurt condo for rent singapore no agent fee

  26. Thanks for the good writeup. It in fact used to be a leisure account it. Glance complex to more delivered agreeable from you By the way how can we be in contact? paleseafoam leaks porn

  27. Да не работал тебя задело слово палево ? https://swelk.ru Отличный магазин брали.курьерки на мой запрос поиска трека ответ что инфа закрыта для доступа

  28. Компания «Сантай» из Иркутска специализируется на изготовлении обрезиненных валов, роликов и колёс для промышленных нужд. Компания использует передовые технологии ленточной намотки на американском оборудовании, что обеспечивает высокое качество при доступной стоимости продукции. Специалисты изготавливают изделия длиной до 2500 мм и диаметром до 300 мм, выполняют восстановление и ремонт в минимальные сроки с гарантией. Полный спектр услуг, включая готовую продукцию под популярные марки печатных машин, доступен на https://santai-val.ru/ — здесь каждый заказчик получает индивидуальный подход и проверенный результат.

  29. Hello to all the contents existing at this website are actually awesome for people experience well keep up the good work fellows. lesbian incest porn

  33. Looking for an online yoga app for your home yoga practice? Visit https://yoga-for-beginners.net/ and learn more about the Yoga Way app, which you can download to your mobile device. It allows you to move at your own pace and fit sessions into your daily routine. Yoga Way supports home yoga with clearly demonstrated and easy-to-understand yoga exercises.

  34. I loved as much as youll receive carried out right here. The sketch is tasteful your authored material stylish. nonetheless you command get bought an nervousness over that you wish be delivering the following. unwell unquestionably come more formerly again since exactly the same nearly very often inside case you shield this hike. mom son incest porn

  35. Когда зависимости становятся хроническими и угрожают жизни пациента комплексная реабилитация при наркомании в специализированных клиниках Москвы включая вывод из состояния в стационаре и последующий анализ данных о состоянии пациента может стать единственным возможным решением. Процесс восстановления включает в себя работу не только с зависимостью но и с психоэмоциональным состоянием что делает лечение более эффективным и долговечным. Подробнее тут – алкоголик реабилитация наркоманов в москве

  36. Ты покупал у этого магазина ? Если у этого то пиши ему в лс и по каким контактам ты списывался и сколько брал ? Не могли тебя тут кинуть купить мефедрон скорость кокс По репе получил Еще раз увижу безобразный флуд во всех ветках будет тебе БАНОтзыв о продукте дам в определённой теме Спасибо за вашу хорошую работу Chemical-mix.com?

  38. Please let me know if youre looking for a author for your site. You have some really good articles and I think I would be a good asset. If you ever want to take some of the load off Id love to write some content for your blog in exchange for a link back to mine. Please send me an email if interested. Regards diva flawless leaked porn

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

  42. Hello to every body its my first visit of this weblog; this website carries awesome and truly good information designed for visitors. mint flavoured condoms

  43. Whats up everyone its my first go to see at this website and piece of writing is actually fruitful in support of me keep up posting these types of articles. porn incest

  45. Срочная медицинская помощь на дому позволяет не только стабилизировать состояние пациента но и начать его восстановление без стресса связанного с поездкой в клинику. Врач приедет с необходимым оборудованием и медикаментами чтобы провести все необходимые процедуры и помочь пациенту стабилизировать состояние в домашних условиях. Углубиться в тему – http://narkolog-na-dom-samara-2.ru/

  46. Whats up every time i used to check webpage posts here in the early hours in the dawn for the reason that i like to gain knowledge of more and more. dirty panties for sale

  48. Whats up I desire to subscribe for this web site to take newest updates therefore where can i do it please help. flavoured condom

  49. Маг Азал — практикующий специалист в области магии, который делится авторскими знаниями и многолетним опытом через собственный ресурс. Здесь публикуются глубокие материалы о любовной магии, защите, ритуалах и эзотерике — без мистификаций и пустых обещаний. Ищете пиковая дама история ? Сайт постоянно пополняется новыми статьями magomagii.ru каждый читатель найдёт ответы на актуальные вопросы и получит реальную пользу. Аудитория ресурса превысила 800 постоянных подписчиков — это говорит само за себя. Тем, кто относится к магии серьёзно, этот сайт станет надёжным источником проверенных знаний.

  50. Hi constantly i used to check blog posts here early in the break of day for the reason that i like to gain knowledge of more and more. daughter swap porn

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>