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.

10,226 thoughts on “JavaScript Image Optimiser (JSIO)”

  7. vulkan casino promo code п»їKasyno Online Polska 7bit casino no deposit bonus

  10. Электрический тёплый пол — практичное решение для равномерного обогрева квартиры, дома или офиса без громоздких радиаторов. Ищете электрический теплый пол для ванной купить? На теплый-пол-электрический-купить.рф представлен широкий ассортимент нагревательных матов под плитку и ламинат, кабелей в стяжку, терморегуляторов и систем антиобледенения кровли, ступеней и труб. Около 70% товаров постоянно в наличии на складе в Москве с доставкой в день заказа по всей России через СДЭК, Почту России и «Деловые Линии». Магазин предлагает выгодные цены и персональные скидки от указанной стоимости.

  11. spiny za rejestracje Kasyno Bonus bez Depozytu za Rejestracje blackjack online multiplayer free with friends

  14. Школа-студия Юлии Бурдинцевой в Москве предлагает профессиональное обучение парикмахерскому искусству по доступным ценам. Здесь можно освоить специальность с нуля или повысить квалификацию: от базовых курсов для начинающих до программ колористики, мужских стрижек и стилистики. Практические занятия проходят на реальных моделях, что позволяет студентам https://j-center.ru/ быстро набраться опыта и уверенности. Преподаватели-практики делятся актуальными техниками и секретами профессии, а удобное расположение и гибкий график делают обучение комфортным для всех желающих освоить востребованную специальность.

  15. gry na telefon po polsku Najlepsze kasyna internetowe co to jest filtrowanie anizotropowe

  16. Доступ к настройкам маршрутизатора через 192.168.0.1 предполагает физическое подключение и ввод дефолтных паролей. Веб-интерфейс позволяет изменить пароль Wi-Fi, настроить безопасность и управлять подключенными устройствами. Подробная инструкция доступна на https://my-obzor.com/ru/kak-voyti-v-nastroyki-routera-192-168-0-1/ с пошаговыми скриншотами. Регулярная проверка параметров защищает домашнюю сеть от несанкционированного доступа.

  19. fair go australia pokies, real money online pokies
    usa and casino online real money australia, or bouka spins 5 pound no deposit bonus (Rolando) deposit bonus 2021

  23. Авто из Кореи Покупка машины из Кореи — это возможность получить автомобиль с прозрачной историей ДТП. Все данные о машине фиксируются и проверяются экспертами.

  28. kasyno free spin bez depozytu п»їKasyno Online Polska gry kasynowe automaty

  30. best online pokie canada, usa online casino no deposit
    and good morning united states time slot, or registration bonus casino usa

    Feel free to visit my page american roulette table payouts (Bryon)

  35. real money poker sites canada, black chip poker united kingdom
    and real money no deposit bonus codes 2021 (Terrell) money online casino canada
    app, or new zealandn free chip casino

  42. промокод на бронирование отелей

  43. The overall style and organization of this post make it very simple to follow and follow while also keeping the discussion flexible enough for different viewpoints which is something that always helps create more thoughtful and engaging conversations online. https://comparebarbecue.nl/

  47. Автономная некоммерческая организация дополнительного профессионального образования МИСО предлагает широкий спектр курсов повышения квалификации и профессиональной переподготовки для специалистов различных отраслей. Учреждение работает на основании официальной лицензии, что гарантирует качество образовательных услуг и признание выдаваемых документов государственными и коммерческими структурами. На сайте https://misokmv.ru/ вы найдете актуальную информацию о программах обучения, стоимости курсов и сможете ознакомиться с образцами выдаваемых документов. Организация поддерживает постоянную связь со слушателями через телефон, электронную почту и социальные сети, обеспечивая удобный формат взаимодействия и оперативные ответы на все вопросы.

  49. goldbet kody na darmowe spiny Najszybciej wyplacajace kasyna w Polsce jak dziaЕ‚a viagra

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>