Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

qpimg — динамическое создание CSS спрайтов

Клиентская оптимизация
При разработке сайтов все чаще и чаще приходиться использовать технологию CSS спрайтов, дабы уменьшить кол-во изображений загружаемых на странице. Создание и редактирование таких изображений является не простой задачей, на которую тратится довольно таки много времени: изначально нужно скомпоновать изображения в графическом редакторе, а после описать позиционирование и размеры каждого элемента в файле стилей (CSS). Редактирование элементов и изменение их размеров может повлечь глобальный пересмотр спрайта, вплоть до полного его пересоздания.

Читать дальше →
Всего голосов 65: ↑57 и ↓8 +49
Просмотры2.6K
Комментарии 29

ImageOptim (mac), smush.it — сжимаем изображения

Разработка веб-сайтов
Наверное многие из вас знают, что Adobe Photoshop и Adobe Fireworks сжимают изображения не оптимально и после нарезки макета в Photoshop'e (Fireworks'e) изображения в большинстве случаев можно ужать. В среднем на дополнительном сжатии без потери качества небольшого сайта можно сэкономить килобайт 10, уж не говоря о разного рода фотогаллереях или сайтов с большим количеством графики. Немало, особенно на высоконагруженных проектах! Существует довольно много консольных программ для сжатия картинок без потери качества, а через консоль работать достаточно неудобно, и это отнимает время разработчика. Около месяца назад наткнулся на программу под названием ImageOptim.

ImageOptim

Она прогоняет картинки через консольные оптимизаторы изображении (AdvPNG from AdvanceCOMP, OptiPNG, PngCrush, JpegOptim, Jpegtran from libjpeg и опционально PNGOUT) и выбирает лучший алгоритм для сжатия, и самое главное она имеет очень удобный визуальный интерфейс. Достаточно просто перетащить изображение или папку с изображениями в окно ImageOptim и все. К сожалению программа рассчитана на работу только с png и jpg форматами и не поддерживает gif.

Спешу расстроить пользователей Windows, есть только версия программы под Mac. Те кто использует Windows, могут обратить внимание на сервис smush.it — это онлайновый оптимизатор графики, также есть расширение для Firefox. Одним из преимуществ сервиса над ImageOptim является возможность оптимизации анимированных gif.

Добавьте кармы перенесу в блог разработчиков. Если кому понравилась статья, можете подписаться на мой блог, так как не все публикую на хабре, да и записи в блоге появляются раньше чем здесь на пару дней.

upd. Перенес в Web-разработку

upd2. В комментах подсказали, что есть программа с аналогичным функционалом под windows, называется PictureBeaver. Сам сию утилиту не тестировал, так что кто пользуется отпишитесь плз. Автор кстати москвич Артём Сапегин.
Всего голосов 65: ↑48 и ↓17 +31
Просмотры5.9K
Комментарии 38

Скрипт для уменьшения изображений и еще парочка полезных функций

Чулан
Доброго времени суток всем!
Немножко вступления. Я давно мечтала написать эту маленькую программку… Долго не бралась, потому что думала, что это очень сложно:) но в итоге, всё получилось довольно просто и быстро!
Я иногда занимаюсь обновлением сайта с большим количеством картинок. Когда мне приносят кучу фотографий абсолютно разного разрешения, которые надо подогнать под один размер — я прихожу в ужас… но так или иначе — ужимать надо.
В итоге, так родился этот скрипт.
Так же, если у вас скопилось очень много «профессиональных» фотографий, в которых важно только основная мысль, а не качество, то вам тоже не помешает им воспользоваться!
Читать дальше →
Всего голосов 15: ↑10 и ↓5 +5
Просмотры685
Комментарии 2

7+ превосходных инструментов для оптимизации изображений

Разработка веб-сайтов
Перевод
Перевод статьи 8 Excellent Tools for Optimizing Your Images
К сожалению на момент перевода один из сервисов перестал работать. Но хабровчане предложили еще много хороших решений!

Одним из самых простых способов уменьшить время отклика страниц на вашем сайте является оптимизация изображений.

Есть несколько бесплатных инструментов помогающих уменьшить и оптимизировать изображения. В этой статье вы найдете удобные инструменты для создания картинок для веба настолько маленьких по весу, насколько это возможно.
Обзор инструментов — под катом.
Читать дальше →
Всего голосов 86: ↑78 и ↓8 +70
Просмотры101.9K
Комментарии 72

