Фото оптимизация – Оптимизация картинок на сайте: полный гайд

JpegMini

JpegMini, платная программа. Есть версии за 20 и за 149 USD, а также дорогая серверная версия. Десктопные версии работают одинаково, младшая имеет два ограничения: в скорости обработки и в максимальном разрешении файла (28Мп), старшая ограничена размером файла (60Мп). Работает на Windows и Mac.

TinyJPG

Есть платная версия в виде плугина для Adobe Photoshop (50 USD) и бесплатная онлайн-версия с ограничениями на размер файла и количество загрузок в сутки (которое, впрочем, очень легко обходится). Плугин работает также на Windows и Mac. Первые 500 файлов в месяц через API бесплатно, далее 0,009 USD за файл.

Compressor.io

Известный онлайн-сервис. Ограничен только максимальный размер файла, 10Мб.

Kraken.io

Популярный на Западе профессиональный сервис с высокими тарифами и жёсткими квотами. Бесплатная онлайн-версия ограничена максимальным размером файла в 1 Мб и вряд ли может восприниматься как инструмент. Это не более, чем демо-версия – обычная любительская камера не в состоянии выдать файл меньше 2–3 Мб. Тарифы на использование API начинаются с 5 USD в месяц за входящий объём 500 MB.

ConvertImage.net

Комплекс онлайн-инструментов для обработки изображений, среди которых есть и Jpeg-компрессор. Полностью бесплатен.

Jpeg-Optimizer.com

Онлайн-сервис. Полностью бесплатен и без ограничений. Есть ручная настройка уровня компрессии.

Optimizilla.com

Бесплатный веб-сервис. Этот же движок встречается и на других доменах. Многоязычный интерфейс. Ручная установка уровня компрессии (настройка появляется после загрузки изображения). Не более 20 файлов за раз.

DynamicDrive.com

Набор бесплатных онлайн-инструментов для обработки изображений. Оптимизация с ограничением файла 2,8 Мб. Выдаёт несколько готовых изображений с разными уровнями компрессии на выбор.

ShortPixel.com

Некий новый сервис с обилием разных тарифных планов, есть подписка с месячной оплатой и пакетные тарифы (10 000 файлов за 9,99 USD). Работает по API или через веб-интерфейс (до 20 файлов за раз). Ограничение размера файла в бесплатной онлайн-версии – до 10Мб.

ACDSee Ultimate

ACDSee Ultimate 9, профессиональная программа для организации и обработки изображений для Windows. Сохранение с включением «Optimize Huffman codes» и «Color Component sampling», качество 70%. Программа платная, цена начинается с 40 USD за самую скромную версию, но похожие настройки есть во многих бесплатных программах. Это пример чистого сохранения с небольшой lossless-оптимизацией.

«Чистый» JPEG

Сохранение файла с качеством около 70% (9 из 12) из Adobe Photoshop CS6, разновидность формата «базовая». Здесь чистый JPEG с использованием только возможностей формата, «нижняя точка отсчёта», доступная бесплатно из любой программы, умеющей сохранять в формате JPG.

Теперь немного о тех, кого забыли и почему. Вы это обязательно найдёте в Гугле, если попробуете найти оптимизаторы самостоятельно, поэтому не сказать о них нельзя.

RIOT, бесплатная программа из параллельного мира. Существующая как в виде stand-alone приложения, так и в виде плугинов для других программ из параллельного мира: GIMP, IrfanView, XnView. К сожалению, распространяемый файл, мягко говоря, не проходит проверку антивирусами (но, не просто с подзрением на ошибку, а в формате «вся таблица Менделеева» см. результат проверки на VirusTotal ). Этим же грешит и GIMP.

ImageOptim, старенькая программа для Mac с очень скромными способностями, на уровне сжатия без потерь (как показывают сторонние тесты). Кроме того, при всём уважении, Mac у нас сегодня не «стоит в каждом доме», как хотел Стив.

EWWW I.O., полностью платный инструмент, работающий только через API (автоматический программный интерфейс). Оплачивается каждый загруженный файл. Т. е. это не продукт для массового потребителя, протестировать без регистрации и оплаты его нельзя, не будем мешать ему работать.

ImageOptimizer.net, в результатах Гугла – в первых рядах. Инструмент не работает, на любых настройках выдаёт исходный файл без изменений.

Результаты обработки

