Случайны выбор дневника Раскрыть/свернуть полный список возможностей


Найдено 67 сообщений
Cообщения с меткой

оптимизация изображений - Самое интересное в блогах

Следующие 30  »
anykey13

Правила грамотной оптимизации изображений для поисковиков

Четверг, 14 Апреля 2016 г. 08:47 (ссылка)
sites-audit.ru/pravila-gram...henij.html

Правила грамотной оптимизации изображений


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


http://www.sites-audit.ru/pravila-gramotnoj-optimizacii-izobrazhenij.html


1460612866_s300x200 (300x193, 16Kb)

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

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

Четверг, 07 Апреля 2016 г. 09:26 (ссылка)

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



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



Если все так — то переходим к сути.



Плюсы WebP



Во всех источниках упоминается существенное уменьшение размера изображений, что PNG, что JPEG, если их перекодировать в WebP. При этом перекодирование должно выполняться с сохранением качества. В Айри.рф уже три года используется автоматическая оптимизация изображений без потерь и с незначительными потерями (2 режима). Это позволяет достаточно точно сравнить, когда WebP выигрывает в сравнении с уже оптимизированными PNG (прогоняется через TruePNG, pngwolf и zopflipng) и JPEG (ExifTool, mozjpeg, перевод в png), а когда нет.



На тестовой выборке из 13 тысяч изображений WebP показал выигрыш относительно уже оптимизированных PNG и JPEG файлов на 31% (580 Мб против 837 Мб). WebP-файлы примерно на треть меньше уже оптимизированных аналогов JPEG и PNG. Здесь нужно оговориться, что перевод PNG в WebP выполняется без потерь (lossless), а перевод в JPEG выполняется с минимальными потерями (качество 100), это позволяет в автоматическом режиме отгружать WebP для всех браузеров, которые его понимают, без опасений что-то «поломать» у клиентов.



В подавляющем большинстве случаев выигрыш WebP относительно уже оптимизированных JPEG (mozjpeg) составлял не более 10%. Исключения были в тех случаях, когда из JPEG-файлов нельзя было безопасно вырезать EXIF-данные (в частности, палитру), и перевод их в WebP давал существенный выигрыш. Поэтому если вы создаете JPEG сразу по «нормальному» сценарию, то в большинстве случаев существенного выигрыша не предвидится. PNG-файлы даже после оптимизации относительно неплохо (30%) «теряют в весе», если перевести их в WebP.



Что важнее, относительно всех оптимизированных изображений только в 10% случаев (да, выборка из 13000 изображений — это было только 10% всех оптимизированных изображений) WebP «без потерь» давал выигрыш в размере. Для остальных 90% выигрыша не было (из них 75% — это JPEG файлы). Цифры еще могут быть обусловлены жестким подходом к оптимизации изображений без потерь: возможно, тонкая настройка WebP с «небольшими» потерями качества даст визуально «тот же результат», но будет меньше по размеру. К сожалению, в автоматическом режиме оценить все 130 тысяч изображений, чтобы понять, насколько в каждом конкретном случае сжатие с потерями может быть лучше, не представляется возможным. Сами изображения не представляют какой-либо закономерности: это фоновые картинки и галереи сотен сайтов.



Для справки, перевод PNG в WebP

cwebp -quiet -pass 10 -alpha_method 1 -alpha_filter best -m 6 -mt -lossless


Перевод JPEG в WebP

cwebp -quiet -pass 10 -alpha_method 1 -alpha_filter best -m 6 -mt -q 100


Отличной иллюстрацией является изображение к статье. Исходный PNG занимал 15,6 Кб. После оптимизации и постеризации — 12,5 Кб. lossless webp из него — 8 Кб.



Реальное использование WebP



Если вы уже научились правильно конвертировать или сохранять изображения в WebP (тема для отдельной статьи), то остается проблема подключения WebP на сайте, которая уже поднималась здесь (игра стоит свеч, ибо Chrome браузеры уже составляют более 2/3 рынка). На стороне браузера возможны варианты с JavaScript (использование тега noscript, ymatuhin):



