ГлавнаяОптимизацияОптимизация фото

5 бесплатных программ для быстрой оптимизации фотографий. Оптимизация фото


Сжатие изображений онлайн Наилучшее качество и сжатие

www.iloveimg.com

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

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

Bulk Resize Photos

Этот сайт позволяет загрузить сразу много изображений и в один клик изменить их размеры. Для удобства пользователей имеется несколько шаблонов, позволяющих сделать картинки одинаковой ширины или длины. Существует также возможность изменения формата файла (JPG, PNG) и уровня компрессии.

Bulk Resize Photos →

BIRME

Аббревиатура BIRME расшифровывается как Batch Image Resizing Made Easy. Это действительно очень простой и чрезвычайно быстрый онлайновый ресайзер картинок. Он позволяет изменять размеры изображений с сохранением пропорций и без, сжимать файлы с заданным уровнем компрессии и добавлять к картинкам простую рамку.

BIRME →

Resize Pic Online

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

Resize Pic Online →

PicGhost

С помощью этого сервиса вы сможете не только изменить размер изображений, но и нанести на них свой водяной знак. Может пригодиться, если вы опасаетесь несанкционированного использования выложенных вами в Cеть фотографий. Кроме загрузки файлов с жёсткого диска (до 40 штук одновременно), PicGhost может обработать фотографии, хранящиеся в Facebook или Flickr.

PicGhost →

TinyPNG

TinyPNG предназначен только для одной операции — оптимизации изображений, но справляется с ней, вероятно, лучше всех в интернете. Несмотря на название, он может обрабатывать не только PNG-файлы, но и JPG. От вас требуется только загрузить файлы, а далее сервис самостоятельно вычислит оптимальный уровень компрессии и выполнит сжатие. Обработанные изображения можно загрузить в виде одного архива или сохранить прямо в облачное хранилище Dropbox.

TinyPNG →

Optimizilla

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

Optimizilla →

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

lifehacker.ru

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

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

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

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

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

Далее читайте обзор 10 онлайн сервисов для сжатия изображений в форматах JPEG (JPG) и PNG, которые отличаются по своим функциональным возможностям.

TinyPNG

Онлайн сервис TinyPNG служит для оптимизации (сжатия) изображений в форматах PNG и JPG. Сервис имеет две идентичные страницы по разным адресам: tinypng.com и tinyjpg.com.

Откройте страницу TinyPNG, перетащите в специальную форму изображения в форматах .pnf и .jpg (можно загрузить файлы обеих форматов одновременно) со своего компьютера.

Особенности онлайн сервиса TinyPNG:

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

При помощи ссылки «download» загрузите на компьютер готовое изображение. Обработанные изображения можно сохранить в облачное хранилище Dropbox (кнопка «Save to Dropbox»), или скачать на компьютер сразу все изображения (кнопка «Download all»). Сохраненные файлы имеют оригинальное название.

Я использую этот сервис для оптимизации изображений, которые я добавляю на свой сайт. Вначале я обрабатываю картинки в программе Photoshop: изменяю размер (соотношение сторон) изображений, оптимизирую для web, сохраняю файлы в форматах «.jpeg» и «.png».

Далее я дополнительно сжимаю изображения на сервисе TinyPNG (TinyJPG), затем скачиваю на компьютер изображения наиболее меньшего размера в форматах JPEG или PNG.

JPEGmini онлайн

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

В окне сервиса нажмите на кнопку «Press to Upload Photos» для добавления фотографии, или перетащите изображение в специальную форму. Сервис имеет лаконичный интерфейс, нет никаких настроек.

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

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

Optimizilla

Онлайн сервис Optimizilla.com предназначен для сжатия файлов графических форматов JPEG и PNG. Сервис Optimizilla имеет версию на русском языке.

Особенности сервиса Optimizilla com:

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

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

Online Image Optimizer