• Там, где есть ручная настройка качества, выбиралось 70%.
• Оценка итоговой картинки – субъективная, на анализе артефактов второго файла, по 10-бальной шкале, обзначенной такими делениями: ❱❱❱. Чем ближе картинка к оригиналу – тем выше оценка. 10 – картинка визуально неотличима от исходного файла, 5 – принято за отличие файла, сохранённого в формате JPG с качеством 70% без дополнительной оптимизации.
• Для того, чтобы посмотреть полученный файл – кликните на цифру в таблице.

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

JpegMini и Kraken оказались в самом низу таблицы, отсортированной по размеру итогового файла, но только эти две технологии жмут файл, полностью честно сохраняя картинку. В категории «10 баллов» JpegMini выглядит со всех сторон привлекательнее.

При совсем чуть-чуть менее приемлемой картинке, оказалось, что Compressor.io жмёт лучше маленькие файлы, а Optimizilla.com – большие, но это очень условное заключение в рамках данного теста.

Принимая во внимание соотношение размер/качество, то что находится в таблице ниже девяток, но имеет меньшие оценки при большем размере файла – практического интереса не представляет. А выше «девяток» – всего два сервиса.

Интересен оказался самый свежий сервис – ShortPixel. Артефакты очень заметны, но если сжать картинку до такого размера средствами самого формата JPG – картинка получается заметно хуже. ShortPixel ориентирован в большей степени на работу через API и относительно недорог, но очень деструктивен по отношению к изображению.

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

Интересная особенность TinyJPG в виде плугина: после обработки, файл может оказаться как в 8–10 раз меньше исходного по размеру, так и в полтора-два раза больше.

Тестовую картинку №2 лучше всего сжал ShortPixel, но на большинстве файлов с большим числом мелких деталей, победителем выходит веб-версия TinyJPG. Файл получается меньше, а исходное изображение уродуется не так сильно. Однако, TinyJPG допускает файл не более 5 MB, а ShortPixel, даже в бесплатной версии, принимает файлы до 10 MB.

Ещё один важный фактор замера (кроме итогового размера файла) – удобство использования на потоке. Например, если вы озадачились оптимизацией домашнего архива в 100 Гб в первый раз – обработать его полностью при помощи онлайн-сервисов будет очень трудоёмко и долго, из-за ограничений и необходимости порционной загрузки этого объёма на сервер и обратно. При том, что, за скромные 20 USD, с JpegMini для этого потребуется одно движение мыши (буквально: нужно только перетянуть корневую папку с изображениями в окно программы).

Кстати, плугин TinyJPG для фотошопа – выполнен не в виде фильтра, а в виде канала экспорта, т.е. для создания в PS сценария автоматизации он не годится. Поправка: с сайта производителя можно скачать скрипты для автоматизации, которые работают в любой версии Фотошопа, а в Photoshop CC экспорт через плугин встаёт как операция для пакетной обработки. Плугин не имеет никаких ограничений – проверено на файле с разрешением 130Мп (время обработки – около 7 минут на достаточно мощном компьютере).

Вообще, для массовой обработки есть только два варианта – это использование API и JpegMini. За обработку через API платить придётся за каждый обработанный файл.

Выводы

• Все инструменты, позволяющие получить относительно приемлемый файл меньшего размера, чем даёт JpegMini – или визуально ухудшают в картинку и проигрывают ему в удобстве использования или имеют менее привлекательную ценовую политику – повременная или пофайловая аренда против единоразовой покупки у JpegMini.
• Для случаев, когда качество картинки имеет первостепенное значение, если уменьшение размера файла за счёт визуальных ухудшений неприемлемо – JpegMini остаётся лучшим инструментом.
• Для случаев, когда качеством исходных файлов можно немного пренебречь в угоду компрессии, есть смысл использовать обе версии TinyJPG, в зависимости от задачи.
• Если выбирать только из бесплатных компрессоров, лучше всего выглядят Compressor.io и Optimizilla.com, которые почти не портят картинку, при том, что итоговый файл получается заметно меньше, чем у JpegMini.
• Владельцам новостных сайтов с большим потоком иллюстраций, претензии к качеству которых не так остры, есть смысл обратить внимание на ShortPixel и TinyJPG. Их преимущества – демократичные тарифы, рекордное сжатие и работа через API. А если качество имеет значение (а деньги нет), то через API имеет смысл подключать Kraken или, в случае очень больших объёмов, серверную версию JpegMini.