https://habrahabr.ru/post/281124/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_galina_bichuk

Оптимизация изображений (видео)

Вторник, 03 Ноября 2015 г. 14:48 (ссылка)

chaynikam.net/view_lesson.php?id=132

урок о программе PNG Optimizer

http://www.liveinternet.ru/users/galina_bichuk/post375843851/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
galina_bichuk

Оптимизация изображений (видео)

Вторник, 03 Ноября 2015 г. 14:48 (ссылка)
chaynikam.net/view_lesson.php?id=132

урок о программе PNG Optimizer
Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
Кикайон

Оптимизация изображений (видео)

Понедельник, 02 Ноября 2015 г. 17:33 (ссылка)
chaynikam.net/view_lesson.php?id=132


урок о программе PNG Optimizer

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
romchick

JPEGoptim и OptiPNG для оптимизации изображений на сервере

Вторник, 13 Октября 2015 г. 15:45 (ссылка)

Как я уже писал ранее, я сейчас занимаюсь разработкой сразу нескольких интернет-проектов. И для меня очень важна не только визуальная составляющая, но и скорость открытия сайта у посетителя. Во-первых, никому не хочется ждать загрузки страниц долго. А во-вторых, Google отрытым текстом заявлял, что будет понижать сайты в выдаче, если они будут загружаться медленно...

Подробнее: http://matovsky.com/jpegoptim-optipng.html

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

[Из песочницы] Оптимизируем графику с помощью WebP

Понедельник, 10 Августа 2015 г. 17:14 (ссылка)





По данным сайта Web Perfomance Today, средний вес страницы в 2015 году 1109 КБ. По прогнозам, к 2018 будет около 2 МБ. Загрузка изображений занимает в среднем 64% (711 КБ) всего времени загрузки страницы. Поэтому начинать оптимизацию скорости загрузки страницы нужно именно с графики.



Графика оптимизируется в двух направлениях:


  • уменьшение количества запросов

  • уменьшение веса графики



Для уменьшения запросов используются спрайты и вставка графики в через base64. Для уменьшения веса графика сжимается (с и без потерей качества).

К сожалению, сжатие часто приводит к плохому качеству и небольшому выигрышу в размере. Возможно поэтому Google в 2010 году создал свой формат сжатия изображений — WebP.



Поддержка



Поверим Can I Use, который говорит что WebP поддерживается на 64,77% в мире и 56,22% в России, что дает нам основание использовать его. Из браузеров это Chrome, Opera, Opera Mini, Android Browser, Chrome for Android.



Тестируем сжатие



Перед использованием WebP, проверим насколько это эффективно. Я скачал по 12 изображений png и jpg. И сравнил размеры до и после оптимизации:




  • Оригинальные файлы — 6,7 МБ

  • После сжатия — 5,4 МБ

  • Оригинальные в формате WebP — 1,6 МБ

  • После сжатия в формате WebP — 1,8 МБ





Выигрыш в размере получился 3.8 МБ, т.е 70.3%. Поскольку изображения в среднем это 64%, то выигрыш в скорости загрузки страницы составит ~44.8% для пользователей, чьи браузеры поддерживают WebP!



Используем WebP



Использовать новый формат можно через тег img и через css свойство background. Конечно не забудем про пользователей без поддержки этого формата.



Чтобы определить поддержку WebP, можно воспользоваться Modernizr или снипетом. После этого написать fallback:



.no-webp .logo { background-image: url(logo.png); }
.webp .logo { background-image: url(logo.webp); }


Через img казалось бы можно тоже сделать два изображения, и скрывать одно из них. Но проблема в том, что браузер все равно запросит и PNG и WebP, что наоборот увеличит время загрузки страницы.



Еще один способ — запрашивать изображение в формате WebP, если оно не загрузится, то показывать PNG.






У этого способа похожая проблема — если браузер не поддерживает WebP, он будет делать по 2 запроса на каждую картинку, что увеличит скорость загрузки.