Сервис Online Image Optimizer работает на сайте tools.dynamicdrive.com. Онлайн сервис предназначен для сжатия файлов форматов GIF, JPG, и PNG.

Online Image Optimizer имеет следующие возможности:

Обработки файлов проходит в три этапа:

  1. Вставьте ссылку на URL адрес файла в поле «Enter the url of an image» для загрузки файла из интернета или загрузите файл с компьютера при помощи кнопки «Обзор…».
  2. Выберите формат для преобразования файла в поле «convert to:». По умолчанию файл сохранится в том же формате. Для конвертирования выберите один из поддерживаемых форматов: PNG, JPG, GIF.
  3. Для запуска обработки нажмите на кнопку «optimize».

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

Compressor.io

Онлайн сервис Compressor.io для уменьшения размера изображений с поддержкой нескольких графических форматов.

Особенности сервиса Compressor io:

Вначале выберите тип компрессии: lossy или lossless. Далее перетащите изображение в специальную форму, или выберите файл с компьютера при помощи кнопки «select file».

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

Сжатую фотографию можно скачать на компьютер, или сохранить в облачных хранилищах Dropbox или Google Диск.

JPEG Optimizer

На сайте jpeg-optimizer.com работает онлайн сервис JPEG Optimizer. Поддерживаются файлы в формате JPEG.

Преобразование файлов проходит в 4 этапа:

  1. Нажмите на кнопку «Выберите файл», выберите фотографию с компьютера, который вы хотите оптимизировать.
  2. Выберите уровень сжатия между значениями 0-99, который вы хотите применить к изображению. Уровень сжатия по умолчанию равен 65.
  3. Если вы хотите изменить размер изображения, выберите новую ширину изображения, размер изображения пропорционально измениться.
  4. Нажмите кнопку «Optimize Photo», чтобы получить новое изображение.

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

Web Resizer

Web Resizer — бесплатный онлайн инструмент изменения размера фотографий. Сервис Web Resizer обладает расширенными возможностями:

Для добавления фотографии (JPEG или PNG) нажмите на кнопку «Выберите файл», выберите изображение на компьютере, а затем на странице сервиса нажмите на кнопку «upload image».

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

Для загрузки на компьютер нажмите на ссылку «download this image».

Для одновременного изменения группы изображений существует другая веб-страница сервиса Web Resizer.

Image Optimizer

Image Optimizer — сервис для сжатия фотографий онлайн. На сайте предлагается программа Image Optimizer.

В сервисе Free Image Optimizer выберите файл, а затем настройте параметры оптимизации изображения: выберите качество фото, максимальную ширину и высоту. Далее нажмите на кнопку «Optimize Now!»

IMGonline

IMGonline.com.ua — мощный сервис на русском языке для обработки файлов в формате JPEG. Сжатие изображений онлайн — одна из возможностей сервиса.

Сжатие изображений JPEG на сайте MGonline проходит в три последовательных этапа:

  1. Выбор изображения с компьютера.
  2. Параметры сжатия JPEG: размер изображения, выбор качества и т. п.
  3. Обработка изображения.

Можно открыть обработанное изображение, или скачать его на компьютер.

Compressjpeg com

Онлайн сервис compressjpeg.com служит для сжатия изображений в форматах JPEG и PNG. Дополнительно сервис поддерживает сжатие файлов в формате PDF.

Сжатие изображений производится в отдельных вкладках для каждого формата (JPEG, PNG, PDF). Максимальный размер обрабатываемого файла — 10 MB.

Сжатие JPEG происходит по следующему алгоритму:

  1. Загрузите до 20 изображений в форматах jpg или .jpeg. Для загрузки используйте кнопку «Загрузить» или перетащите картинки в зону загрузки.
  2. Скачайте сжатые изображения по одному или сразу в общем ZIP-архиве.

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

Сжатие PNG изображений и файлов PDF происходит аналогично.

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

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

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

vellisa.ru

Что такое оптимизация изображений?

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