обзор

defs.in.gallerix.ru

Как в 1 клик сжать все картинки на сайте без потери качества?

Привет, друзья! В посте я расскажу, как с помощью одного интересного инструмента можно практически в 1 клик сжать все изображения на сайте. Это должен сделать практически каждый вебмастер/оптимизатор/владелец ресурса. Способ легкий, автоматизированный и бесплатный.

Если 5-7 лет назад в основе оптимизации лежало ссылочное продвижение, работа над тегами Title, добавление ключевых слов, то сейчас владельцы веб-проектов и оптимизаторы стали работать по всем фронтам. Один из них — быстрая загрузка ресурса (один из факторов ранжирования в Google). С развитием мобильного интернета данное направление усилило свою актуальность.

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

Возможно, это будет первая серия из цикла постов по оптимизации загрузки сайта (как вариант по Google PageSpeed Tools) — я еще не решил. Если так, то она будет называться «Оптимизируйте изображения».

Ошибки при публикации изображений

При загрузке изображений многие делают 3 главные ошибки:

1. Загружают большие картинки, которые, например, посредством CSS уменьшаются на заданные размеры. Причем, файл изображения загружается полный, а показывается «урезанным». Необходимо следовать правилу — загружать картинки того размера, который будет показываться на сайте (исключение, если по клику открывается оригинал).
2. Загружают неоптимизированные изображения (например, для файла 500 на 400 размер в 150 КБ является слишком большим). Второе правило — публиковать оптимизированные сжатые картинки.
3. Этим пунктом «балуются» противоположники первых двух. Есть вебмастера, которые в погоне за уменьшением размера, пережимают изображения. Те становятся хуже качеством, и это бросается в глаза.

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

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

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

P.S. Google PageSpeed Tools часто советует оптимизировать изображения, к которым вебмастер не имеет доступа. Причем, это могут быть картинки из Google Adsense.

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

Задачи и трудности при поиске их решения

Задача не совсем ординарная, поэтому я сразу искал идеальное решение:

1. Массовость. Нужно сжать не 20 и не 200, а к примеру 2000 изображений. Даже если какой-то инструмент и позволит работать с одной сотней файлов, то это будет неидеальный вариант.
2. Автоматизация. Добавил 2000 файлов, нажал старт и продолжил заниматься своими делами .
3. Обработанные изображения не должны потерять в качестве.
4. Универсальность. Инструмент должен работать со всеми популярными форматами: PNG, JPG, GIF.
5. Полученные картинки не должны поменять своего имени. Данный пункт необходим для того, чтобы готовые файлы без проблем загрузить обратно на сервер.

Безусловно, в интернете встречались варианты, но все они не соответствовали пяти пунктам. В какие-то сервисы можно было загружать до 100 файлов за раз, другие — меняли имя картинки (imagename.png -> imagename-min.png), третьи могли работать, например, только с PNG или JPG (у меня в блоге, например, встречаются как JPG, так и PNG с GIF).

Optipic.io — как сжимать картинки на полном автомате?

Все предыдущие пункты легко реализуются в сервисе по автоматическому сжатию изображений Optipic.io. Он сожмет картинки на вашем сайте и ускорит загрузку его страниц. Работает с самыми популярными форматами: JPG и PNG. 2 варианта компрессии: без потери качества или с небольшой потерей, но с максимальной эффективностью. Resize, мониторинг новых графических файлов, сохранение оригиналов и многое другое.

Подключить модуль сервиса можно легко любому сайту на PHP, включая популярные CMS (для них есть специальные плагины). Гибкое ценообразование и скидки для некоммерческих проектов.

FileOptimizer — чудо-инструмент для сжатия изображений

Тот, кто ищет, однажды обязательно найдет. Вот и я при поиске наткнулся на обзор инструментария для оптимизации картинок. В нем нашел очень интересную и полезную программу FileOptimizer (страница для скачивания по этой же ссылке).

Чудо-утилита для поставленной задачи. По-другому и не скажешь . Программа умеет в автоматическом и массовом режиме сжимать сотню форматов (включая GIF, PNG и JPG) без потери качества и изменения имен файлов. Например, я сейчас активно ей пользуюсь. Для одного из сайтов получилось сжать изображения на 17% (то есть практически на пятую часть).

Результат не феноменальный, но достойный. Тем более, что к этому я был практически не причастен: все оптимизировалось автоматически.

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

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