Оптимизация градиентов в Фотошопе

Разработка веб-сайтов
Материал, скорее, для начинающих верстальщиков, например таких, что работают в Microsoft ;) На тему натолкнула одна картинка с одной популярной странички:

image

Дело в том, что весит картинка 55 211 байт. А вот она же, но уже размером 1 764 байт. Если вы думаете, что разница в формате (у меня png, а в оригинале gif), то вы правы лишь отчасти. Попробуйте пересохранить исходное изображение в png, врядли у вас получится серьезный выигрыш (у меня размер получился 45 кб). В общем, дело не в формате.
Тогда в чем же?
Всего голосов 134: ↑125 и ↓9 +116
Просмотры14.5K
Комментарии 127

WEBO Site SpeedUp версия 0.9.5 (публичная бета)

Я пиарюсь
После почти трех недель дорисовки макетов, интеграции и усиленного тестирования (да-да, все отдыхали, а мы работали!) вышла новая версия open source приложения для автоматического ускорения сайтов — WEBO Site SpeedUp 0.9.5 (подробнее). Текущий статус — публичная бета (т.е., скорее всего, версия содержит некоторые некритичные ошибки, но полностью готова к «боевому» использованию). Мы будем крайне признательны за содержательные сообщения об ошибках в официальном баг-трекере.

Загрузить
www.web-optimizer.us/web-optimizer/download.html

Под катом больше подробностей и картинок
Читать дальше →
Всего голосов 19: ↑11 и ↓8 +3
Просмотры384
Комментарии 35

Минимизируем “дизайнерский след”

Silverlight
Данный текст является вольным переводом на русский язык статьи “Minimizing your designer footprint”.

Введение


С появлением более мощных веб-платформ, стало возможным создание больших возможностей и замысловатого дизайна. Но при создании таких приложений стоит принимать во внимание и мощность компьютера пользователя, который увидит ваш дизайн, а также скорость интернет соединения.

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

Эти принципы также верны и для Silverlight-приложений, но с появлением многих элементов, которые раньше было трудно или совсем невозможно достичь, дизайнеры должны заботиться о таких вещах еще сильнее. Как и на всех сайтах, уменьшение времени загрузки страниц крайне важно для удержания внимания пользователя. Также нужно держать в голове и то, что ваше приложение не должно сильно нагружать компьютер, на котором оно будет выполняться.

Читать дальше →
Всего голосов 20: ↑10 и ↓10 0
Просмотры618
Комментарии 8

Оптимизация изображений bash-скриптом

Высокая производительностьОбработка изображений
Перевод
Tutorial
Скорость загрузки любого сайта во многом зависит от количества и качества используемых изображений. Поэтому очень важно уметь их оптимизировать. Существует множество веб сервисов для этого, но большинство из них обладает недостатками:

  • Нет возможности оптимизировать автоматически много файлов
  • Сложно и неудобно использовать в рабочем процессе

Но прежде всего следует отметить, что описанный ниже способ нельзя причислить к самым лучшим хотя бы потому, что в идеале каждое изображение следует оптимизировать индивидуально.

Оптимизация изображений с помощью командой строки


Для каждого png файла используются optipng и pngcrush, а для jpg — jpegtran. Для начала опробуем optipng:

Читать дальше →
Всего голосов 26: ↑22 и ↓4 +18
Просмотры21.9K
Комментарии 25

Картинки в doc-файле: снижение веса хирургическим путём

Софт
Tutorial
Жил-был на свете один перевод (как процесс, а не как результат). Существовал он таким образом: из pdf-ки с оригинальным текстом вырезались кусочки, вставлялись прямо в Word и снизу посредством значительных мысленных усилий появлялся русский текст, и, как правило, пара-другая сносок. А если в оригинале были сноски, то в сносках тоже появлялись картинки. Перевод шёл, и файл разрастался — в 16-страничном файле было 51 изображение, и Word стал работать так медленно, что перевод никак не мог стать результатом.
Встроенная функция компрессии изображений почему-то совсем не помогала, поэтому было решено произвести вмешательство хирургическим путём.
Читать дальше →
Всего голосов 35: ↑29 и ↓6 +23
Просмотры25.2K
Комментарии 39

