София Ибрагимова

Контент-маркетолог

Если вы хотите создать минималистичные простые миниатюры, можно воспользоваться онлайн-сервисами для создания иконок. Вот популярные:

Созданные с помощью этих генераторов иконки можно разместить на любом фоне, сочетать друг с другом или с другими изображениями. Больше советов о том, как создать авторское изображение в статье «Значок канала для YouTube: рисуем как можем».

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

Альтернативные источники

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

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

Подготовка изображений

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

Задайте правильное имя файла

Оптимизация изображения начинается с его названия. В него необходимо включить ключевое слово. Так поисковым роботам будет проще понять, что изображено на картинке. Здесь все просто: если на картинке восход солнца в Париже, имя файла не должно быть DSC4536.jpg, назовите его paris-sunrise.jpg. Основное ключевое слово – «paris», так как это основной объект фотографии, поэтому я поместил его в начале названия.

Определите масштаб изображения

Для SEO очень важна скорость загрузки страницы. Чем быстрее грузится сайт, тем удобнее пользователям посещать страницу, а роботам – индексировать ее. Крупные изображения значительно снижают скорость загрузки. Особенно обидно для пользователей, если вы загружаете картинку 2500 × 1500, а на экран она выводится в размере 250 × 150.

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

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

Значительная часть вашей аудитории использует мобильные устройства для посещения вашей страницы. Поэтому изображения на сайте должны легко масштабироваться и приспосабливаться под любые форматы экранов. Если проигнорировать этот пункт, вы можете увеличить частоту отказов со стороны мобильных устройств, что отрицательно скажется на ранжировании. Для сайтов на WordPress разработан специальный плагин – RICG Responsive Images.

Он по умолчанию добавляет атрибут srcset к вашим изображениям и оптимизирует его под экраны любого масштаба.

Уменьшите размер файла

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

Чтобы проверить, удалось ли вам оптимизировать изображение, воспользуйтесь инструментом YSlow.

Загрузка изображения на сайт

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

Подписи под картинкой

Это текст, который сопровождает ваше изображение.

Почему подпись важна для оптимизации изображений? Пользователи обращают внимание на эти подписи, даже когда бегло просматривают статью. Эта такая же важная часть структурирования контента, как заголовки, подзаголовки и списки. Нильсен еще в 1997 году отметил, что «элементы, которые улучшают восприятие текста – это заголовки, крупный шрифт, полужирный текст, выделенный текст, маркированные списки, графика, подписи, тематические предложения и оглавления». В 2012 году KissMetric заявила, что «подписи под изображениями читаются в среднем на 300% чаще, чем сам текст. Поэтому не использовать их или использовать неправильно означает упустить возможность привлечь огромное количество пользователей».

Нужно ли добавлять подпись к каждому изображению? Нет, не нужно. Добавляйте текст в том случае, если он необходим для восприятия и полезен пользователю, а не просто ради оптимизации.

Alt и Title изображения

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

При наведении курсора на изображение Internet Explorer показывает текст альта. Если же вы пользуетесь Google Chrome, то у вас должен всплывать тег Title. Многие просто копируют текст альта и вставляют его в Title. Также в нем можно указать какую-либо несущественную информацию, не связанную с SEO. Некоторые вообще не заполняют Title, и ничего от этого не теряют.

Репост на других каналах

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

<meta property=»og:image» content=»http://example.com/link-to-image.jpg» />

Так вы сможете поделиться своим изображением в Facebook, OpenGraph, Pinterest.

Плагин WordPress SEO имеет раздел «Social». Если у вас установлена премиум версия, вы можете с помощью плагина предварительно просмотреть свой пост перед публикацией в Facebook. Если вы правильно настроили его, но он не работает, попробуйте очистить кеш Facebook.

При помощи этого плагина можно также настроить карточки для публикаций в Twitter.

Выравнивание по центру

Откровенно говоря, это мое личное мнение. Возможно, по этому поводу проводились какие-то исследования, но со стороны пользователя могу сказать: это попросту некрасиво, когда текст начинается справа от изображения, и потом перепрыгивает под него.

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

XML-файлы для карты сайта

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

Выжимка из статьи

Процесс оптимизации изображения состоит из нескольких этапов:

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

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

Оптимизация изображений для сайта | Советы и онлайн-сервисы

Всем-всем привет!

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

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