PNG (153 КБ) — cкриншот программы Monosnap (конечно, такие фото лучше сохранять в jpg, но для примера работы программы вполне подойдет ).

После обработки — 114 КБ (72% от оригинала).

JPG (24595 Б). Обработка файла с помощью pixlr.com (онлайн фотошоп).

После обработки 23025 КБ (93% от оригинала). Здесь результат похуже, потому что pixlr.com сам по себе довольно неплохо сжимает.

Формат GIF также сжимается, но обычно не более 3-5%. Им обычно мало кто пользуется, поэтому не сильно принципиально.

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

Что нужно оптимизировать?

1. В первую очередь, изображения, которые публикуются в контенте материалов (например, в wordpress это папка называется uploads).
2. Картинки шаблона оформления/дизайна/темы.
3. Файлы, которые публикуют пользователи (например, актуально для форумов).
4. Картинки кэша (если используются).

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

Инструкция и советы по использованию программы

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

1) Optimization Level (уровень оптимизации от Fast до Best). Я пробовал вариант с Normal и вариант с Best. Различия незначительны, а вот время на выполнение во втором случае увеличилось в 2 раза. Поэтому советую выбирать вариант Normal.

2) Process priority (приоритет процесса от Idle до Realtime). Настройка регулирует выделение ресурсов вашего компьютера на выполнение процесса. Idle выделяет минимальное количество ресурсов, realtime, наоборот. ПК, на котором я сжимаю картинки, не самый производительный, поэтому выбираю Normal. Это не мешает мне работать с другими приложениями. Если выбрать Realtime, то может «заикаться» музыка, проигрываемая в браузере.

В общем, здесь многое зависит от мощностей вашей машины. Если она мощная, то выделяйте больше ресурсов (можно поиграться с выбором). В таком случае, процесс оптимизации пройдет быстрее.

3) Check for updates (проверка на обновления). Думаю. что сами разберетесь .

4) Log level позволяет вести логирование данных. Я оставил на None (не использовать).

5) Галочка Keep file attributes позволит сохранить атрибут файла: системный, только для чтения и так далее.

6) Do not use recycle bin — я поставил здесь галочку. Дело в том, что изначально программа отправляет оригинальный файл в корзину, а оптимизированный оставляет в папке, где он собственно и находился. Если вы не сразу удаляете все, что попадает в корзину, а на всякий случай оставляете на неделю-месяц, то советую поставить галочку, чтобы в ней не собиралось тысячи удаленных изображений. Все равно бояться нечего: бэкапы уже сделаны.

Есть еще несколько настроек для конкретных форматов (JPG, PNG, для GIF нет), но я галочки там не ставил. Можно достигнуть более сильного сжатия, но с потерями качества или отображаемости картинок.

Вот и все на сегодня! Скачивайте программу, добавляйте свои файлы (Add files или просто перетянуть нужную папку), оптимизируйте их и закачивайте обратно на сервер. А я же от вас жду отзывы по утилите и результаты по сжатию изображений .

sosnovskij.ru

Как оптимизировать изображения для сайта

Для того, чтобы ваш сайт посещало большое количество человек, уверен на 100%, что вы пишите классные и большие посты.

Затачиваете их под НЧ и СЧ запросы, покупаете внешние ссылки, одним слово применяете стандартные правила SEO.

А знакомо вам такое понятие, как оптимизация изображений, насколько грамотно вы делаете ее на своем блоге (применяете ли оптимизацию картинок для сайта в целом).

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

Вы скажите, а что тут такого, парень молодец делает контент более привлекательным для читателей. Я так тоже думал, пока не попал под фильтр АГС от Яндекс.

После такого печального события с моим блогом, я очень серьезно стал относиться к ведению, продвижению и наполнения площадки интересным материалом.

Что я делал с картинками на сайте не правильно? ВСЕ! Такого понятия, как seo оптимизация, я знать никогда не знал и если бы не случай, никогда и не узнал.

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

Зачастую имена имели якобы оптимизированные картинки: 3456.png или as12.jpg. Интересно, какое ключевое слово они в себе несли с таким названием?

Поля «ALT» и «TITLE», которые можно было заполнить при добавлении очередной картинки на сайт, так и оставались полями, которые можно было заполнить.

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

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

Для чего нужна оптимизация картинок

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