Зачем оптимизировать изображения?

Изображения сильно сказываются на общем весе страницы (по сравнению с HTML/CSS/JS). Где вы взяли изображения?

стоковый сайт?

камера?

мобильное устройство?

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

поисковик?

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

По большей части, эти изображения весят больше, чем нужно.

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

Большие и несжатые изображения сильно замедляют загрузку страницы. Вот что будет:

Большие и несжатые изображения дольше загружаются, масштабируются и рендерятся

Браузер запрашивает и загружает изображение – 2400 х 1350 и 2.5Мб!

В зависимости от дизайна сайта HTML или CSS уменьшают размер изображения, чтобы оно вписалось в область превью 300 х 169.

Браузер рендерит масштабированное изображение на странице.

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

Нужно было изображение 300 х 169, а вы использовали 2400 х 1350.

Изображение экспортировалось в максимальном качестве 12/100% — это уровень для печати.

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

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

Что такое оптимизация изображений?

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

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

Разрешение сильно влияет на размер файла

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

Сжатие

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Несжатые изображения сохраняют все данные о пикселях, а также выглядят чище и четче – но и весят больше

Самый простой пример сжатия – операция «Экспортировать для веб» в фотошопе. Необходимо выбрать качество экспорта с наилучшим соотношением веса и качества.

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

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

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

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

Еще больше оптимизации

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

Пользователи не видят метаданные, поэтому их нужно вырезать

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

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

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

Уменьшенные и сжатые изображения быстрее загружаются и рендерятся

Браузер запрашивает и загружает изображение – 300 х 169 и 68Кб!

HTML/CSS масштабирование не требуется, поэтому браузер рендерит изображение на странице как есть.

В результате изображения на сайте намного быстрее загружаются и рендерятся.

«Работа с масштабированными изображениями» и адаптивный веб

У вас есть адаптивный дизайн, а GTmetrix советует «работать с масштабированными изображениями». И тут возникает конфликт. Вы можете задаться вопросом: «Как мне использовать адаптивный дизайн, если я должен работать с масштабированными изображениями? Не будут ли мои изображения плохо выглядеть на определенных брейкпоинтах?»

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

Под советом «работать с масштабированными изображениями» имеется в виду, что нужно работать с изображениями, не сильно отличающимися от масштаба.

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

В адаптивном дизайне тоже придется масштабировать изображения

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

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

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

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

Источник: https://gtmetrix.com/

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы

Узнайте как ускорить загрузку сайта .

Научиться

webformyself.com

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

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

Первая сторона оптимизации – скорость загрузки

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

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

Хорошо, так как оптимизировать картинки прямо сейчаc? Здесь я предлагаю 2 способа:

Уменьшить размеры изображений до таких, которые необходимы для вставки в статью

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Сжать изображение. Это позволит незначительно потерять в качестве, зато вес картинки уменьшиться на 30-70%!

Размеры изображений

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

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

Многие идут еще дальше – они вставляют в текст совсем небольшие картинки – 200-300 пикселей в ширину, но при этом кликабельные. То есть в тексте отображаются только миниатюры изображений, а при клике они раскрываются в полном размере. Есть много плагинов для того же WordPress, которые позволяют это сделать. Например, Lightbox.

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

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

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

Сжатие картинок

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

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

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

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

Таким образом, появление картинок на web-странице может превратиться в вечность. Конечно, ситуацию нельзя оставлять так.

Пример сжатия картинки

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

Как видите, в оригинале это аж полтора мегабайта, что очень много для web-страницы. Нам для размещения в статье как раз подойдет разрешение 640 на 420. Как видим, изначально размер уже 147 килобайт, что в 10 раз меньше. Но все равно это по-прежнему достаточно немало, поэтому мы попробуем еще немного уменьшить картинку с помощью сжатия.