Какие изображения нужно оптимизировать?

Прежде, чем начать оптимизацию изображений, необходимо понять какие именно картинки тормозят загрузку. Опять же в прошлом уроке я продемонстрировал два сервиса для анализа скорости загрузки сайта: Google PageSpeed Insights и GTmetrix. Они-то нам и укажут на косяк.

В Google PageSpeed после анализа появляются вкладки, где мы можем увидеть ссылки на картинки, на JavaScript’ы и другие штуки, тормозящие работу сайта:

Достаточно нажать на вкладку “Как исправить?” и перед Вами появится список ссылок: 

В GTmetrix нужно будет щелкнуть на вкладку “Optimize image”:

Однако функционал второго сервиса гораздо шире, нежели PageSpeed от Google, и он предлагает нам скачать уже оптимизированную версию проблемного изображения. Для этого нужно будет нажать на ссылку “Optimized version”:

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

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

Для этой цели существует множество программ и онлайн-сервисов, что даже не знаешь какой выбрать. Особняком стоит популярнейшая программа от Adobe – Photoshop. Однако не каждый юзер может работать с ним, как никак профессиональная софтина, да и скачивать его только для оптимизации изображений сайта нецелесообразно. Поэтому я дам Вам небольшой список онлайн-сервисов:

• Optimizzila. Познакомился я с ним буквально пару часов назад, но он уже успел понравится мне. Его задача – сжать размер изображения до минимальных значений. Справляется на ура. Пример: закинул картинку на 414 кб, которая сильно тормозит скорость загрузки, и сжалась она до 3 кб(!) и без потери качества:Использует эффективную комбинацию алгоритмов по сжатию PNG и JPEG. Можно закинуть до 20 картинок и скачать их одним архивом;
• Compressor.io. Очень схож с Optimizilla, но сжимает чуть лучше. То же изображение весом 414 кб Compressor сжал до 2.9 кб. Результат впечатляет.
• JPEG-optimizer. Предназначен исключительно для работы с графическими файлами формата JPEG. Качество немного ухудшается:
• TinyPNG. Несмотря на свое название, данный сервис работает как с файлами формата PNG, так и JPEG. Справляется неплохо;
• Kraken.io. Данный сервис подойдет если Вы хотите оптимизировать большое количество изображений (от нескольких десятков до нескольких сотен). Однако изначальное качество картинки будет немного скомкано. Поверьте мне, лучше пожертвовать качеством картинки, чем большим количеством времени.

Вот такой получился небольшой обзор различных онлайн-сервисов по оптимизации изображений для сайта. Какой использовать дело Ваше, а я по работаю с Optimizilla и в Photoshop.

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

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

1. JPEG. Является приоритетным, так как картинки такого формата очень легко сжимаются без потери качества, к тому же и вес их небольшой;
2. PNG. В основном используется для создания картинок с прозрачным фоном. Существует две разновидности данного формата:
   1. PNG-8 – использует 256 цветов. Естественно, изображения этого формата имеют маленький вес;
   2. PNG-24 – использует 16 млн. цветов. Имеют гораздо больший вес по сравнению с PNG-8;
3. GIF. По сравнению с остальными форматами ограничен в качестве изображения. Рекомендуется использовать для иконок или картинок с декоративным эффектом. Поддерживает анимацию.

Вот небольшой пример изменения качества изображения в зависимости от формата при изменении размера:

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

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

До завтра!

несколько методов уменьшения времени загрузки

От автора: изображения — ключевой компонент каждого веб-сайта. Согласно HTTP Archive, изображения составляют более 60% данных, загружаемых на веб-страницы. Являясь таким критическим компонентом почти всех веб-сайтов, будь то e-commerce, новости, сайты о моде, блоги или порталы для путешествий, оптимизация изображений важна и, возможно, это самый легкий способ ускорить работу своего сайта с тяжелыми изображениями.

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

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

1. Измените размер изображений

Это необходимая вещь. Измените размеры изображений, чтобы они точно соответствовали вашим веб-сайтам. И нет, я не говорю об изменении размера с помощью CSS или HTML. Я говорю об изменении размера изображения на сервере, а затем отправке его в браузер.