Обращали ли вы свое внимание, что при некоторых запросах в поисковиках, в выдаче над всеми результатами показываются и картинки, релевантные данному запросу.

В качестве примера давайте введем в строку поиска запрос «компьютер» и посмотрим на выдачу самых популярных систем: Яндекса и Google.

Гугл повел себя немного по другому от Яндекса.

Как видите в выдаче Яндекса, вверху над всеми результатами появились очень привлекательные (вкусные) картинки, которые так и манят сделать по ним переход.

У системы Google ситуация немного иная, так как картинки там появились по центру выдачи, но не думаю, что это как-то помешает собрать дополнительный трафик на сайт.

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

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

3) Контент — рулит! Не сможете без супер мощного и классного контента, сделать популярный и полезный сайт, приносящий пассивный заработок.

А статьи, наполненные только материалом (без использования картинок) не будут привлекательными для посетителей и не смогут раскрыть всю суть вашей мысли. Лично я, если попадаю на страницу, которая представляет собой только один текст, покидаю ее навсегда.

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

5) Скорость загрузки страниц блога. В наше время скоростных модемов никто не будет ждать больше 5-ти секунд, пока загрузится необходимая страница. А если не сделать оптимизацию изображения, тогда такая страничка не сможет загрузиться и через 20 секунд.

Как делается оптимизация картинок — 12 советов

1) Картинка должна быть уникальная. Об этом я писал в начале этого поста. Если вы думает, что поисковики не умеют определять изображения на уникальность, то вы глубоко заблуждаетесь.

Если приходится использовать заимствованные картинки, тогда старайтесь их хоть немного изменить (измените формат, размер, угол поворота или делайте коллаж).

2) Чем больше размер изображение занимает на странице, тем лучше это скажется на выдаче ее в результатах картинок.

3) Не размещайте картинки вес, у которых больше, чем 50 Кб — помните о посетителях, которые не будут тратить час драгоценного времени, пока загрузится страница.

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

5) Используйте атрибут «ALT». В данном атрибуте прописывайте альтернативное описание изображения. Именно то, что там будет написано, увидят пользователи, если выключен показ рисунков в браузере.

В данный текст, стоит включить ключевое слово, так как атрибут «alt» учитывается при ранжировании страниц.

6) Используйте атрибут «TITLE». В данном атрибуте прописывайте то, что увидят пользователи, если наведут курсор мыши на картинку. Немного изменив описание атрибута «alt» можно использовать его и в «title».

7) Не забывайте про «HEIGHT» и «WIDTH». Данные атрибуты указывают высоту и ширину изображения. Чем больше мы дадим информации поисковикам о картинке, тем лучше это скажется на выдаче.

8 ) Откажитесь от употребления анимированных картинок, если не хотите чтобы поисковики посчитали их за баннеры и не учитывали при ранжировании.

9) Текст, который окружает картинку должен включать в себя ключевые слова. Роботы Яндекса и Гугла придают больший вес тегам <h2>,<h3>,<h4> и т.д., поэтому употребление их в тексте рядом с картинками будет только плюсом.

10) Называйте изображения правильными именами. Если вы поместили изображение о ремонте компьютера, тогда и имя у такой картинки должно быть соответствующее типа «remont-kompyutera», но ни в коем случае не «16-nu» или что-то подобное.

11) Думайте о формате. Google и Яндекс воспринимают рисунки формата png и jpg, как фотографии, а формат gif, как картинки (кнопки или элементы дизайна).

12) Оптимизируйте не только картинку на странице, но и саму страницу. Чем больше вес будет иметь страница, тем больше его будет иметь и картинка.

Вот шаблон правильной оптимизации изображений:

<img title="название изображения, используя ключевое слово" src="http://seoslim.ru/wp-content/uploads/2012/05/besplatno.jpg" alt="альтернативное название с ключевиком" />

<img title=»название изображения, используя ключевое слово» src=»http://seoslim.ru/wp-content/uploads/2012/05/besplatno.jpg» alt=»альтернативное название с ключевиком» />

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

Выбираете нужное изображения и в поле «Заголовок» прописываем title картинки. В поле «Текст» пишем alt изображения. Ну а из поля «Размер» выбираем необходимый размер width и height.

Заключение

Теперь у вас не возникнет проблем, чтобы правильно сделать оптимизацию графики статей и шаблона на сайте.

Как только у меня появится немного больше свободного времени, я планирую оптимизировать картинки всех старых постов площадки.