Ну а как, собственно, сжать фото? Тут я вижу два варианта:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Воспользоваться одним из онлайн-сервисов для этой цели. Найти вы их сможете самостоятельно, просто вбив в поиск что-то вроде “сжать фото онлайн”.

Открыть картинку в фотошопе. Нажать Файл – Сохранить для Web и задать нужные настройки.

Вот так это выглядит в фотошопе:

Этот вариант мне нравится больше тем, что управлять качеством можно очень гибко. Как видите, на картинку смотреть вполне себе можно, при этом ее вес снижен до 80 килобайт. Это почти в 2 раза. Ползунок качества при этом смещен на 40. При желании вы можете ставить еше меньше.

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

То есть для каждого изображения нужно смотреть индивидуально, как оно будет выглядеть при сжатии и выставлять тот или иной уровень качества. Например, для скриншотов, где очень важно что-то разглядеть, лучше не выставлять качество на столь низкий уровень, как 40. Лучше установить 60-80. Также не забудьте указать правильный формат изображения – jpeg.

Как сжать png изображения

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

Таким образом удавалось добиться снижения веса png-изображений в 2-3 раза без существенных изменений в качестве.

Спрайты или как оптимизировать запросы к серверу

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

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

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

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

Вторая сторона оптимизации – подписи к картинкам

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

Кроме title у изображений также есть атрибут alt, который вызывает еще больше споров, чем первый атрибут. Для начала необходимо разобраться, для чего они нужны. Title – это всплывающая подсказка, которая появляется при наведении на изображение. Alt – альтернативный текст, который будет показан только в том случае, если у пользователя будет отключен показ графики.

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

Так есть ли какая-то польза от заполнения alt и title? Можно сказать, что она определенно есть, но не такая большая, как думают некоторые (заполняй alt и попадешь в топ). Подробнее о том, как заполнять эти атрибуты я писал в прошлых статьях о них.

Если кратко обобщить, то самое главное не спамить ключевыми словами. Текст должен быть длиной не более 150 символов и максимально конкретно описывать изображение. Оптимальным можно считать одинаковый title и alt. То есть просто заполняете один атрибут, копируете текст и вставляете в другой.

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

webformyself.com

Оптимизация изображений для web / Хабр

В интернете достаточно статей и проектов для ресайза изображений. Почему же нужна еще одна? В этой статье я расскажу почему нас не удовлетворили текущие решения и пришлось пилить собственное.

Проблема

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

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

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

В качестве примера, как делать не нужно можно посмотреть на главную страницу такого известного сайта, как github.com. При весе страницы 2 Мб, 1.2 из них занимают бесполезные картинки, которые можно оптимизировать и не загружать.

Второй пример — наш Хабр. Скриншот приводить не буду, что бы не растягивать статью, результаты по ссылке. На хабре картинкам изменяют разрешение на нужное, но не оптимизируют их. Это позволило бы сократить их размер на 650 Кб (50%).

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

Распространенные решения

Все, что будет сказано далее относится к JPEG и PNG изображениям, т.к. это наиболее популярные форматы в интернете.

Вбив в google что-то вроде «image resize backend» вы увидите, что в половине случаев предлагается использовать Nginx, другая часть— это различные самописные сервисы, чаще всего Node.js.

Из nginx, а точнее из libgd, которая используется в модуле nginx’а мы смогли выжать на тестовой картинке 63 RPS, что неплохо, но хотелось бы быстрее и больше гибкости. Graphicsmagick тоже не подходит, т.к. его скорость работы слишком низкая. К тому же оба эти решения выдают не оптимизированные изображения. Большинство других решений, например на Node предлагают использовать Sharp для ресайза, MozJPEG для оптимизации JPEG изображений и pngquant для оптимизации PNG.

Мы и сами достаточно долгое время пользовались самописной связкой из Nod’ы, Libvips и MozJPEG c pngquant, но в один из дней задались вопросом— «А можно ли сделать ресайз быстрее и менее требовательным к ресурсам?».

