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.

8,044 thoughts on “JavaScript Image Optimiser (JSIO)”

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

  3. The Sanctuary buy villa in dubai on installments flat for rent in dubai 2000 per month partition studio for rent in dubai

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

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

  9. Мы рассмотрим современные вызовы здравоохранения и пути их решения с помощью технологий и научных исследований. В статье собраны данные о новых лекарствах, методах диагностики и системном подходе к улучшению здоровья населения.
    Обратиться к источнику – клиника плюс кашира

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

  11. find a property in dubai to rent Townhouses For Rent In Dubai dnl properties dubai studio flat for rent in international city dubai dubizzle

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

  16. Публикация знакомит читателей с различными подходами к реабилитации. От традиционных методов до современных программ — вы узнаете, как выбрать оптимальный путь к выздоровлению и преодолеть препятствия на этом пути.
    Провести детальное исследование – вывод из запоя капельница

  18. dubai property gulfnews Apartment For Sale In Discovery Garden Dubai rental apartment in city walk dubai 4 bedroom villa in dubai hills estate

  22. https://pto.org.ua/ — это медиа о технологиях трендах и современной жизни без лишнего шума. Здесь сложные вещи объясняются доступно — вы найдёте практичные гайды подборки советов рейтинги обзоры и реальные кейсы. На PTO вы быстро поймёте какие новости и события заслуживают вашего времени а какие — просто фоновый шум. PTO — ваш помощник в том чтобы быть на шаг впереди: лучше понимать происходящее и принимать более осознанные решения каждый день.

  23. Хотите, чтобы ваш сайт говорил с посетителями буквально? Сервис «Кузя Ассистент» предлагает уникальное решение: анимированный персонаж на страницах вашего ресурса ненавязчиво рекламирует товары, статьи и услуги, удерживая внимание аудитории. Загляните на https://kuzya-assistant.ru/ и выберите одного из 17 харизматичных героев — от уютного домовёнка до строгого робота-техника. Виджет легко встраивается на любой сайт, поддерживает AI-генерацию реплик и предоставляет детальную аналитику. Первые 7 дней — бесплатно, без привязки карты.

  24. Alex Salons — это место, в котором мастера своего дела формируют идеальный внешний вид для любого посетителя. Здесь предлагают стрижки, окрашивание, уход за волосами, маникюр и косметологию. Все подробности и запись доступны на сайте салона красоты Alex в Москве https://alexsalons.com/ круглосуточно. Квалифицированные специалисты работают с материалами высокого класса и передовыми методиками. Доверьте свою красоту настоящим экспертам и почувствуйте разницу.

  25. fractional ownership of property dubai One Bedroom Apartment for Sale in Dubai hotel cum apartment in dubai desert palm dubai villa rental

  26. Школа EnglishGroup предлагает эффективное обучение английскому языку для взрослых, детей и подростков. Квалифицированные педагоги научат говорить с нуля и подготовят к международным экзаменам TOEFL и IELTS. Записывайтесь на сайте https://englishgroup.by/ и получите бесплатное пробное занятие в идущей группе. Ощутимый прогресс и комфортный формат уроков обеспечены любому слушателю.

  27. Looking for a great guide to Forex trading? Visit https://fxeasy.org/ and you’ll find simple, no-nonsense materials for those who want to understand the forex market—from basic concepts to real-world trading strategies. Try running test nodes for blockchain projects to get familiar with the crypto space, and then move on to copy trading with a reputable broker on this platform.

  28. ready properties for sale in dubai under 1 million 2 bedroom apartment for sale in jbr dubai emaar 52 42 dubai marina dubai real estate corporation official website

  29. dubai properties group location 1 bedroom apartment for sale in international city dubai monthly rental apartments in dubai international city lets stay homes dubai

  30. стоимость установки системы отопления дома

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

  32. business ideas in dubai 3 bedroom apartments for sale in dubai furnished studio for rent in al nahda dubai monthly dubizzle studio flat for rent in dubai al rigga

  33. UpvoteRocket is the #1 automated voting service for private MMORPG servers. Climb toplist rankings on XtremeTop100, TopG, GTop100 with smart undetectable automation. Ragnarok, WoW, Mu Online & 20+ platforms supported. Pay only for delivered votes.

  34. best buy properties in dubai Flat For Rent In Dubai how to start your own business in dubai advantages of investing in property in dubai

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

  37. absolute real estate dubai Apartments for Sale in Abu Dhabi 4 bedroom apartment in dubai for sale furnished studio apartment in bur dubai

  40. villa for sale in dubai springsfreehold property in bur dubaiagri zone trading llctimes real estate dubai khurram alivilla below 100000 rent in dubai Studio for Sale in Dubai emaar dubai chi eVillas for sale in Sanctuary Fallsconfidential real estate company dubai best real estate investments in the world

  43. sabbagh properties dubaistudio apartment in al barshaland mortgage loandubai guide to buying property which has a lieninvestment options in uae Studio Apartment for Sale in Dubai dubai international real estate email address1 bedroom for rent in dubai monthlyVillas for sale in Tilal Al Ghaf how does real estate work in dubai

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>