О
П
Р
О
С



Размер изображения

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

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

Разобраться во всех тонкостях изменения размеров изображений Вам поможет наша статья ниже.

Как уменьшить картинку

Размер изображения Как уменьшить картинку
Язык:Русский
Формат:
Обновлено:2015-05-14
Автор:





Как уменьшить картинку

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

Как уменьшить картинкуСлучалось ли Вам при попытке выложить свою фотографию в Интернет на очередной сервис видеть предупреждение, типа: "Разрешается загружать файлы размером не более 2 мегабайт"? Либо такое: "Максимально допустимый размер изображения – 1000х1000 пикселей". Думаю, что да. Однако, не все могут понять, чего сервис от них хочет...

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

Краткий ввод в терминологию

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

  1. Размер изображения – обычно имеется в виду физические значения ширины и высоты картинки в пикселях.
  2. Размер файла изображения – подразумевается количество кило- или мегабайт, которые занимает картинка как файл. В разговорной речи встречаются синонимы термина такие как, например, "вес" или "объем" снимка.
  3. Разрешение изображения – термин, обозначающий плотность пикселей на картинке. В фотоделе, обычно измеряется в количестве точек на дюйм (dots per inch – DPI), однако, в повседневной жизни чаще встречается способ измерения разрешения в мегапикселях. При этом вычисляется количество пикселей не на одном дюйме, а на всем фото путем умножения ширины на высоту и деления на 1000000 (мега).

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

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

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

Разница в качестве картинки

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

Отсюда проистекает одна "печальная" истина: уменьшить любое большое изображение можно без особого труда, но увеличить маленькое без потери качества практически нереально. Иными словами, разрешение картинки можно только понижать. При попытке его увеличения мы получим нечеткий и никуда не годный снимок. Этим, кстати, грешат некоторые китайские камеры телефонов. Они, имея реальную матрицу на 0.3 – 2 мегапикселя, программно увеличивают разрешение готового снимка до 5 и даже 8 МП, из-за чего на выходе получается зашумленный нечеткий снимок.

Однако, не все так однозначно. Масла в огонь подливают фотографы, которые привыкли измерять разрешение не в мегапикселях, а в точках на дюйм :) И в этом есть рациональное зерно. Представим себе большую фотографию, к примеру, мегапикселей на 8. Из нее нужно вырезать фрагмент 400 на 300 пикселей. По вышеизложенной теории разрешение итогового фотофрагмента получится 400х300/1000000=0.12 МП...

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

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

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

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

Уменьшение изображений штатными средствами

Итак, представим такую ситуацию: у нас есть компьютер с Windows и картинка, которую срочно нужно уменьшить. Но ни Интернета, ни специальных программ для этого нет. Реально ли выполнить задачу? Да! Нам поможет стандартный, встроенный в Windows графический "недоредактор" Paint :)

Несмотря на свои скудные возможности, Paint позволяет менять размеры изображений за счет уменьшения или увеличения их линейных размеров. Для этого активируйте программу ("Пуск" – "Все программы" – "Стандартные"), откройте в ней нужную картинку и на вкладке "Главная" кликните кнопку "Изменить размер и наклонить", либо сочетание клавиш CTRL+W:

Уменьшение картинки штатными средствами Windows

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

Также иногда бывает нужно откадрировать изображение, то есть вырезать из общей картинки только один фрагмент. Сделать это в Paint можно либо вручную (растягивая или стягивая фото за точки, расположенные по углам и центрам сторон), либо при помощи специального диалога "Свойства", вызываемого из меню "Файл":

Свойства картинки в Paint

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

Уменьшение изображений сторонним софтом

Как говорится, по бедности, справиться с изменением размеров картинки можно и средствами Paint (можно и микроскопом гвозди забивать :)), однако, это довольно неудобный способ... Гораздо легче справиться с задачей, воспользовавшись сторонними программами.

Все их можно условно разделить на три типа:

  1. Комплексные менеджеры изображений. Данная категория программ представляет собой нечто вроде файлового менеджера для фотографий. Эти приложения позволяют просматривать, сортировать и управлять огромными базами картинок в любых графических форматах. Среди прочих возможностей в них обычно имеются и функции быстрого изменения размеров для выбранных изображений (в том числе и в пакетном режиме). Примерами таких комплексных решений являются бесплатные программы FastStone Image Viewer или XNViewer.
  2. Программы для пакетной обработки графических файлов. Это могут быть отдельные приложения или модули менеджеров изображений, которые позволяют изменять размеры не одной картинки, а одновременно целой их группы по заданным Вами правилам. Одним из наиболее удачных решений такого рода (которым я пользуюсь и сам) является модуль FastStone Image Viewer под названием FastStone Photo Resizer, который может также работать как отдельная программа.
  3. Программы для тонкой оптимизации изображений. Это уже специализированная ниша для тех, кому важна экономия размера картинок вплоть до нескольких килобайт. Например, если Вы веб-разработчик, то Вам важно, чтобы графические файлы "весили" как можно меньше для скорейшей их загрузки у посетителя сайта. Из всех бесплатных программ под Windows мне известна только одна, которая имеет графический пользовательский интерфейс и позволяет оптимизировать изображения разных форматов – RIOT (Radical Image Optimization Tool).

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

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