Например, у вас есть изображение 4000x3000px для товара, который вы хотите перечислить на своем интернет-магазине. Однако на вашем веб-сайте вам нужно показать намного меньшее изображение этого товара. Это может быть изображение 200x300px на странице списка товаров и 800x1000px на странице сведений о товаре. Убедитесь, что вы уменьшаете исходное изображение до этих размеров перед отправкой в браузер. Измененные изображения намного меньше исходного изображения и будут загружаться намного быстрее, чем исходное изображение.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

<h3>XYZ Product Detail</h3> <!— DO NOT USE this as it will load the full size image and the browser does the resize —> <img src=»image.jpg» alt=»full size image» /> <!— USE a resized image where the resizing is done from the server and there is no need of browser-side resizing—> <img src=»resized_800x1000_image.jpg» alt=»resized image» />

На мой взгляд, неправильное изменение размеров изображений — это самая большая область оптимизации на большинстве веб-сайтов. И часто мы, как разработчики, склонны игнорировать это. Рассмотрим следующий сценарий: вы начинаете с идеально размерных изображений для вашего нового сайта. В течение следующих нескольких месяцев макет вашего веб-сайта изменится, а также ваши требования к размеру изображения. Однако вместо того, чтобы генерировать новые изображения для удовлетворения этих новых требований к размеру, что само по себе является самоцелью, вы занимаетесь близкой альтернативой. Например, вы используете изображение размером 300×200 пикселей там, где хватило бы 200×200 пикселей. Думаю, это случилось бы со всеми.

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

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

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

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

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

JPG, PNG и GIF являются наиболее распространенными форматами изображений, которые в настоящее время используются в Интернете, и каждый из них подходит для разных вариантов использования. Существует еще один относительно новый формат изображения, называемый WebP, который объединяет лучшие из этих форматов изображений, на 30% меньше по размеру и поддерживается почти на 75% современных браузеров.

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

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

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

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

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

3. Создавайте под мобильные устройства

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

<img srcset=»image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w» src=»image-800w.jpg» alt=»Image»>

Атрибут sizes дает информацию о макете изображения, атрибут srcset дает список изображений с фактической шириной, указанной для каждого URL-адреса.

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

Изображение, которое отлично смотрится на обычных устройствах, будет слегка размыто на экране с высокой плотностью. Решением этого является загрузка изображения 2x размера на экранах с DPR 2, 3-кратное изображение на экранах с DPR 3 и обычное изображение размером 1x на других устройствах. Это также можно выполнить с помощью адаптивного тега изображения, как показано ниже.

<img srcset=»image-320w.jpg 1x, image-640w.jpg 2x src=»image-320w.jpg» alt=»Image»>

Современная спецификация Client Hints упрощает работу с адаптивными изображениями и делает код более чистым по сравнению с атрибутом srcset и sizes. Как работают подсказки — это огромная тема сама по себе, она недоступна для этой публикации и подробно освещена здесь.

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

4. Загружайте меньше ресурсов

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

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

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

Рассмотрим случай, когда у вас есть 100 продуктов на веб-странице. Если вы запросите все 100 изображений одновременно и в самом начале, это замедлит время загрузки. Изображения будут конкурировать за пропускную способность сети и ресурсы ЦП с другими критическими элементами на странице, например, CSS и JS.

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

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

5. Используйте хороший CDN для доставки изображений

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

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

Допустим, ваш сервер веб-сайта находится в США. Сеть доставки контента кэширует ваши изображения на своей глобально распределенной сети серверов (это сложнее, чем на рисунке выше, но для простоты давайте предположим это так). Затем, если пользователь из Бразилии запрашивает изображение с вашего сайта, вместо того, чтобы получать это изображение с вашего сервера в США, CDN доставляет его из узла, ближайшего к этому пользователю в Бразилии. Это сокращает время прохождения в оба конца, необходимое для загрузки изображения.

При выборе CDN убедитесь, что CDN поддерживает HTTP/2. HTTP/2 — это новый протокол для доставки контента в Интернете, который может значительно ускорить время загрузки. Он использует такие методы, как мультиплексирование, сжатие заголовков и server push, чтобы уменьшить время загрузки страницы. HTTP/2 теперь поддерживается следующими CDN. Эта демонстрационная страница отлично справляется с визуальным объяснением разницы в производительности между HTTP/2 и старым протоколом HTTP/1.1.

