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

  1. Магазин чёткий… Нареканий нет… https://ecard24.ru Вообщем так с момента отправки из курьерской службы до рук курьера в нашем городе прошло 3 дня забрал я значительно позже но это не суть.огромная потеря популярности и быстрый спад клиентов.

  6. Для семьи это тоже имеет большое значение. Пока врач в пути родственники часто совершают одни и те же ошибки: пытаются «отпаивать» человека через силу смешивают несовместимые медикаменты дают советы которые только повышают тревогу спорят или требуют немедленно взять себя в руки. Профессиональный выезд снимает эту хаотичность. После осмотра врач объясняет какие симптомы связаны с алкогольной интоксикацией какие могут указывать на осложнения что допустимо дома а что требует перевода в стационар. В этом и состоит ценность выезда: он возвращает контроль над ситуацией и позволяет начать лечение без лишних задержек. Получить больше информации – вызвать нарколога на дом в воронеже

  9. ответь те на мыло я еще вчера вам написал https://nailcourses.ru Отличный магазинпиши в скайп все работает мне всегда отправляют все на уровне

  10. «Великолепный век» — турецкий исторический сериал 2011 года о блеске и жестокости Османской империи эпохи Сулеймана Великолепного. 139 серий четырёх сезонов — дворцовые заговоры, сражения и любовные драмы: рабыня Хюррем проходит путь от пленницы до властной фаворитки, влияющей на ход истории. Ищете великолепный век все серии? Все серии доступны на velikolepnyy-vek-smotret.online бесплатно в хорошем качестве с русским дубляжом. Великолепные костюмы, детально воссозданные интерьеры Топкапы и сильная актёрская игра дают ощущение настоящего погружения в эпоху XVI века. История, мелодрама и придворный триллер здесь неотделимы друг от друга — сериал держит в напряжении без единой слабой серии до самого конца.

  11. buying a private condo in singapore Buying Commercial Property Singapore new freehold condo singapore

  15. Хочу сказать большое спасибо за бонус за помошь сайту зе бест https://mymaster-24.ru очень сложно дописаться до них=( а цены хорошие.Приветя покупал у вас 30г жв60 меня очень не устроило качества 1х5 и неочём не какого эффектаЯ попросил поменять товар на другой и от вас последовал отказ то есть товар возврату и обмену не подлежитобоснуйте отказ если товар не соответствовал заявленному качеству

  17. buying uk property from singapore Landed Property for Sale Singapore penthouses for sale in singapore

  19. Фотография — это не просто нажатие кнопки, это язык, которому можно и нужно учиться. Именно для тех, кто делает первые шаги с камерой в руках, создан онлайн-журнал для фотолюбителей. Здесь публикуются практичные материалы на любой вкус: от азов астрофотографии и техники стек-фокуса до увлекательного фризлайта — рисования светом. Заглянув на https://photojournal.online/, читатель найдёт советы признанных мастеров, в том числе предметного фотографа Олега Семёнова, а рубрики «Азбука фотографа» и «Спроси у мастера» превращают сложную теорию в понятные инструкции. Новые статьи выходят регулярно, так что каждое посещение сайта приносит свежие знания и вдохновение для новых творческих экспериментов.

  20. «Делай Промо» — SaaS-платформа полного цикла для запуска чековых акций, программ лояльности и мотивации продавцов без участия разработчиков. Бренды и агентства получают конструктор лендингов, OCR-распознавание чеков, мультиканальные чат-боты для Telegram и VK, кодовые механики с защитой от брутфорса и сквозную аналитику с выгрузкой в Excel — всё в едином окне. На http://makerpromo.ru/ уже зарегистрировано свыше 24 000 чеков и 18 000 активных пользователей. Проект находится на стадии закрытого бета-теста и предлагает участникам специальные условия подключения.

  23. Компания обеспечивает поставки оксовольфрамата гафния — редкого соединения для специфических нужд химической и атомной промышленности. https://rms-ekb.ru/catalog/sudovoi-kanat/

  24. жасти моё уважение к тебе и респект красавица. но ес честно ты нашла чет не то что было совсем другое как сказал уже уважаемый дельфин там было много сути и честных отзывов :monetka: ну лан проехали если так вроде все все поняли. купить кокаин мефедрон бошки марихуану лучше магаз клёвый :bravo:сервис на высоте

  25. Академия Tochka-G объединяет ведущих экспертов и тренеров в области эстетической медицины для передачи уникального клинического опыта. Информация о преподавательском составе представлена на https://tochka-g.pro/.

  26. Лечение стрессового недержания мочи с помощью современных аппаратных методик дает женщинам возможность вернуться к активному образу жизни без дискомфорта. Подробности о научно-практическом подходе читайте на https://tochka-g.pro/.

  34. СПАСИБИЩЕ ОГРОМНОЕ ЗА СЕРВИС купить кокаин мефедрон бошки марихуану Но зато в том случае будут доказательства что селлер обещал одно а пришло совсем другое Так что я правильно написал ;Бро слова это хорошо но нам нужен наш клад и не более не кто не хочет тебя винить и общаться сдесь на эту тему а на оборот писать только хорошие отзывы о вашем магазе пойми и ты бро слово паника сдесь не уместно сдесь идет разбор по факту согласись

  36. Фраксель помогает обновить кожу на клеточном уровне устраняя пигментацию морщины и расширенные поры. Узнать о преимуществах лазерного омоложения Fraxel можно на https://www.virsavia.ru/.

  40. Технология Empower RF — это инновационная многофункциональная платформа для решения широкого спектра эстетических и функциональных гинекологических задач. Ознакомиться с возможностями оборудования можно на https://tochka-g.pro/.

  41. Оформить кредит с испорченной историей или без подтверждения дохода — возможно. Профессиональные брокеры сотрудничают с банками напрямую и понимают, какие программы подходят для нестандартных ситуаций. Ищете кредиты? Специалисты vk.com/mewokkreditovpomoschvkredite подберут выгодные условия и сопроводят сделку от заявки до выдачи денег. Помощь оказывается физическим лицам по всей России. Консультирование бесплатно — вознаграждение берётся исключительно за достигнутый результат.

  42. Минимально инвазивная хирургия требует использования надежных и высокотехнологичных расходных материалов. Весь спектр продукции для операционных блоков представлен на https://invasive.ru/.

  46. Отличный магазинпроцветания дальнейшего и удачных продаж купить кокаин мефедрон бошки марихуану а так всё от души огромное спасибо ещё не раз к вам обращюсьРебята Вы просто красавцы… На вышем уровне срок доставке очень оперативная и спрятали хорошо. Советаю…

  47. Коррекция фигуры и лечение целлюлита в клинике проводятся с использованием эффективных аппаратов VelaShape и аппаратов лимфодренажа. Программы моделирования тела ищите на https://www.virsavia.ru/.

  49. james dyson singapore bungalow Landed Property for Sale Singapore new launch condo singapore

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>