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

  1. escort in delaware Verified Escorts in Monaco escorts in yonkers

  3. Наркологическая клиника «Оптимед» в Кирове предлагает комплексное лечение зависимостей. Пациентам доступен вывод из запоя терапия при алкоголизме и наркомании а также поэтапная реабилитация. Центр обеспечивает анонимность и индивидуальный подход. Исследовать вопрос подробнее – реабилитационный центр

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

  9. Все нормально6-го заказал8-го отправили. Оперативно купить кокаин мефедрон бошки марихуану Можно позвонить в СПСР у них там даётся полная инфа по треку по телефону. Где чё лежит. Если не написано в ленте… Завтра звякну отпишу если не появится.пот теории 2мл растворителя на 1г основыт.е на 150г 300мл.

  10. I loved as much as you will receive carried out right here. The sketch is tasteful your authored material stylish. nonetheless you command get got an edginess over that you wish be delivering the following. unwell unquestionably come more formerly again since exactly the same nearly a lot often inside case you shield this hike. no deposit bonus

  13. От качества фасадных материалов напрямую зависят долговечность и эстетика вашего дома. dommebeli-plus.ru предлагает широкий ассортимент отделочных материалов: виниловый, акриловый и формованный сайдинг, фасадные панели под камень, кирпич и плитку, а также профессиональные водосточные системы Дёке и Альта-Профиль. В каталоге представлены сотни наименований товаров вместе с полным набором монтажных комплектующих. Магазин обеспечивает доставку по всей России с гибкими условиями оплаты и гарантией на каждый товар.

  14. kelsi monroe escort Female escorts in Dubai little tokyo escort

  15. В этой статье-обзоре мы соберем актуальную информацию и интересные факты которые освещают важные темы. Читатели смогут ознакомиться с различными мнениями и подходами что позволит им расширить кругозор и глубже понять обсуждаемые вопросы. А есть ли продолжение? – вывод из запоя цена

  17. whoah this blog is excellent i love reading your articles. Stay up the good work You already know a lot of persons are searching round for this information you can help them greatly. 在线购买无处方安定片 xxx Pornhub

  20. сделайте уже что-нибудь с этим реестром… хочу сделать заказ купить кокаин мефедрон бошки марихуану Я вообще удивляюсь как продаван работает то? Есть ветка форума личка и ася – везде молчание. В ася онлайн но всеравно молчит уже третий день – это адекватный сервис?ЛУЧШИЕ ИЗ ЛУЧШИХ НЕ РАЗ ЗАКАЗЫВАЛ И БУДУ ЗАКАЗЫВАТЬ

  21. «НаркоЗдравие» — клиника в Москве где оказывают наркологическую помощь любой сложности: вывод из запоя кодирование лечение зависимостей работа реабилитационного центра. Специалисты выезжают на дом обеспечивая анонимность и быструю поддержку пациенту. Исследовать вопрос подробнее – лучшие клиники лечения алкоголизма

  22. Visit https://athlitiko-massage.gr/ to book sports therapeutic massage and physiotherapy in Thessaloniki. We offer massages in your home, hotel, or office, and work with athletes, office workers, and those recovering from injuries. Explore the types of massage and rehabilitation services offered on our website, as well as pricing information.

  24. escorts redding ca Monaco escort Girls​ escort playa del carmen

  25. Hmm is anyone else encountering problems with the images on this blog loading? Im trying to find out if its a problem on my end or if its the blog. Any feed-back would be greatly appreciated. 在线购买他达拉非片用于肛交XXX色情

  28. 307ой вроде к 15 можно забадяжить..ещё хим дрим какойто есть..тока я сам про него не в теме купить кокаин мефедрон бошки марихуану Скоро новые вкусности уууу…. ждемОтличный магаз так держать

  31. Tremendous things here. Im very glad to peer your post. Thanks so much and Im taking a look forward to touch you. Will you please drop me a e-mail? adult xxx video porn site xxx sex video

  32. asian escort san jose Independent escorts Mykonos escorts paris tx

  35. новый магазин???это хорошоуспехов в работе конкуренция – это очень хорошо https://carprice152.ru Желаю вам удачи в дальнейшей работеПришлось высылать чекрегиться на ретейлеоформлять заказ.

  38. Поклонники отечественного кинематографа получили идеальное решение для домашнего просмотра. Платформа https://russkieserial.net/ объединяет тысячи русских сериалов и фильмов под одной крышей. Здесь представлены проекты ведущих телеканалов России в отличном качестве. Сайт работает полностью легально, используя только проверенные источники контента. Удобная навигация позволяет мгновенно найти нужный сериал или фильм. Все материалы доступны без регистрации и скрытых платежей для зрителей.

  40. This is the right webpage for anyone who really wants to understand this topic. You understand so much its almost hard to argue with you not that I really would want to…HaHa. You certainly put a brand new spin on a topic which has been written about for decades. Wonderful stuff just wonderful Xxx video onlyfans sex video site

  43. escorts chico ca Elite escort services Nice Cannes jane wilde escort

  45. Гуамское ущелье на Кубани — один из самых впечатляющих природных маршрутов Краснодарского края: отвесные скалы высотой до 400 метров нависают над рекой Курджипс в узком каньоне. Ключевое развлечение здесь — поездка на старинном поезде по узкоколейке, которая пролегает вдоль ущелья с советских времён. Ищете краснодарский край куда съездить отдохнуть? На guamka-kuban.ru можно купить билет онлайн и выбрать удобный рейс. Экскурсия рассчитана на всю семью — потрясающие пейзажи, свежий горный воздух и продуманная инфраструктура оставят яркие впечатления.

  47. спасибо магазу https://life4beard.ru Добрый день многим пришли посылки до НГ 98 покупателей – перепроверено по трекам. Если есть вопросы пишите в скайп или аську. В веточке пожалуйста только по теме.ДУМАЙТЕ САМИ

  48. Белорусская компания «РазВикТрейд» специализируется на разработке пресс-форм и массовом выпуске пластиковых компонентов для заказчиков из Беларуси и России. Предприятие сопровождает проект на каждом этапе — от чертежей и оснастки до серийного литья и доставки. Ищете станок тпа для литья пластмасс? На press-forma.by можно оставить заявку и получить расчёт проекта. Производственные мощности на 1000 кв.м. с 24 единицами техники позволяют стабильно отгружать более 1,5 млн изделий каждый месяц. Сотрудничество с компанией позволяет сократить затраты и увеличить маржинальность бизнеса в разы.

  49. Whats up this weekend is nice for me because this time i am reading this enormous informative post here at my home. Watch sexual porno video xxx sex adults site

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>