Другой вариант



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



Пример использования:


  • Добавить в шапку

http://habrahabr.ru/post/264491/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

Как оптимизировать изображения для SEO в 2015 году

Среда, 10 Июня 2015 г. 13:19 (ссылка)

В этом году главной стратегией SEO стала оптимизация контента в целом и картинок в частности. Картинки занимают около 90% веса всей страницы и влияют на скорость ее загрузки.



image



Скорость загрузки страницы



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



Чаще всего сайты тормозят из-за тяжелых картинок. Чтобы проверить общий вес фотографий — воспользуйтесь сервисом Image Size Checker.



Как измерить скорость сайта



Cкорость сайта влияет на page rank и другие бизнес-показатели. Измерить скорость своего сайта можно с помощью инструмента Google Pagespeed.



Если по данным pagespeed сайт получил менее 85 баллов из 100, то его нужно немедленно отправлять на оптимизацию.



image



Юзабилити



С точки зрения юзабилити все изображения на сайте или его мобильной версии должны быть responsive (отзывчивыми), соответствовать контенту и быть уникальными.



Для отзывчивых картинок:



max-width: 100%


Обязательным условием остаются мета-теги alt и title. Title помогает поисковику понять смысл картинки, а alt делает картинку user-friendly.



Пример правильного alt и title:



дом в горах



дом в горах


Социальные мета-теги



Социальные сети все еще в тренде. Социализация сайтов повышает не только конверсию, но и место в выдаче. Для анонсов в соц. сетях используется протокол Open Graph. А именно мета-тег og:image позволяет выбрать картинку для иллюстрации социального поста.






Общие рекомендации



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


Пора забыть об атрибутах width и height. Больше никаких изображений размером 5000х4000 втиснутых в 500х400. Каждое изображение должно соответствовать своему размеру в html-документе.



image



Нужно приучить себя сохранять малоцветные изображения в PNG вместо JPG.



Обязательно оптимизировать картинки с помощью инструментов JpegTran, Pagespeed Image Optimizer и других.



Если сайт развернут на сервере apache с поддержкой модуля Google Pagespeed, то в файле .htaccess можно прописать следующий код:




ModPagespeed on
ModPagespeedEnableFilters rewrite_images



Этот фильтр включает в себя рекомпрессию картинок, конвертацию из jpg в png, конвертацию из обычного jpg в прогрессивный и изменение размеров. Подробнее об использовании в документации Google.



Облачные хранилища


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






Sitemap для картинок


Создать отдельную sitemap для картинок или добавить информацию о них в существующую. Тогда поисковики быстрее проиндексируют картинки. Пример генератора sitemap.



Метод спрайтов


Использовать метод спрайтов, чтобы сократить количество http-запросов.



.icon {
width: 16px;
height: 16px;
float: left;
background: url(icons.gif) no-repeat;
}
.first .icon {
background-position: 0 0px; /* по умолчанию */
cursor: pointer;
}
.second.icon {
background-position: 0 -16px; /* div сдвигается вверх на 16px */
cursor: pointer;
}




Конспект




  1. Картинки занимают 90% веса страницы и влияют на скорость ее загрузки.

  2. Чтобы измерить скорость сайта используйте Google Pagespeed

  3. Для анонсов в соц. сетях используйте Open Graph.

  4. Облачные хранилища для картинок экономят время загрузки.

  5. Для картинок нужен отдельный sitemap.



Original source: habrahabr.ru (comments, light).

http://habrahabr.ru/post/259931/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

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

Среда, 20 Мая 2015 г. 15:21 (ссылка)

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







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



В этом материале подобраны основные инструменты для оптимизации графики.





Серверные инструменты



Самые частые — изображения в формате JPG. Основные инструменты:




  • Jpegtran сжимает картинки без потерь и удаляет метаданные:



    jpegtran -copy none -optimize -outfile output.jpg input.jpg





  • Imagemagick работает практически со всеми форматами. Утилита convert позволяет указывать параметр качества для сжатия, что поможет уменьшить размер картинки:



    convert input.jpg -quality 75 output.jpg