Если есть, вопросы задавайте — помогу всем. Пока!

seoslim.ru

Ashampoo Photo Optimizer 7 — оптимизация фотографий

Ashampoo Photo Optimizer 7 — простая программа для оптимизации фотографий одним кликом или несколькими кликами мыши, улучшения качества снимка: изменения четкости, яркости, резкости и т. д. Программа автоматически применит необходимые настройки для исправления неудачной фотографии.

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

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

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

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

Основные возможности программы Ashampoo Photo Optimizer 7:

• простой понятный интерфейс;
• автоматическая оптимизация за один клик;
• редактирование изображений: коррекция цветов, удаление эффекта красных глаз, изменение резкости, удаление пятен, царапин, размытие и т. д.;
• автоматическая настройка баланса белого и растяжения контраста;
• поворот, отражение, выравнивание горизонта, изменение размера, наложение изображения, вставка водяного знака и т. д.;
• встроенные эффекты и фильтры;
• пакетная обработка фотографий;
• показ изображения до и после изменений для сравнения;
• отправка готового фото на электронную почту, на печать, в облачное хранилище Ashampoo Web;
• установка фотографии в качестве фона рабочего стола.

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

Программу Ashampoo Photo Optimizer 7 (программа платная) можно скачать с официального сайта немецкой компании Ashampoo. Приложение работает в операционной системе Windows 10, Windows 8.1, Windows 8, Windows 7 на русском языке.

Установите программу на компьютер, а затем запустите приложение.

Интерфейс Ashampoo Photo Optimizer 7

После запуска, откроется главное окно программы Ashampoo Photo Optimizer 7.

В верхней левой части окна программы находится меню для управления приложением.

Справа расположена панель инструментов: «Основные», «Коррекция цветов», «Лицо». «Эффекты», «Обработка», «Экспорт». В каждом инструменте находятся опции для применения выбранных настроек к изображению, с которым ведется работа.

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

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

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

Автоматическая оптимизация фото в один клик в Ashampoo Photo Optimizer 7

Самый простой способ устранить недостатки на фотографии: провести автоматическую оптимизацию в Ashampoo Photo Optimizer 7.

Закиньте фотографию в центральную область, нажав для этого на изображение левой кнопкой мыши, или нажмите на кнопку «Добавить файл…», или кнопку «Добавить папку…». Есть еще один способ для добавления фото в окно программы: войдите в меню «Файл», выберите пункт контекстного меню «Добавить файл».

После добавления фото в окно приложения, Ashampoo Photo Optimizer покажет на левой части фотографии оригинальное изображение, а на правой части картинки оптимизированный результат обработки.

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

Если нажать на стрелку около кнопки «Авто оптимизация», можно выбрать другой тип оптимизации изображения:

• Авто нормализация.
• Авто гамма.
• Авто уровень.
• Авто удаление пятен.
• Авто контраст.
• Авто резкость.
• Автоматическое уменьшение шума.

Выберите необходимый вариант. Для запуска автоматической оптимизации нажмите на кнопку «Авто оптимизация».

Откроется окно показывающее уровень оптимизации фотографии, нажмите в нем на кнопку «ОК».

Вам также может быть интересно:

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

Если вас удовлетворил результат обработки, для сохранения снимка на компьютере нажмите на кнопку «Сохранить файл».

Обратите внимание на то, что отредактированная фотография будут сохранена поверх оригинального фото. Если вы хотите оставить оригинал изображения на ПК, войдите в меню «Файл», выберите «Сохранить файл как…», а затем оптимизированный снимок под другим названием.

Создание эффекта старины в Ashampoo Photo Optimizer 7

Пользователь может воспользоваться встроенными фильтрами в программе Ashampoo Photo Optimizer 7 для создания эффекта старины на фотографии.

Для этого выполните последовательные шаги:

1. Выберите фотографию, которую нужно состарить.

2. На панели инструментов откройте инструмент «Эффекты», выберите опцию «Состаривание».

3. Если хотите, можете самостоятельно внести изменения в проект, выбрав подходящие настройки: можно изменить яркость, контрастность, выбрать вариант старения: «Сепия», «Оттенки серого», «Цвет», применить другие дополнительные настройки.
4. Выберите один из предложенных вариантов эффекта состаривания фото.
5. Нажмите на кнопку «Применить».