ImageKit предоставляет вам CDN, который включен HTTP/2 из коробки. Без каких-либо дополнительных усилий вы можете получить лучшую в своем классе доставку ваших изображений (и даже других статических файлов) с помощью ImageKit.

Как я могу проверить свой сайт на проблемы, связанные с изображениями?

Ну, есть немало инструментов, которые вы можете использовать для тестирования веб-сайта специально для проблем, связанных с изображениями. Один из способов — использовать website analyzer от ImageKit. Просто введите URL-адрес страницы и в течение нескольких секунд вы получите предложения относительно изменения размера, наилучшего формата, ленивой загрузки и HTTP/2. Google также работал над инструментом с открытым исходным кодом под названием Lighthouse. Этот инструмент интегрирован в новейшие версии Chrome и может провести тщательный анализ не только изображений на вашем веб-сайте, но и других проблем, которые могут повлиять на производительность. Google PageSpeed insights также указывает, что вы загружаете неоптимизированные изображения на своем сайте, кроме других рекомендаций.

Заключение

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

Автор: Brandon Morelli

Источник: https://codeburst.io/

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Верстка-Мастер. От теории до верстки популярных шаблонов

Изучите современную верстку сайтов с нуля

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

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

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

Примечание: С параметр -o7 optipng работает в самом медленном режиме. Для быстрого используется -o0.

Затем pngcrush:

Оптимизация JPG с помощью jpegtran:

Написание скрипта

Прежде всего необходимо задать основные параметры:

• -i или —input для исходной папки
• -o или —output для папки с результатом
• -q или —quiet для отключения вывода процесса выполнения
• -s или —no-stats для отключения вывода статистики
• -h или —help для вызова справки

SHORTOPTS="h,i:,o:,q,s"
LONGOPTS="help,input:,output:,quiet,no-stats"

ARGS=$(getopt -s bash --options $SHORTOPTS --longoptions $LONGOPTS --name $PROGNAME -- "$@")
 
eval set -- "$ARGS"
while true; do
	case $1 in
		-h|--help)
			usage
			exit 0
			;;
		-i|--input)
			shift
			INPUT=$1
			;;
		-o|--output)
			shift
			OUTPUT=$1
			;;
		-q|--quiet)
			QUIET='1'
			;;
		-s|--no-stats)
			NOSTATS='1'
			;;
		--)
			shift
			break
			;;
		*)
			shift
			break
			;;
	esac
	shift
done

HELP

• usage(), в цикле, для вызова справки
• main() для оптимизации изображений

