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

  2. Ну просто выглядело твое сообщение как мессага на параное https://sudulai.top СПАСИБО :pink_eye.: ТУТ ВСЁ РОВНОзакладок нет и представителей тоже в Ярославль можем отправить курьером срок доставки 1 день.

  8. Ищете настоящие скидки, акции и промокоды в России? Посетите сайт Огонёк https://ogonek.su/ – присоединяйтесь и экономьте! У нас подборка лучших скидок ежедневно. На сайте вы сможете увидеть лучшие скидки дня, а также увидеть все скидки и промокоды магазинов. Удобный поиск по категориям, что позволит быстро найти необходимую скидку! Подробнее на сайте.

  11. Ребята у chemical-mix все на высшем уровне https://haroro.top такая же фигня продован сказал что некоторые только начинаю мониториться вообщем спср дерьмово работаетЯ лично в первый раз сделал заказ в этом магазине- оформилпо аське его безналичночто очень удобно для менядаже из дома не выходилсутки прошлибыл дан трекчерез два дняпосылка была у меня в городе.Следил за ее перемещением на сайте курьераопять же-не выходя из дома.

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

  15. Интересный контент сегодня — это не просто развлечение, а способ узнавать новое каждый день. Сайт https://vseinteresno.com/ собирает познавательные материалы на самые разные темы: наука, история, природа, технологии и необычные факты со всего мира. Читатели находят здесь короткие и ёмкие статьи, которые расширяют кругозор без лишней воды. Если хочется каждый день открывать что-то новое — этот ресурс станет приятной привычкой для любознательного человека.

  21. Этот информационный материал подробно освещает проблему наркозависимости, ее причины и последствия. Мы предлагаем информацию о методах лечения, профилактики и поддерживающих программах. Цель статьи — повысить осведомленность и продвигать идеи о необходимости борьбы с зависимостями.
    Прочесть всё о… – наркологический центр в нижнем новгороде

  22. Компания «Доска Брус СПб» — производитель пиломатериалов полного цикла: от лесозаготовки до доставки покупателю. Завод производит свыше 1000 кубометров продукции в месяц с соблюдением стандартов ГОСТ 8486-86. Ассортимент включает доску, брус, брусок, вагонку, блок-хаус, шпунт, террасную доску, планкен и фанеру. Ищете брус клееный 40х80 мм? Оформить заказ по выгодной цене можно на doskabrusspb.ru — доставка своим автопарком по Санкт-Петербургу и Ленинградской области. Контроль на каждом этапе производства гарантирует высокое качество без переплат посредникам.

  23. Они бывает работают очень хорошо бывает тупят и парят мозги…. нуна вздрочить их отделение…. Купить Кокаин Купить Мефедрон Причем тут какой то смоки и Екб ко мне ? Иди проспись сначала и смотри куда пишешь. Я не работаю в Екб.отличный магазин качество супер товар радует

  28. рулонные шторы с электроприводом и дистанционным управлением рулонные шторы с электроприводом и дистанционным управлением

  30. Общение оператора 10/10-всегда все грамотно и вежливо объяснит. Таким оператор и должен быть https://airbits.xyz Как связаться?Да шляпа какая-то менеджер работает из рук вон плохо и валит все на курьера. Абсолютная неразбериха понять кто и в каком месте накосячил достоверно – просто невозможно но тем не менее факт остается фактом: больше недели я ожидаю отправку заказа и это только отправка причем разумеется с полной предоплатой. Общались с манагером через скайп и через аську очень муторно сообщения теряются на оставленные мессаги в оффлайне не отвечает да и в онлайне появляется довольно редко.

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

  38. да да 100 0 Купить Кокаин Купить Мефедрон перестань курить сделай перерывчикмой заказ выцслали.

  42. «Охотник за разумом» — мрачный криминальный триллер Netflix: агенты ФБР Холден Форд и Билл Тенч в конце 1970-х первыми решились исследовать разум серийных убийц и создали науку поведенческого профайлинга. Ищете охотник за разумом смотреть онлайн сериал охотник за разумом? Все 19 серий двух сезонов доступны бесплатно на ohotnik-za-razumom-smotret.net с профессиональной озвучкой LostFilm и SDI Media. Точная атмосфера 1970-х, холодная режиссура Финчера и жуткие диалоги с реальными маньяками превращают каждый эпизод в интеллектуальное погружение в истоки криминальной психологии — must-watch для любителей умного детектива.

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

  45. MoscowWaterWays — удобный сервис для организации речных прогулок по Москве с отправлением от главных городских причалов. Маршруты охватывают отправление от Китай-города, Воробьёвых гор, Парка Горького, Москвы-Сити и прочих популярных локаций столицы. Ищете расписание теплоходов причал кленовый бульвар? На платформе moscowwaterways.ru можно выбрать маршрут и оплатить билеты онлайн — они придут на электронную почту. В расписании предусмотрены специальные рейсы на 9 Мая, День города, выпускные вечера и новогодние праздники. Все причалы находятся в шаговой доступности от станций метро и МЦК, что делает посадку быстрой и комфортной.

  48. Анапа — один из самых популярных курортов Черноморского побережья, и добраться до него с комфортом теперь проще, чем когда-либо. Сервис https://anapa-taxi-transfer.ru/ предлагает профессиональные услуги такси и трансфера с удобным онлайн-калькулятором стоимости поездки прямо на сайте. Официально зарегистрированная компания работает круглосуточно, обслуживает все основные маршруты и располагает собственным автопарком. Опытные водители встретят вас в аэропорту или на вокзале, а прозрачное ценообразование избавит от неприятных сюрпризов. Путешествуйте с удовольствием!

  49. Обязательно позвонить должны как позвонят легче забрать самому чем ждать пока курьер доставит https://jixingang.top Не вздумайте платить ему без Гаранта через которого он не работаемэтим самым доказывает свою не надежностьПервые 1.5 часа эйфория и сосредоточеность на том чем занят в голове мелькают гениальные идеи

  50. Посетите сайт https://kotel-54.ru/ и вы найдете в наличии на складе, в Новосибирске, готовые и прошедшие заводские испытания котельные мощностью от 80квт до 12 мвт, котлы, горелки, электрические котельные, запасные части для горелок, трубопроводная арматура и другие товары по выгодной стоимости, в том числе с доставкой по регионам России. Наш ассортимент удовлетворит любые потребности покупателя.

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>