7 советов по созданию GIF анимаций

Обработка изображений
Перевод
Tutorial
61563fa3ab3147239dc7777662290fbe

У нас в InVision, GIF анимации используются не для баловства —  они играют важную роль с точки зрения маркетинга и обучения. Поэтому мы даже пытались использовать их на нашей главной странице вместо анимаций, сделанных с помощью кода.

В конце концов люди начали спрашивать нас: «Как вы создаете GIF анимации?». Пришло время раскрыть секрет.
Читать дальше →
Всего голосов 51: ↑44 и ↓7 +37
Просмотры201.3K
Комментарии 23

Оптимизация картинок для Google PageSpeed

Блог компании .ioPHPОбработка изображений
Нет предела совершенству, и Google PageSpeed тому доказательство. С его помощью меньше чем за минуту можно получить подробный отчет о производительности Web страницы. В подавляющем большинстве случаев PageSpeed подскажет, что нужно оптимизировать графику. Это наиболее частая проблема и наиболее весомая.



Например, даже на стартовой странице Google Developers графику можно сжать на 71%. Чем меньше весят фотки – тем быстрее грузится сайт. Меньше картинки — меньше трафика — все работает быстрее. Посетители тратят меньше времени – все довольны.

В этом материале подобраны основные инструменты для оптимизации графики.
Читать дальше →
Всего голосов 41: ↑35 и ↓6 +29
Просмотры89.9K
Комментарии 29

Оптимизируем графику с помощью WebP

Разработка веб-сайтовHTML
Из песочницы

Блог разработчика интерфейсовКакая сейчас неделя? Какая сейчас учебная неделя? Четная или нечетная?

По данным сайта Web Perfomance Today, средний вес страницы в 2015 году 1109 КБ. По прогнозам, к 2018 будет около 2 МБ. Загрузка изображений занимает в среднем 64% (711 КБ) всего времени загрузки страницы. Поэтому начинать оптимизацию скорости загрузки страницы нужно именно с графики.
Читать дальше →
Всего голосов 17: ↑12 и ↓5 +7
Просмотры29.3K
Комментарии 28

Готовим WebP правильно

Клиентская оптимизация
WebPХабр уже насыщен статьями на тему «нового» формата изображений WebP (описание, сравнение с JPEG2000, сравнение с BPG, использование, подключение на сайте). К сожалению, открытыми остаются вопросы: как правильно подключить WebP на сайте, чтобы «все работало», и насколько он лучше (меньше) PNG/JPEG. В этой заметке я буду отвечать на оба вопроса.

Предполагаю, что вы уже в курсе оптимизации изображений, умеете конвертировать изображения в WebP, понимаете разницу между использованием JPEG и PNG на сайте, знаете инструменты ExifTool, jpegtran, mozjpeg, JPEGrescan, optipng, pngcrush, pngwolf, zopflipng и TruePNG, а также различаете пастеризацию молока и постеризацию изображений.

Если все так — то переходим к сути.
Читать дальше →
Всего голосов 14: ↑12 и ↓2 +10
Просмотры28.8K
Комментарии 8

Технология JPEG: анализ пространства решений

Клиентская оптимизацияОбработка изображенийIT-стандартыPDF

Изображения в формате JPEG, помимо собственно файлов с расширением .jpg, можно встретить внутри PDF-файлов и TIFF-файлов.


Стейкхолдеров технологии JPEG можно, наверное, разделить на следующие группы:


  • разработчики фотоаппаратов и сканеров;
  • фотографы (большие фотографии в хорошем разрешении с высокими требованиями к качеству);
  • соцсети и CDN'ы типа imgix, которые раздают залитые фоточки неконтролируемого UGC-происхождения, количества и размера в пережатом виде;
  • вебмастеры, которые управляют умеренным количеством не-UGC картинок с контролируемым качеством;
  • любители отсканированных бумажных книг и прочих исторических источников;

Автор этой статьи принадлежит в основном к последней группе, и точно не принадлежит к числу художественных фотографов. Это должно вносить в повествование определенный перекос, который, тем не менее, полезен как раз для иллюстрации возможных траекторий в пространстве решений.