Спойлер: можно. ;)

Теперь хорошо бы выяснить, как можно ускорить наше приложение. Изучив код приложения мы выяснили, что imagemin, который использовался для оптимизации, а в частности его плагины MozJPEG и pngquant при работе дергают одноименные утилиты через os.Exec. Будем это дело однозначно выпиливать и использовать только биндинги к Cи'шным либам. Для ресайза использовался модуль Sharp, который представляет собой биндинг к С библиотеке Libvips.

Наша реализация

Гуглеж показал, что Libvips по прежнему лидер по скорости и конкурировать с ним может только OpenCV. Значит будем использовать Libvips и в нашей реализации, это уже проверенное решение и он имеет готовый биндинг для Go. Пора попробовать написать прототип и посмотреть что из этого выйдет.

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

Быстро написали прототип, протестировали и поняли, что несмотря на большее, чем в Sharp, количество внутренних крутилок, Libvips по-прежнему выдает на выход не оптимизированные изображения. С этим надо что-то делать. Опять обращаемся ко всемогущему гуглу и узнаем, что лучший вариант это по-прежнему MozJPEG. Тут начинают закрадываться сомнения, что мы сейчас напишем то же самое, что было на Node, только на Go. Но внимательно почитав описание MoZJPEG узнаем, что она является форком libjpeg-turbo и совместима с ней.

Выглядит очень многообещающе. Дело за малым — собрать свою версию Libvips, в которой jpeg-turbo заменен на версию от Mozila. Для сборки мы выбрали Alpine Linux, т.к. приложение все равно планировалось публиковать с помощью Докера и Alpine имеет очень приятный формат конфига пакета, очень похожий на используемый в Arch Linux.

Оптимизация картинки уменьшила ее размер в 4 раза без видимой потери качества. Оригинальный JPEG 351x527 79 Кб Оптимизированный 351x527 17 Кб
Собрали, протестировали. Теперь Libvips сразу при ресайзе выдает оптимизированную версию. То есть в Node версии версии мы сначала делали ресайз, а потом еще раз пропускали картинку через decoder-encoder. Теперь мы только делаем ресайз.

С JPEG разобрались, а что делать с png. Для решения этой задачи была найдена библиотека libpngquant. Она не очень популярная, несмотря на то, что консольная утилита pngquant, которая базируется на ней, используется во многих решениях. Так же к ней был найден биндинг на Go, немного заброшенный и с утечкой памяти, пришлось его форкнуть починить, дополнить документацией и всем остальным, что подобает приличному проекту. Libpngquant мы тоже собрали в виде Alpine пакета для простой установки.

Благодаря тому, что теперь изображение не требуется сохранять в файл для обработки c помощью pngquant мы можем немного оптимизировать процесс. Например не сжимать картинку при ресайзе в Libvips, а только после обработки в pngquant. Это позволит сохранить немного драгоценного процессорного времени. Надо ли говорить, что мы так же очень экономим благодаря тому, что вызов C библиотеки гораздо быстрее запуска консольной утилиты.

Разница в размере в 3 раза, но возможно появление артефактов (зависит от картинки). Оригинальный PNG 450x300 200 Кб Оптимизированный 450x300 61 Кб
Пример не очень удачной картинки, на которой появляются артефакты при сжатии. Оригинальный PNG 351x527 270 Кб Оптимизированный 351x527 40 Кб
После того, как прототип был написан, протестирован на моем пк и выдавал приличные 25 RPS на мобильном двух ядерном проце, сжирая весь CPU, захотелось увидеть сколько можно выжать из него на нормальном железе. Запускаем код на шести ядерной машине, натравливаем Jmeter и WTF??? Получаем 30 RPS. Пробуем разобраться что за фигня.