Формат PNG используется для иконок, логотипов и малоцветных изображений. Инструменты для оптимизации:




  • pngquant – инструмент lossy-сжатия для оптимизации PNG с потерями качества. Основной алгоритм работы — уменьшается количество используемых оттенков цветов. Это снижает размер с небольшими потерями в качестве:



    pngquant --quality 75 —speed 1 input.png







  • pngcrush – еще одно средство оптимизации для PNG. Использует алгоритм сжатия без потерь:



    pngcrush -reduce -brute in.png out.png









Облачные инструменты




  • JPEGmini. Отлично сжимает фотки на 20…30%. Создатели заявляют, что могут сжать некоторые изображения в 5 раз без потерь в качестве. Есть API для автоматизации.

  • TinyPNG. Реально крутой инструмент оптимизации для PNG. Очень хорошее сжатие без заметных потерь в качестве. Также есть API и большой бесплатный пакет.

  • i.onthe.io/google_speed. Простой сжиматор, работает с любым форматом. Удобен для одноразовой обработки.





Модуль PageSpeed



Google потрудился и выпустил модуль к Ngnix и Apache для повышения производительности сайтов. Он увеличивает скорость загрузки, оптимизируя дофига всяких параметров, в том числе и фотки. Работает автоматически, его нужно только установить и включить:



pagespeed on;
pagespeed FileCachePath /var/cache/nginx;




Модуль делает все сам — и анализирует HTML, и оптимизирует ресурсы. Например, пережимает картинки или минифицирует статику. В исходниках страницы все оптимизированные ресурсы будут иметь другой путь.



Прямая оптимизация ресурсов


После оптимизации PageSpeed сохраняет файл по новому пути. Но как быть с фотками, отображаемыми через JavaScript? Или со ссылками на Ваши фотки на сторонних ресурсах? Тут на помощь приходит IPRO – оптимизация ресурсов не отходя от кассы, а точнее не изменяя URL.



Для этого достаточно включить в конфиг такие инструкции (для Nginx):



pagespeed InPlaceResourceOptimization on;




Конспект




  • Используйте PageSpeed для поиска проблем с графикой на сайте.

  • Если графики много, используйте серверные инструменты для оптимизации: jpegtran, jpegoptim, ImageMagick, pngquant, pngcrush.

  • Облачные инструменты для одноразовых задач и подключения по API: JPEGmini, tinyPNG, i.onthe.io/google_speed.

  • Модуль PageSpeed к Nginx/Apache сделает всю оптимизацию сам, но его нужно собирать.



Original source: habrahabr.ru (comments, light).

http://habrahabr.ru/post/258363/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

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

Пятница, 27 Февраля 2015 г. 19:14 (ссылка)

0*wsxGNSYkec4cuuDJ



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



В конце концов люди начали спрашивать нас: «Как вы создаете GIF анимации?». Пришло время раскрыть секрет.





Дизайн GIF изображений



1. Секретный ингредиент



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

После того как я сохраняю анимацию как видео файл, я импортирую его в Photoshop через File > Import > Video Frames As Layers.







Совет: Если ScreenFlow или After Effects вам не по карману, то создайте анимацию в Keynote, и экспортируйте ее как видео. Наконец-то, хоть какое-то применение этой функции в Keynote.



2. Меньше цветов = больше веселья



Если вы хотите делать крутые GIF анимации, то нужно с особым трепетом подойти к выбору цвета. Это повлияет не только на размер файла, но и позволит создать более продолжительные анимации с маленьким размером файла. (Для меня маленький — это менее 1MB)



3. Используйте размытие в движении (motion blur), если возможно



Такие программы как ScreenFlow и After Effects позволяют экспортировать видео с применением размытия в движении. Это не только придаст вашей анимации профессиональный вид, но и упростит процесс уменьшения размера файла в Photoshop.



motionblur



nomotionblur







