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.

12,715 thoughts on “JavaScript Image Optimiser (JSIO)”

  1. Установки промышленной очистки воды подходят производствам любого уровня: избавляют воду от железа солей жёсткости микроорганизмов и примесей. Подобрать оборудование под ваш источник поможет https://pws.world/promyshlennye-ustanovki/ — здесь представлены готовые комплексы и индивидуальные решения. Качественная вода делает продукцию лучше и продлевает работу производственного оборудования.

  3. Купить гашиш бошки Купить Бошки Шишки Мефедрон Кокаин

  4. Thanks for expressing your ideas. I’d personally also like to convey that video games have been ever evolving. Technology advances and enhancements have made it simpler to create authentic and interactive games. Most of these entertainment games were not as sensible when the actual concept was first of all being tried. Just like other designs of technological innovation, video games as well have had to progress by means of many generations. This itself is testimony on the fast continuing development of video games.

  5. It is quite rare to find a summary that hits all the right notes without drifting off-topic but your post remained focused and delivered a very satisfying reading experience from the very first paragraph. porno ia

  6. you are in reality a just right webmaster. The web site loading pace is amazing. It seems that you’re doing any distinctive trick. Moreover, The contents are masterwork. you have done a fantastic job in this topic!

  7. Aw, this was a really nice post. In idea I would like to put in writing like this moreover ? taking time and actual effort to make a very good article? but what can I say? I procrastinate alot and in no way seem to get one thing done.

  8. polskie kasyno bez weryfikacji uniqa wyplata odszkodowania opinie

  9. Сайт купить марихуану Купить Бошки Шишки Мефедрон Кокаин

  10. Chhaps nked leatherFat naked woma picsTeeen t shirt
    designsJasmiune sst claire orgy vidsArgentine hujks nudeAdult cartoohist billetDrunkk ajateur
    leswbian paarty kissExplloited een pornFreee fuck movies 69Free gold dyke pon videosBreaset enhandement pillks available inAdilt
    mzssage inn easyern ncFree amateur houseewife picturesFreee haiiry creampie videosMonokini swiumsuit teeen galleryMatrure ussy cloose upI lett heer lck the wrapper lyricsBriahna gets fuckedPrre teen mode
    tErtic spankin storiesNudde peis galleriesSexy
    grls wth chatroulleteModeling assHow tto have seex step byy stepMagzine oof couplles
    havcing sexFrree amater sswinger pics partiesCosin likes cockInterracikal wwife haard core pixBiig titt boxingFreee sexx ovie communityCollege
    girlss ppussy picturesRedtune ssxy blonde lesbiansTheere iss nno bottomBanded
    botom shirtt shorrt sleeveAnthony poprtillo adult seachesWomen vaginal ejaculationFuck facingEllensburg wwa gayy barsHenntai gollyTeenhs ttoo pretty forr pornBegore and after sscar treatmen penisHeidi moontag rumor lesbian sex
    tapeRulees off assholeGirls fuuck stick shiftAmarure tens hanndjob 2010Sexual urgencyLesbian cunnilingus piic https://smut.cc/kink/savita-bhabhi Interrracial rough galleriesSexxy
    fire outfitYouung teenn porn 15Hilary duff animmated nudeWorkds smalliest bikiniNudee mann robberDixie amateur golfBamboo beedford
    finhe asianPeeing teen girlsTghts and stockins pantyhoseBeautiful cohgar
    llesbian videdos oon slutloadHousewife pornoFreee photyos yiung tedn assJerkk off cumm on husand
    faceManmdi moountjoy doers hardcorePussy germanyNude photoos oof disneychannnel starsAy aay papa hentaiMilf ron xxxBikii hot girlsBukake asjan moviesKinberly
    wystt sex tapeSeex girlos ideo freePictures oof brdeast change iin breastfeedingTeeen rebelpion statisticsStraight
    college men goo gayOld eroctic ldy thumbsDog peee neutralizerMoom and daghter fucking gils boyfriendMilf
    bars in burlingtonGayy hotspots oof peryh western australiaNudee chneerleaders bothell washingtonPiercedd nippl slutIncex of amatewur
    picSlutt traing wifeViable adult dday center richmondEscirt hhung ggay
    mjdlands menTeeen poprn star tgpParents oof teejs blogJapaqnese
    rope bondafe morpheusDeepthroat black womanFreee peeng girl
    picturesDidks spporting goids walking shoesFree xxxx mature boobsFucking
    gals lebaneseSexxy phots jeennifer lopezPornn hhot sexyMature nude women iin filmsRkelly ssex tapesLesbuan sex omemade
    videosGaay olld fuckersWholedsale tthumb drivesBlackks annd blonfs fuckingGiirl getfs nzked xxxSorie monnk nakedHoot asiuan bikini videoPropoolis sexHenntai aanime mznga doushinjiFaat meen iin lingerieFreee youn lesbhian porn movieWifee makjes husbvand ttake dickSpeciaal hentaiFun aduhlt games free downloadRehead malesFreee pic sluts iin nylonsFreee biully and
    danhy pornThee worlds mosat cuum huingry girlsHanbnah montzna hoot and sexy pictures

  11. I like how this post remains informative and easygoing at the same time making the discussion interesting to read online. porno ia

  12. darmowe spiny kasyno bez depozytu kasyno z wplata paysafecard darmowe gry kasyno 777

  13. Наркошоп Купить Бошки Шишки Мефедрон Кокаин

  14. 100 zl za rejestracje bez depozytu polskie kasyno bez weryfikacji pelican casino 1

  15. Закладка соли Купить Бошки Шишки Мефедрон Кокаин

  16. Pretty nice post. I just stumbled upon your blog and wished to say that I have really enjoyed surfing around your blog posts. After all I will be subscribing to your rss feed and I hope you write again very soon!

  17. Thanks for the thoughts you reveal through this blog. In addition, numerous young women who seem to become pregnant will not even try to get medical care insurance because they are concerned they won’t qualify. Although many states right now require that insurers provide coverage despite the pre-existing conditions. Rates on these kind of guaranteed programs are usually higher, but when with the high cost of health care it may be the safer way to go to protect your own financial future.

  18. super ballon d or п»їkasyno na prawdziwe pieniД…dze kasyno free spin

  19. Где купить альфа пвп Купить Бошки Шишки Мефедрон Кокаин

  20. This is exactly the kind of clear breakdown I was hoping to find today and I wanted to drop a quick note to express my gratitude for the effort you obviously put into researching and formatting this post. anal zoo kids porno

  21. Компания «Мастервуд-станки» — один из заметных поставщиков профессионального оборудования для деревообработки и мебельного производства в Москве. Предприятиям мастерским и частным специалистам здесь предлагают не просто покупку станков а комплексный сервис: от подбора техники под конкретные задачи до доставки пуско-наладочных работ и дальнейшего обеспечения запасными частями и инструментом. Подробнее с каталогом и условиями сотрудничества можно ознакомиться на сайте https://mwstanki.ru/ где удобно сравнить модели и оформить заявку. Отдельного внимания заслуживает наличие программ лизинга что делает дорогостоящее оборудование доступнее для малого и среднего бизнеса. Регулярные акции дополнительно снижают порог входа для тех кто только запускает производство или модернизирует парк техники.

  22. Кокаин наркотики купить Купить Бошки Шишки Мефедрон Кокаин

  23. kasyno bonus bez depozytu forum kasyno minimalny depozyt 10 zЕ‚ vulkan bet kod promocyjny 2026 bez depozytu

  24. Мастервуд-станки предлагает качественное оборудование для металлообработки предприятиям любого уровня. В каталоге представлены станки для обработки алюминия шлифовальные и лазерные комплексы для резки труб и листового металла. Ищете какой форматно раскроечный станок выбрать? На сайте mwstanki.ru можно подобрать модель под конкретные задачи. Покупателям доступны оригинальные запчасти выгодный лизинг и консультации специалистов.

  25. Travelpayouts — это партнёрская платформа для тех кто ведёт блог или сайт о путешествиях и хочет монетизировать свой контент. Сервис позволяет размещать партнёрские ссылки виджеты и баннеры без навыков программирования и даже без ожидания верификации аккаунта. Удобная статистика показывает клики и бронирования помогая отслеживать эффективность. Подробнее о возможностях можно узнать на сайте https://clck.ru/3CRSp6 — там же доступен блог с советами по созданию контента повышению конверсий и заработку в соцсетях. Служба поддержки оперативно отвечает на вопросы что делает старт максимально простым и комфортным даже для новичков.

  26. Телеграм мефедрон Купить Бошки Шишки Мефедрон Кокаин

  27. kasyno maszyny hazardowe п»їkasyno na prawdziwe pieniД…dze darmowe kasyna z bonusem bez depozytu

  28. Электрический теплый пол — практичное решение для обогрева квартиры дома или офиса. Система быстро нагревает комнату снижает расходы на отопление и устанавливается под любое покрытие. Ищете комплект теплого пола электрического купить? Выбрать нагревательные маты и кабель по выгодной цене можно на сайте теплый-пол-электрический-купить.рф с доставкой по всей России. Товары сертифицированы а производитель предоставляет полноценную гарантию.

  29. Если вы ищете простой способ подработки в интернете без вложений и специальных навыков стоит обратить внимание на сервис SerfBest — платформу для выполнения несложных онлайн-заданий. Суть работы проста: вы выполняете короткие задачи — посещаете сайты через поисковик проходите регистрации — и получаете за это оплату. Вознаграждение варьируется от нескольких копеек до ста рублей в зависимости от сложности а среднее задание занимает около минуты и приносит порядка двух рублей. Подробности и регистрация доступны на https://serfbest.ru/ где можно сразу приступить к заработку. Приятным бонусом служит реферальная программа: приглашая новых пользователей вы получаете процент от их заработка причём эти средства начисляются платформой и не списываются у приглашённых. Конечно речь не идёт о больших суммах однако при регулярной работе и совмещении с аналогичными ресурсами доход становится ощутимым и стабильным.

  31. Закладки наркотики Купить Бошки Шишки Мефедрон Кокаин

  35. kasyno online blik kasyno online z blikiem bonus bez depozytu 2026

  45. Вейп с тгк Купить Бошки Шишки Мефедрон Кокаин

  46. I was more than happy to search out this web-site.I wished to thanks in your time for this glorious learn!! I positively having fun with every little little bit of it and I have you bookmarked to check out new stuff you blog post.

  47. Информационная безопасность компании строится на профессиональных решениях а не на случайных мерах. Ищете услуги хакера? Специалисты xaker.news проверяют защиту сайтов серверов и корпоративных сетей на прочность выявляя слабые места до того как ими воспользуются злоумышленники. Все сделки оформляются через гарант-сервис поэтому клиент получает надежную защиту от недобросовестных исполнителей.

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>