Если результат вас устраивает, нажмите на кнопку «Сохранить файл» (оригинал фотографии будет заменен оптимизированным изображением), или войдите в меню «Файл», выберите пункт «Сохранить файл как…» для сохранения состаренного изображения с другим именем (оригинал фото будет сохранен на компьютере).

Выводы статьи

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

Похожие публикации:

vellisa.ru

Как оптимизировать фото и привлекать трафик из поиска по картинкам

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

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

Размер имеет значение

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

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

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

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

Следующие сервисы понадобятся вам для проверки скорости загрузки страницы и автоматического изменения размера фото:

• Google PageSpeed Insights. Крупнейшая поисковая система мира разработала этот сервис, чтобы помочь вебмастерам управлять скоростью загрузки страниц.
• Website Testing Tools. Здесь вы найдете набор инструментов, позволяющий изменять размеры фото и увеличивать скорость загрузки страницы.

После определения оптимального размера фото для вашего сайта, приступайте непосредственно к поисковой оптимизации картинок.

Сколько стоит оптимизированное фото

Если верить пословице, одна картинка стоит тысячи слов. Однако это правило работает только в том случае, если пользователи видят эту картинку на странице выдачи. Кроме того, цена фото повышается, если оно помогает продвигать бизнес в целом.

Представьте себе сайт юридической компании. Как вы считаете, сумеет ли организация данного профиля получить выгоду от продвижения с помощью картинок? Или она просто потратит время и деньги, чтобы поставить галочку в маркетинговом плане и отчитаться перед инвестором об использовании модного способа раскрутки?

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

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

Уникальность фотографий

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

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

Обратите внимание, заслуженный инженер Google Мэтт Каттс утверждает, что использование изображений из фотобанков не оказывает негативного влияния на позиции ресурса в естественной выдаче. Крупнейшая поисковая система обращает внимание на качество и ценность контента в целом.

Название фотографий

Публикуя фотографии, корректно называйте файлы. Например, если вы делитесь с пользователями изображением смартфона Samsung Galaxy Nexus, логично, если файл с его изображением называется samsung-galaxy-nexus.jpg, а не abracadabra2244.jpg.

Поисковые системы используют названия файлов, чтобы определять, что изображено на картинках. Вам выгодно, чтобы «Яндекс» и Google поняли, что на фото изображен именно Samsung Galaxy Nexus, а не какая-то abracadabra2244.

Атрибут alt

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

Обратите внимание, атрибут alt формирует описание изображения, которое отображается на странице, если фотография по каким-то причинам не загружается. Поэтому постарайтесь с помощью 4-6 слов (125 символов) максимально точно указать, что изображено на фотографии. Впишите в атрибут alt ключевое слово, если это можно сделать естественно.

Например, если вы публикуете фото вышеупомянутого смартфона, в атрибут alt можно вписать следующее: смартфон Samsung Galaxy Nexus (черный). Представьте, как будет выглядеть ваша страница, если пользователь вместо фотографии увидит что-то вроде «купить смартфон недорого в Москве».

Атрибут title

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

Контент страницы

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

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

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

Семантическая разметка

Крупнейшие поисковые системы мира, включая «Яндекс» и Google, используют стандарт Schema.org для структурирования веб-страниц и улучшения результатов поиска. Используйте разметку Schema.org для изображений, чтобы улучшить результаты ранжирования ресурса в поиске по картинкам. Для этого заполните на сайте поля «URL изображения», «Миниатюра», «Название», «Подпись», «Описание», «Высота» и «Ширина». Более подробно об этом можно почитать в Вебмастере Яндекс.

Как быстро оптимизировать все фото на сайте

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

Публикуйте только уникальные фото. Корректно заполняйте атрибуты alt и title. Окружайте фотографии качественным и полезным текстом. Не забывайте про семантическую разметку. Оптимизация каждой фотографии отнимет у вас несколько минут. Представьте, сколько времени вы потратите, чтобы оптимизировать 1000 изображений. Если хотите решить эту задачу быстро, уделяйте время каждой фотографии во время публикации.

Адаптация материала Image Optimization: How to Rank on Image Search by Dave Davies.

Читайте также:

kak-optimizirovat-foto-i-privlekat-trafik-iz-poiska-po-kartinkam

texterra.ru

Оптимизация картинок для Google PageSpeed / .io corporate blog / Habr

Нет предела совершенству, и 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 сделает всю оптимизацию сам, но его нужно собирать.

habr.com