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.

7,953 thoughts on “JavaScript Image Optimiser (JSIO)”

  2. В этой медицинской статье мы погрузимся в актуальные вопросы здравоохранения и лечения заболеваний. Читатели узнают о современных подходах, методах диагностики и новых открытий в научных исследованиях. Наша цель — донести важную информацию и повысить уровень осведомленности о здоровье.
    Почему это важно? – клиника плюс

  3. В этой публикации мы исследуем ключевые аспекты здоровья включая влияние образа жизни на благополучие. Читатели узнают о важности правильного питания физической активности и психического здоровья. Мы предоставим практические советы и рекомендации для поддержания здоровья и развития профилактических подходов. Получить больше информации – himki clinica plus

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

  5. В этой медицинской статье мы погрузимся в актуальные вопросы здравоохранения и лечения заболеваний. Читатели узнают о современных подходах методах диагностики и новых открытий в научных исследованиях. Наша цель — донести важную информацию и повысить уровень осведомленности о здоровье. Давай разберёмся досконально – клиника плюс

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

  7. В статье рассматриваются различные стратегии борьбы с зависимостями включая проверенные методы и реальные истории успеха. Читатель узнает какие подходы наиболее эффективны и как начать путь к выздоровлению. Смотри что ещё есть – психотерапевт калуга бесплатно

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

  9. dubai properties group al khail gate Why Investing in Dubai Real Estate flat for rent in business bay dubai 3 bedroom townhouse for rent in barsha dubai

  10. Рекламное агентство «Транзит Медиа» специализируется на наружной рекламе в Крыму: брендировании транспорта плёнкой ORACAL, оклейке торговых точек и витрин, изготовлении баннеров и сеток с пропаем и люверсами. Компания располагает собственным производством https://transitmedia.ru/ — лазерная резка, термогибка акрила, ПЭТ и ПВХ. Все работы выполняются как в собственном боксе, так и на территории заказчика по Симферополю, Севастополю и Ялте.

  11. al wasl village al qusais Ajman Villa for Sale Villas for rent in Springs 5 villa for sale in the villa dubai

  13. Заказать качественную мебель в Орле — значит доверить дело профессионалам, которые знают своё ремесло. Компания «Квинта» более 17 лет создаёт мебель на заказ по индивидуальным размерам: кухни, шкафы-купе, гардеробные и многое другое. На сайте https://mebel-kvinta.ru/ вы можете бесплатно вызвать замерщика, получить 3D-проект, визуализацию и грамотную консультацию. Опытные дизайнеры и мастера-сборщики подскажут, как сэкономить на материалах без потери качества, и воплотят вашу идею в жизнь — стильно, надёжно и точно в срок.

  14. Три ключевые угрозы современного интернета — реклама слежка и цензура — AdGuard нейтрализует одновременно. Сервис предлагает VPN с надёжным шифрованием блокировщик рекламы и DNS-защиту для всех устройств. Ищете промокод adguard впн? Подключиться легко — достаточно перейти на adsguard.ru воспользоваться промокодом и сэкономить на подписке. Весь трафик идёт по зашифрованному каналу надёжно защищая личную информацию от провайдеров и трекеров. Совместимость обеспечена с Windows Android iOS и macOS.

  15. can you buy freehold property in dubai Villa for Sale in Sharjah buy apartments business bay buy property off plan in dubai

  16. Преимущества банкетных залов для юбилея

  20. meydan dubai property market Apartments For Rent In Dubai Marina furnished 2 bedroom apartment for rent in dubai houses in dubai for rent furnished

  21. Looking for crypto exchange review? Foreck.info offers comprehensive coverage of forex, crypto, and stock markets, including thorough analysis and future growth outlooks. News with in-depth analysis will help you stay up-to-date with current events. The platform showcases leading crypto exchanges, evaluated by experts through eight distinct weighted categories. Discover all the details by visiting the website.

  22. Visit https://btctoxmr.net/ – we help users exchange Bitcoin for Monero through a direct crypto-to-crypto swap flow. Enter the BTC amount, view the estimated XMR payout, and create an exchange order using the form below. The service supports fast Bitcoin to Monero exchange, no registration, and no KYC for standard crypto-to-crypto routes, with final terms and conditions displayed before the transaction begins.

  26. hotel apartment price in dubai One Bedroom Apartment for Sale in Dubai tenancy addendum for managed properties dubai union properties dubai motor city

  27. Visit the entrepreneurs’ blog https://heavyeyes.net/ , where you’ll find valuable advice, business plans, lessons, and business ideas for both beginners and experienced entrepreneurs. Learn all about business technologies, innovation, and creativity. This blog will help you stay on top of global trends and always be ahead of the curve.

  28. dubai claren tower apartment for rent Commercial Property For Rent In Dubai fifth estate dubai 6 bedroom Villas for rent in Al Furjan

  29. abu dhabi off plan 5 Bedroom Villa for Sale in Dubai Marina Promenade al rashidiya studio

  30. «Праздничный город» в Санкт-Петербурге и Ленинградской области занимается организацией свадеб, выпускных и корпоративов: оформление живыми цветами, драпировка тканью, кортеж, фотограф, видеооператор, торт, артисты и фейерверк — единый комплекс услуг. Ищете ведущий на корпоратив спб? Подробности на svadba-812.ru — полный спектр услуг с готовыми проектами и прозрачными ценами для безупречного праздника. — готовые проекты, прозрачное ценообразование и профессиональный подход к каждому мероприятию.

  31. edwards and towers real estate brokers dubai 1 Bedroom Apartment for Rent in Dubai Marina learn real estate in dubai dubai property prices by area

  32. Hey there just wanted to give you a quick heads up. The text in your content seem to be running off the screen in Safari. I’m not sure if this is a formatting issue or something to do with browser compatibility but I thought I’d post to let you know. The design and style look great though! Hope you get the problem fixed soon. Thanks

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

  34. buy villa in dubai Emaar Properties for Sale british buying property in dubai where do i invest

  36. commercial flats for rent in downtown dubai Apartments for Sale in Silicon Oasis Dubai harbour views dubai creek harbour national bonds uae benefits

  37. В лазерных дальномерах применяют линзу Френеля для коллимации излучения. Она легче обычной стеклянной в 20 раз что критично для ручных приборов. Правда даёт небольшую расфокусировку из-за дифракции на канавках – prolens.ru

  38. Организация юбилея в Щелково: выбор кейтеринга

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

  40. luxury off plan properties dubai 5 Bedroom Villa for Sale in Dubai danube properties dubai price property for rent in downtown dubai

  41. В этой статье мы рассмотрим современные достижения в области медицины, включая инновационные методы лечения и диагностики. Мы обсудим важность профилактики заболеваний и роль технологий в улучшении качества здравоохранения. Читатели узнают о влиянии медицины на повседневную жизнь и ее значение для современного общества.
    Погрузиться в научную дискуссию – tver clinica plus

  42. luxury furnished apartments for rent in dubai Dubai apartment for sale 1 bedroom garden view apartments atomic properties dubai

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

  46. luxury properties com Palm Jumeirah Houses for Sale rooms in villa in dubai for rent muhaisnah rta office

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

  49. off plan property for sale Jumeirah Villas for Sale oakville residence dubai rental apartment dubai investment park

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>