Silverlight → Минимизируем “дизайнерский след”
Данный текст является вольным переводом на русский язык статьи “Minimizing your designer footprint”.
С появлением более мощных веб-платформ, стало возможным создание больших возможностей и замысловатого дизайна. Но при создании таких приложений стоит принимать во внимание и мощность компьютера пользователя, который увидит ваш дизайн, а также скорость интернет соединения.
Эта проблема для веб-дизайна не нова. Всегда требуется создавать такой дизайн, который не потребует от пользователя скачивания большого количества информации для просмотра страницы – поэтому дизайнеры часто применяют gif-изображения или повторяющийся фон со спрайтами, которые хранят всю графику в одном месте.
Эти принципы также верны и для Silverlight-приложений, но с появлением многих элементов, которые раньше было трудно или совсем невозможно достичь, дизайнеры должны заботиться о таких вещах еще сильнее. Как и на всех сайтах, уменьшение времени загрузки страниц крайне важно для удержания внимания пользователя. Также нужно держать в голове и то, что ваше приложение не должно сильно нагружать компьютер, на котором оно будет выполняться.
Введение
С появлением более мощных веб-платформ, стало возможным создание больших возможностей и замысловатого дизайна. Но при создании таких приложений стоит принимать во внимание и мощность компьютера пользователя, который увидит ваш дизайн, а также скорость интернет соединения.
Эта проблема для веб-дизайна не нова. Всегда требуется создавать такой дизайн, который не потребует от пользователя скачивания большого количества информации для просмотра страницы – поэтому дизайнеры часто применяют gif-изображения или повторяющийся фон со спрайтами, которые хранят всю графику в одном месте.
Эти принципы также верны и для Silverlight-приложений, но с появлением многих элементов, которые раньше было трудно или совсем невозможно достичь, дизайнеры должны заботиться о таких вещах еще сильнее. Как и на всех сайтах, уменьшение времени загрузки страниц крайне важно для удержания внимания пользователя. Также нужно держать в голове и то, что ваше приложение не должно сильно нагружать компьютер, на котором оно будет выполняться.
Я пиарюсь → WEBO Site SpeedUp версия 0.9.5 (публичная бета)
После почти трех недель дорисовки макетов, интеграции и усиленного тестирования (да-да, все отдыхали, а мы работали!) вышла новая версия open source приложения для автоматического ускорения сайтов — WEBO Site SpeedUp 0.9.5 (подробнее). Текущий статус — публичная бета (т.е., скорее всего, версия содержит некоторые некритичные ошибки, но полностью готова к «боевому» использованию). Мы будем крайне признательны за содержательные сообщения об ошибках в официальном баг-трекере.Загрузить
www.web-optimizer.us/web-optimizer/download.html
Под катом больше подробностей и картинок
Веб-разработка → Оптимизация градиентов в Фотошопе
Материал, скорее, для начинающих верстальщиков, например таких, что работают в Microsoft ;) На тему натолкнула одна картинка с одной популярной странички:
Дело в том, что весит картинка 55 211 байт. А вот она же, но уже размером 1 764 байт. Если вы думаете, что разница в формате (у меня png, а в оригинале gif), то вы правы лишь отчасти. Попробуйте пересохранить исходное изображение в png, врядли у вас получится серьезный выигрыш (у меня размер получился 45 кб). В общем, дело не в формате.
Дело в том, что весит картинка 55 211 байт. А вот она же, но уже размером 1 764 байт. Если вы думаете, что разница в формате (у меня png, а в оригинале gif), то вы правы лишь отчасти. Попробуйте пересохранить исходное изображение в png, врядли у вас получится серьезный выигрыш (у меня размер получился 45 кб). В общем, дело не в формате.
Веб-разработка → 7+ превосходных инструментов для оптимизации изображений
Перевод статьи 8 Excellent Tools for Optimizing Your Images
К сожалению на момент перевода один из сервисов перестал работать. Но хабровчане предложили еще много хороших решений!
Одним из самых простых способов уменьшить время отклика страниц на вашем сайте является оптимизация изображений.
Есть несколько бесплатных инструментов помогающих уменьшить и оптимизировать изображения. В этой статье вы найдете удобные инструменты для создания картинок для веба настолько маленьких по весу, насколько это возможно.
Обзор инструментов — под катом.
К сожалению на момент перевода один из сервисов перестал работать. Но хабровчане предложили еще много хороших решений!
Одним из самых простых способов уменьшить время отклика страниц на вашем сайте является оптимизация изображений.
Есть несколько бесплатных инструментов помогающих уменьшить и оптимизировать изображения. В этой статье вы найдете удобные инструменты для создания картинок для веба настолько маленьких по весу, насколько это возможно.
Обзор инструментов — под катом.
Персональные блоги → Скрипт для уменьшения изображений и еще парочка полезных функций
Доброго времени суток всем!
Немножко вступления. Я давно мечтала написать эту маленькую программку… Долго не бралась, потому что думала, что это очень сложно:) но в итоге, всё получилось довольно просто и быстро!
Я иногда занимаюсь обновлением сайта с большим количеством картинок. Когда мне приносят кучу фотографий абсолютно разного разрешения, которые надо подогнать под один размер — я прихожу в ужас… но так или иначе — ужимать надо.
В итоге, так родился этот скрипт.
Так же, если у вас скопилось очень много «профессиональных» фотографий, в которых важно только основная мысль, а не качество, то вам тоже не помешает им воспользоваться!
Немножко вступления. Я давно мечтала написать эту маленькую программку… Долго не бралась, потому что думала, что это очень сложно:) но в итоге, всё получилось довольно просто и быстро!
Я иногда занимаюсь обновлением сайта с большим количеством картинок. Когда мне приносят кучу фотографий абсолютно разного разрешения, которые надо подогнать под один размер — я прихожу в ужас… но так или иначе — ужимать надо.
В итоге, так родился этот скрипт.
Так же, если у вас скопилось очень много «профессиональных» фотографий, в которых важно только основная мысль, а не качество, то вам тоже не помешает им воспользоваться!
Веб-разработка → ImageOptim (mac), smush.it — сжимаем изображения
Наверное многие из вас знают, что Adobe Photoshop и Adobe Fireworks сжимают изображения не оптимально и после нарезки макета в Photoshop'e (Fireworks'e) изображения в большинстве случаев можно ужать. В среднем на дополнительном сжатии без потери качества небольшого сайта можно сэкономить килобайт 10, уж не говоря о разного рода фотогаллереях или сайтов с большим количеством графики. Немало, особенно на высоконагруженных проектах! Существует довольно много консольных программ для сжатия картинок без потери качества, а через консоль работать достаточно неудобно, и это отнимает время разработчика. Около месяца назад наткнулся на программу под названием 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. Сам сию утилиту не тестировал, так что кто пользуется отпишитесь плз. Автор кстати москвич Артём Сапегин.
Она прогоняет картинки через консольные оптимизаторы изображении (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. Сам сию утилиту не тестировал, так что кто пользуется отпишитесь плз. Автор кстати москвич Артём Сапегин.
Клиентская оптимизация → qpimg — динамическое создание CSS спрайтов
При разработке сайтов все чаще и чаще приходиться использовать технологию CSS спрайтов, дабы уменьшить кол-во изображений загружаемых на странице. Создание и редактирование таких изображений является не простой задачей, на которую тратится довольно таки много времени: изначально нужно скомпоновать изображения в графическом редакторе, а после описать позиционирование и размеры каждого элемента в файле стилей (CSS). Редактирование элементов и изменение их размеров может повлечь глобальный пересмотр спрайта, вплоть до полного его пересоздания.