Libvips сам реализует многопоточность, то есть нам нужно только инициализировать библиотеку и в дальнейшем мы можем безопасно обращаться к ней из любого потока. Но у нас почему-то Libvips работает в 1 поток, что ограничивает нас одним ядром. Еще 1 ядро занимает pngquant. Итого получается, что наша супер быстрая ресайзилка отлично работает только на ноутбуке разработчика, а на остальных машинах не может утилизировать все ресурсы. ;)

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

Все более или менее современные ядра Linux (3.9+ и 2.6.32-417+ в CentOS 6) поддерживают опцию SO_REUSE, которая позволяет использовать один порт нескольким экземплярам приложения. Данный подход удобнее, чем балансировка средствами стороннего ПО, такого как HAProxy, т.к. не требует конфигурации и позволяет быстро добавлять и убирать инстансы. Поэтому мы использовали SO_REUSE и опцию "--scale" в Docker compose, которая позволяет указать количество запускаемых экземпляров.

Время мерить

Пришло время оценить результат наших трудов.

Конфигурация:

Результаты: Больше бенчмарков (правда без сравнения с Node версией) на wiki странице. Как видно переделывали ресайз мы не напрасно, увеличение скорости составило от 30 до 400% (в некоторых случаях). Если требуется ресайзить еще быстрее, то можно покрутить ручки «speed» и «quality» в libimagequant. Они позволят дополнительно сократить размер или увеличить скорость кодирования ценой потери качества изображения.

Код проекта на GitHub. Биндинг Go к libimagequant так же на GitHub.

habr.com

5 бесплатных программ для быстрой оптимизации фотографий

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

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

1. Приложение Фотографии (Майкрософт)

Это приложение входит в пакет предустановленных приложений Windows 10. Удобный просмотр фотографий, красивые альбомы по датам и быстрое редактирование фотографий.

Удобный просмотр фото в Windows 10

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

Функция «Улучшить»

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

2. Ashampoo Photo Commander Free

Функция «Оптимизировать»

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

Календарь, созданный в Ashmpoo

3. Photoscape

Интерфейс Photoscape

Здесь есть автокоррекция оттенка и контраста, можно выбрать из трех режимов насыщенности или отредактировать её вручную. Можно установить область на фото, в которой цвета будут более насыщенными. Резкость, фильтры, разные уровни подсветки.

Функции для автокоррекции

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

Разделение фотографии

4. Zoner Photo Studio 17 (русская версия) и Zoner Photo Studio 18

Каталог

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

Здесь есть удобный проводник, с помощью которого вы можете выбрать нужное фото, быстрая автокоррекцияя Edit→Adjust→Quick Fix, смена размера и ориентации, добавление текста и изменение разных параметров — экспозиции, цветовой температуры и т.д.

Функция Quick Fix

Впрочем, удобнее корректировать всё не через меню, а во вкладке Develop. Здесь вы можете быстро изменить разные параметры вручную или нажать Automaticly.

Коррекция фото

Во вкладке Editor есть все инструменты для более тщательной работы с фото и картинками — кисти, заливка, стёрка, разные фигуры, текст, символы, в общем всё, что есть в обычном фоторедакторе. И фильтры — куда же без них.

Фильтры

Сначала я скачала Zoner Photo Studio 18, но у неё пока нет русской версии. А вот у Zoner Photo Studio 17 есть, и скачать её можно здесь.

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

Быстрая фиксация

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

5. Picasa

Просмотр фото в Picasa

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

Коррекция фото в Picasa

В соседних вкладках много фильтров и эффектов. Можно просмотреть рядом две разные фотографии и одну и ту же — с эффектами и без. Удобно.

Просмотр двух фото

Итак, что лучше — трудно сказать. В плане удобства мне большего всего понравилось приложение «Фотографии» от Майкрософт, второе место можно отдать Zoner Photo Studio 18. Ну а насчёт качества автокоррекции — судите сами.

А какую программу для быстрой оптимизации фотографий используете вы? 

lifehacker.ru

Prostoy-Site | Все права защищены © 2018 | Карта сайта