4. Будьте (отчасти) ленивыми



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



Экспорт GIF анимаций



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



5. Удалите кадры-дубликаты



Скорее всего ваша анимация останавливается или остается неподвижной на какой-то момент времени. Присмотревшись, можно заметить, что этот момет состоит из нескольких одинаковых кадров. Если таких кадров 10 штук, то удалите 9 из них и установите длительность оставшегося кадра на, например, 1 секунду.



delete_dublicates



Если это не поможет, попробуйте заново импортировать видео, но на этот раз выберите параметр Limit To Every 2 Frames. Это должно значительно уменьшить размер файла.







Совет: Если ваша анимация состоит из более 150 кадров, то возникнут проблемы при попытках уменьшить размер файла.



6. Меньше цветов



Когда вы сохраняете GIF анимацю в Photoshop, то увидете выпадающее меню возле параметра Colors. Поэкспериментируйте со значениями, попробуйте максимально малое количество цветов, которое не превратит весь файл в мусор.







7. Измените параметр Lossy* (потери)



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







*«Потери» (Lossy) — допустимый уровень потери графической информации в растровом файле, позволяющий уменьшить файловый размер изображения



Ничего не изменилось! Помогите!



Если вы попробовали все, что было сказано выше, но так и не смогли уменьши размер GIF анимации, то нужно сделать шаг назад. Может вы хотите невозможного? Есть ли другой способ добиться желаемого? Можно ли разбить файл на две GIF анимации? Будет лучше, если ваша GIF анимация сделает акцент на одном аспекте.



От переводчика. Со всеми пожеланиями и замечаниями по поводу перевода прошу обращаться ко мне в личку. Спасибо!

Original source: habrahabr.ru (comments, light).

http://habrahabr.ru/post/251709/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
Гаша-Макар

И снова программка для оптимизации изображений.

Среда, 15 Мая 2014 г. 03:19 (ссылка)

Это цитата сообщения daf53 Оригинальное сообщение


Оптимизатор фотографий JPEG для WEB



3719215_20110511_012433 (600x396, 79Kb)



И снова я встретил в интернете программку для оптимизации изображений мимо которой не смог пройти . Очень функциональная программа. С ее помощью можно уменьшать" вес" изображений, можно увеличивать размер картинки и ее разрешение с последующим уменьшением "веса". Как видите я увеличил размер картинки с 800х536 до 1024х686 и увеличил разрешение с 72 dpi  до 96 dpi и, в тоже время уменьшил "вес" с 145kb до 41kb без заметной потери качества. В общем мне она очень понравилась и я рекомендую ее Вам. Уверен не пожалеете.



Программа бесплатна. Русский интерфейс. Размер 1.67 mb / rar. Скачать можно здесь.




Серия сообщений "Полезные программы":

Часть 1 - Создаем фоны для дневника
Часть 2 - В продолжение поста "Создаем фоны для дневника". Сжатие картинок.
Часть 3 - Ещё одна полезная программка для оптимизации(сжатия) изображений.
Часть 4 - Качественное увеличение изображений
Часть 5 - И снова программка для оптимизации изображений


Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
Aleksandr_Shandyrev

Для чего производится оптимизация изображений

Понедельник, 21 Апреля 2014 г. 12:32 (ссылка)

Всем привет! Продолжая рубрику блоговедение на сайте Monymaker точка ру,продолжу тему редактирования изображений и хочу поговорить о том,как и для чего производится оптимизация изображений на вэб-ресурсе. Для того чтобы уяснить цель наших преобразований, начнём с определения понимания данного
выражения.
kak-i-dlya-chego-proizvoditsya-optimizaciya-izobrazhenij (211x228, 9Kb)

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество

Следующие 30  »

<оптимизация изображений - Самое интересное в блогах

Страницы: [1] 2 3 ..
.. 10

LiveInternet.Ru Ссылки: на главную|почта|знакомства|одноклассники|фото|открытки|тесты|чат
О проекте: помощь|контакты|разместить рекламу|версия для pda