PROGNAME=${0##*/}

usage()
{
  cat <<EO
Usage: $PROGNAME [options]
 
Script to optimize JPG and PNG images in a directory.
 
Options:
EO
cat <<EO | column -s\& -t
	-h, --help  	   & shows this help
	-q, --quiet 	   & disables output
	-i, --input [dir]  & specify input directory (current directory by default)
	-o, --output [dir] & specify output directory ("output" by default)
	-ns, --no-stats    & no stats at the end
EO
}

SHORTOPTS="h,i:,o:,q,s"
LONGOPTS="help,input:,output:,quiet,no-stats"
ARGS=$(getopt -s bash --options $SHORTOPTS --longoptions $LONGOPTS --name $PROGNAME -- "$@")

Примечание: если возникают ошибки, вроде «./optimize.sh: line 2: $’\r’: command not found», то необходимо открыть скрипт в Sublime Text 2 и включить Unix Mode в View > Line endings > Unix.

Главная функция (main)

main()
{
	# If $INPUT is empty, then we use current directory
	if [[ "$INPUT" == "" ]]; then
		INPUT=$(pwd)
	fi
 
	# If $OUTPUT is empty, then we use the directory "output" in the current directory
	if [[ "$OUTPUT" == "" ]]; then
		OUTPUT=$(pwd)/output
	fi
 
	# We create the output directory
	mkdir -p $OUTPUT
 
	# To avoid some troubles with filename with spaces, we store the current IFS (Internal File Separator)...
	SAVEIFS=$IFS
	# ...and we set a new one
	IFS=$(echo -en "\n\b")
 
	max_filelength=`get_max_file_length`
	pad=$(printf '%0.1s' "."{1..600})
	sDone=' [ DONE ]'
	linelength=$(expr $max_filelength + ${#sDone} + 5)
 
	# Search of all jpg/jpeg/png in $INPUT
	# We remove images from $OUTPUT if $OUTPUT is a subdirectory of $INPUT
	IMAGES=$(find $INPUT -regextype posix-extended -regex '.*\.(jpg|jpeg|png)' | grep -v $OUTPUT)
 
	if [ "$QUIET" == "0" ]; then
		echo --- Optimizing $INPUT ---
		echo
	fi
	for CURRENT_IMAGE in $IMAGES; do
		filename=$(basename $CURRENT_IMAGE)
		if [ "$QUIET" == "0" ]; then
		    printf '%s ' "$filename"
		    printf '%*.*s' 0 $((linelength - ${#filename} - ${#sDone} )) "$pad"
		fi
 
		optimize_image $CURRENT_IMAGE $OUTPUT/$filename
 
		if [ "$QUIET" == "0" ]; then
		    printf '%s\n' "$sDone"
		fi
	done
 
	# we restore the saved IFS
	IFS=$SAVEIFS
 
	if [ "$NOSTATS" == "0" -a "$QUIET" == "0" ]; then
		echo
		echo "Input: " $(human_readable_filesize $max_input_size)
		echo "Output: " $(human_readable_filesize $max_output_size)
		space_saved=$(expr $max_input_size - $max_output_size)
		echo "Space save: " $(human_readable_filesize $space_saved)
	fi
}

optimize_image:

# $1: input image
# $2: output image 
optimize_image()
{
	input_file_size=$(stat -c%s "$1")
	max_input_size=$(expr $max_input_size + $input_file_size)
 
	if [ "${1##*.}" = "png" ]; then
		optipng -o1 -clobber -quiet $1 -out $2
		pngcrush -q -rem alla -reduce $1 $2 >/dev/null
	fi
	if [ "${1##*.}" = "jpg" -o "${1##*.}" = "jpeg" ]; then
		jpegtran -copy none -progressive $1 > $2
	fi
 
	output_file_size=$(stat -c%s "$2")
	max_output_size=$(expr $max_output_size + $output_file_size)
}

Выходная информация

file1 ...................... [ DONE ]
file2 ...................... [ DONE ]
file_with_a_long_name ...... [ DONE ]
...

1. Определить длины названий файлов
2. Заменить промежутки точками
3. Задать максимальную длина названия и текста » [ DONE ]»

max_filelength=`get_max_file_length`
	pad=$(printf '%0.1s' "."{1..600})
	sDone=' [ DONE ]'
	linelength=$(expr $max_filelength + ${#sDone} + 5)
 
	# Search of all jpg/jpeg/png in $INPUT
	# We remove images from $OUTPUT if $OUTPUT is a subdirectory of $INPUT
	IMAGES=$(find $INPUT -regextype posix-extended -regex '.*\.(jpg|jpeg|png)' | grep -v $OUTPUT)
 
	if [ "$QUIET" == "0" ]; then
		echo --- Optimizing $INPUT ---
		echo
	fi
	for CURRENT_IMAGE in $IMAGES; do
		filename=$(basename $CURRENT_IMAGE)
		if [ "$QUIET" == "0" ]; then
		    printf '%s ' "$filename"
		    printf '%*.*s' 0 $((linelength - ${#filename} - ${#sDone} )) "$pad"
		fi
 
		optimize_image $CURRENT_IMAGE $OUTPUT/$filename
 
		if [ "$QUIET" == "0" ]; then
		    printf '%s\n' "$sDone"
		fi
	done

# All parameters to default
./optimize.sh
# Or with custom options
./optimize.sh --input images --output optimized-images
# Or with custom options and shorthand
./optimize.sh -i images -o optimized-images

Статистика

Запускаем скрипт еще раз и видим статистику:

Осталось только отображать процесс выполнения оптимизации:

if [ "$QUIET" == "0" ]; then
		echo --- Optimizing $INPUT ---
		echo
	fi
	for CURRENT_IMAGE in $IMAGES; do
		filename=$(basename $CURRENT_IMAGE)
		if [ "$QUIET" == "0" ]; then
		    printf '%s ' "$filename"
		    printf '%*.*s' 0 $((linelength - ${#filename} - ${#sDone} )) "$pad"
		fi
 
		optimize_image $CURRENT_IMAGE $OUTPUT/$filename
 
		if [ "$QUIET" == "0" ]; then
		    printf '%s\n' "$sDone"
		fi
	done