Читать дальше →
Всего голосов 27: ↑21 и ↓6 +15
Просмотры7.9K
Комментарии 13

Тест Lossless-оптимизаторов изображений (PNG и JPG)

Сжатие данных
Для многих не секрет, что большинство изображений в форматах JPEG и PNG содержат избыточную информацию, которая может быть удалена без потери качества. Обычно это достигается за счет эвристических алгоритмов перебора различных параметров компрессии и выбора наименее затратного варианта. Применение оптимизаторов особенно важно на файлах, которые используются на посещаемых сайтах, для экономии дискового пространства, трафика и уменьшения времени загрузки страниц у пользователей. Программ такого типа довольно много и мы поставили себе цель найти какие же оптимизаторы сжимают лучше и работают быстро.

В тесте принимали участие следующие программы.

Для PNG:

1. Leanify 0.4.3 (x64)
2. pingo v0.79c
3. pinga v0.09
4. OptiPNG 0.7.6
5. pngout
6. PngOptimizer 2.5 (x64)
7. advpng aka AdvanceCOMP v1.23
8. ECT 0.6 (x64)
9. TruePNG 0.6.2.2
10. pngwolf-zopfli 1.1.1 (x64)

Для JPEG:

1. Leanify 0.4.3 (x64)
2. pingo v0.79c
3. ECT 0.6 (x64)
4. mozjpeg 3.2 (x64)
5. jhead 3.00
6. jpegoptim v1.4.4 (x64)
7. jpegtran
Читать дальше →
Всего голосов 51: ↑51 и ↓0 +51
Просмотры17.3K
Комментарии 27

Оцениваем эффективность Guetzli – время оптимизации и степень сжатия

Блог компании WEBO GroupВысокая производительностьКлиентская оптимизацияАлгоритмыОбработка изображений
Перевод

Изображения вносят самый большой вклад в размер веб-страниц. По мнению многих экспертов, оптимизация изображений, их сжатие – приоритет номер один в списке мероприятий по ускорению производительности сайтов. Для этого могут использоваться различные методы сжатия – с потерями или без потерь, а также конвертация в другие форматы – SVG или WebP.

Поскольку тема оптимизации изображений по-прежнему актуальна, Google недавно представил новый алгоритм сжатия изображений с открытым исходным кодом, называющийся Guetzli. В этой статье мы разберемся, что он собой представляет, как работает и сравним его производительность с другими широко использующимися алгоритмами сжатия изображений.
Читать дальше →
Всего голосов 8: ↑5 и ↓3 +2
Просмотры4.5K
Комментарии 5

Лекция Виталия Харисова «10k»

Блог компании ЯндексCSSJavaScriptКлиентская оптимизацияHTML
Виталий vithar Харисов — один из ключевых разработчиков и руководителей Яндекса. На московском Я.Субботнике по фронтенду Виталий рассказал про лёгкую версию поиска для медленных соединений и способы оптимизации кода, позволяющие уложиться в 10 килобайт.


— Меня зовут Виталий Харисов, я сегодня прочитаю доклад под странным названием 10k. Название доклада относится к конкурсу, который в августе прошлого года проводил Microsoft, — 10k Part. Это конкурс на то, чтобы сделать полнофункциональный сайт, который полностью укладывается в 10 килобайт, это весь его HTML, CSS, JS, картинки — всё, что мы запрашиваем по сети. По условиям конкурса можно было догружать дополнительные ресурсы, которые не влияют на основную функциональность сайта, отдельными запросами. Но сам сайт должен был быть полнофункциональным и полностью доступным, работоспособным в пределах 10 килобайт.
<сut
Примерно в августе того же года мы начали работать над проектом под кодовым названием «Мобильная бабуля». У нас довольно давно есть проект под названием «Бабуля». Это проект выдачи Яндекса для очень старых браузеров — IE6, 7, 8, Firefox 3.6 и так далее. Он предлагает браузерам адаптированную для них верстку. И мы на «Бабулю» отправляем все старые браузеры, чтобы нам было проще разрабатывать основную версию поиска.

Когда выбирали название для легкой версии Яндекса, которая будет показываться на медленных соединениях, автоматически выбрали название «Мобильная бабуля».