Изменение линейных размеров изображений – дело довольно нехитрое и простое. Несколько же труднее все обстоит с их оптимизацией. О ней и поговорим далее...

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

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

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

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

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

  1. JPG (или JPEG). Этот формат лучше всего подходит для хранения полноцветных изображений, таких как, например, цифровые фотографии. Сжатие информации в нем достигается в основном за счет добавления к исходной картинке цифровых шумов – случайного набора разноцветных пикселей, которые "скрадывают" часть полутонов оригинальных изображений.

Уменьшение размера JPG-картинки

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

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

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

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

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

Сравнение GIF и PNG-файлов

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

Уменьшение размеров картинок в разных форматах

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

Максимально оптимизировать JPEG-файлы можно при помощи утилиты Jpegtran. Чтобы начать его использование нужно запустить Командную строку (Пуск – строка Выполнить – команда CMD – Enter), перейти в папку с программой (проще всего распаковать ее в корень одного из дисков) и выполнить команду: "jpegtran.exe /?" чтобы получить справку по всем возможностям утилиты:

Справка по командам Jpegtran

Как видим, синтаксис команды для обработки файла у нас следующий:

jpegtran.exe -ряд -команд имя_исходного_JPEG_файла имя_обработанной картинки

Допустим, нам нужно оптимизировать изображение с именем 1.jpg, которое находится в той же папке, что и наша программа (то есть на диске Е). Команда для этого будет следующая:

jpegtran.exe -copy none (не копируем МЕТА-данные) -optimize (оптимизируем код изображения без потерь) -verbose (выводим результаты вычислений на экран) 1.jpg (указываем имя обрабатываемого файла) 3(opt).jpg (задаем имя оптимизированной картинки)

Жмем Enter и получаем примерно такую картину:

Jpegtran в действии

Готовая картинка уменьшилась на 1 килобайт, но и это для веба бывает весьма полезно :)

Аналогичным способом работают утилиты для уменьшения размеров GIF-анимации, вроде Gifsicle, и PNG-файлов, типа Optipng (входит в комплект RIOT) или Pngcrush.

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

К сожалению на русском толковых сервисов практически нет, поэтому приходится довольствоваться зарубежными на английском. Одним из лучших для обработки JPEG-файлов, на мой взгляд, является http://jpeg-optimizer.com/:

jpeg-optimizer.com

Данный сервис позволяет не только оптимизировать JPEG-картинки за счет понижения их качества, но и умеет уменьшать их размер. Для этого нужно отметить галочкой опцию "Resize Photo" и указать новое значение ширины изображения в пикселях.

Для оптимизации же PNG можно рекомендовать красивый и бесплатный сервис https://tinypng.com/:

tinypng.com

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

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

Выводы

Честно скажу что, начиная писать статью, не думал, что придется описывать столько нюансов и нюансиков :) Проблема усугубилась тем, что пришлось уложить в объем одной статьи довольно много теоретического и практического материала, которого бы хватило на небольшую (а, может, и большую :)) книгу. Поэтому прошу заранее извинения, если где-то что-то слишком скомкано объяснил. Если Вас заинтересуют какие-нибудь уточнения, обязательно спрашивайте в комментариях – будем разбираться :)

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

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

P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.



Получать обновления:







Комментарии

Geyan 2016-08-11 00:07:45
А как на php узнать размер img ? к примеру надо вывести изображение в таком виде : <img src="<?php echo $post["img_url"]?>" alt="$alt" width="$width" height="$height"> как это сделать ?

Ответить
Руслан Тертышный 2016-08-11 08:44:35
Geyan, самый простой способ - использовать функцию getimagesize (пример):
<?php
$img = '1.jpg'; //Путь к изображению
$props = getimagesize($img); //Считывание массива данных о картинке
echo $props[0].' - ширина</br>';
echo $props[1].' - высота</br>';
echo $props[2].' - константа типа изображения (в данном случае 2 - это JPG)</br>';
echo $props[3].' - атрибуты размеров для img</br>';
?>

В Вашем случае (с учётом вышеизложенной конструкции) можно сделать так:
<img src="<?php echo $img;?>" alt="Что-нибудь" <?php echo $props[3];?> />

Ответить
Geyan 2016-08-11 09:01:36
Руслан спасибо , я уже проверил и действительно так и есть , у вас есть раздел на сайте на тему php ?

Ответить

Страницы: [1]

Оставить комментарий


1 Все комментарии проверяются. Спам и некультурные высказывания будут удалены.
2 Задавать вопросы лучше на нашем форуме. Просто зарегистрируйтесь и создайте новую тему.

captcha
Обновить
Идёт загрузка...
* Поля, обязательные для заполнения

Наша рассылка:


Полезный совет:


  
Мы в Google+

Система проверки ошибок от Mistakes.ru