Выглядит это примерно так. Визуально вы не найдете отличий между полноценной и легкой версией Яндекса. Отличия в том, что легкую версию мы показываем, когда у пользователя медленное соединение. Едете в метро, свалились в EDGE, уехали на дачу, свалились в EDGE — в итоге у вас может быть современный телефон, интернет никакой, и вы очень долго грузите выдачу. Нужно с этим что-то делать и показывать вам какую-то версию попроще.

По нашей статистике, таких запросов у нас порядка 60 млн хитов в месяц. Около 8% мобильных пользователей в выдаче Яндекса сваливаются в легкую версию.

Она должна выглядеть ровно так же, как основной поиск. Она должна обсчитываться ровно теми же счетчики. Она для статистики должна выглядеть точно так же.

И мы сами себе сделали ограничение: легкая версия Яндекса, HTML, который мы делаем, должен приезжать пользователю за 10 TCP-пакетов, порядка 14 Кб. Это максимальный лимит, установленный для легкой версии.

Легкая версия в продакшене примерно с февраля, ей можно пользоваться, там есть трафик, 8% пользователей попадают на нее. Если вы хотите посмотреть ее на своем ноутбуке или смартфоне, вы можете это сделать, добавив параметр lite или перейдя по короткой ссылке bit.ly/10k-2016, где эти параметры уже зашиты.

Что мы хотели делать? Легкая версия должна загружаться быстро. Она должна загружаться и отображаться быстро. Для этого мы делали минимальное количество HTTP-запросов — чтобы она доставлялась пользователю как можно быстрее. Мы обязательно используем для этого gzip, сейчас это минимальный набор, который должен быть включен на любом сайте. И если ваш сайт до сих пор почему-то не использует gzip-сжатие, включите его. Вы получите профит по загрузке автоматически.
Читать дальше →
Всего голосов 39: ↑37 и ↓2 +35
Просмотры13.1K
Комментарии 23

Как создавать графику для VR — рекомендации Google

Разработка игрДизайн игрРазработка под AR и VR
Перевод

Создание графических ресурсов: рекомендации




Как художник VR и AR, я заметил две тенденции. Во-первых, постоянно появляются новые инструменты и практики, которые позволяют повысить качество наших работ. Но в то же время возвращаются техники и навыки конца 90-х и начала 2000-х. Они полностью применимы к виртуальной реальности, потому что вычислительные ресурсы в VR ограничены. И если вы только начинаете свой путь, то вам стоит рассмотреть разнообразные подходы. Итак, если вы художник и недавно занялись VR, то вот некоторые из моих самых любимых советов по созданию качественных графических ресурсов.
Читать дальше →
Всего голосов 13: ↑12 и ↓1 +11
Просмотры7.5K
Комментарии 2

Еще 11 полезных инструментов для разработчиков и дизайнеров с Product Hunt

Блог компании Productivity InsideВеб-дизайнCSSJavaScriptДизайн мобильных приложений
Коллекция Product Hunt продолжает пополняться интересными, толковыми и остроумными решениям, которые разработчики создают для своих коллег и соратников. В этой подборке мы вкратце расскажем о нескольких пользовательских фаворитах последних месяцев, которые позволяют команде облегчить себе жизнь в разных отношениях, а отдельным специалистам — прокачать профессиональные навыки.


Читать дальше →
Всего голосов 20: ↑15 и ↓5 +10
Просмотры5.9K
Комментарии 1

О странном методе экономии места на жестком диске

Ненормальное программированиеАлгоритмыCХранение данныхСжатие данных

Очередной пользователь хочет записать на жесткий диск новый кусок данных, но ему не хватает свободного места для этого. Удалять тоже ничего не хочется, так как "все очень важное и нужное". И что нам с ним делать?


Такая проблема встает ни у него одного. На наших жестких дисках покоятся терабайты информации, и это количество не стремится уменьшаться. Но насколько она уникальна? В конце-концов, ведь все файлы это лишь наборы бит определенной длины и, скорее всего, новая не сильно отличается от той, что уже хранится.


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


Изображение с сайта rematelier.ru


TL;DR — вторая попытка рассказать о странном методе оптимизации данных с помощью JPEG-файлов, теперь в более понятной форме.

Читать дальше →
Всего голосов 22: ↑11 и ↓11 0
Просмотры24.6K
Комментарии 42
1