Уменьшаем вес фотографии без потери качества. Как уменьшить (изменить) размер фотографии на компьютере или телефоне Уменьшить изображение до 1 мб

Предлагаю рассмотреть, что это за звери - форматы фотографий JPG и RAW, на что они влияют и когда на них стоит обращать внимание. Что такое размер фото и вес файла, как они измерятся и от чего зависят.

Почти все фото камеры могут сохранять фотографии в формате JPG (даже камеры телефонов и планшетов). Во всех зеркальных и без зеркальных камерах, а так же в продвинутых компактах в дополнение к JPG есть, как минимум, RAW и RAW+, и иногда TIFF.

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

1 | Что такое пиксель:


Размер объектов измеряется в метрах, размер фотографии - в пикселях (px).

Если измерить размер этой вазочки с ягодами, то это буде где-то 10 сантиметров в высоту и этак сантиметров 13 в ширину... примерно. То есть мы привыкли измерять предметы сантиметрами (метрами, километрами и так далее). Если же говорить о фото этой же вазочки, то изначальный размер фотографии - 7360 пикселей (px) в ширину на 4912 пикселей (px) в высоту. Это максимальный размер фото, на который способна моя камера Nikon. Для размещения этого фото на сайте, размер фото уменьшен до 1200px на 798px (зачем, расскажу чуть позже).

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


Увеличенный в тысячу раз фрагмент фото - видны квадратики пикселей.

2 | Можно ли пиксели перевести в сантиметры:

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

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

Например, это фото с тропическими цветами Франжиспани, можно напечатать размером 61 см на 32 см.


Размер фотографии в пикселях и сантиметрах в программе Photoshop

Чтобы узнать размер фото в пикселях и сантиметрах в программе Photoshop, нужно нажать комбинацию клавиш Alt+Ctrl+I или зайти в меню Image (Изображение) Image size (Размер изображения).

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

Теперь попробуем "растянуть" фото на всю страницу:


Растянутая картинка выглядит мутной и нечёткой

Как видите, детализация уже не та, так как часть пикселей (а вместе с ними и деталей) отсутствует.

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

3 | Какой размер фотографии (сколько пикселей) оптимален:

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

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

Размер фотографий измеряется в пикселях (px). От количества пикселей зависит размер фото на экранах мониторов, и какого размера можно напечатать фотографию.

4 | Размер файла или "вес фотографии":

Теперь разберёмся с "весом фотографии". Так уж исторически сложилось, что в этом вопросе много путаницы и размер файла довольно часто называют "весом фотографии", что скорее удобно, чем правильно. Размер файлов измеряется мегабайтами (МВ) или килобайтами (КВ). И тут стоит помнить, что в отличии от килограммов, где 1 кг = 1000гр, 1 мегабайт = 1024 килобайт.

Как это выглядит на практике: представим ситуацию, что в вашем фотоаппарате есть карта памяти на которой написано 64GB (гигабайта) . Если посмотреть, сколько же там именно этим байтов (на компьютере правой кнопкой мыши выбрать "свойства"), то окажется, что на этой карте памяти 63567953920 байт и это равно 59,2 GB. От того, насколько большие файлы создаёт ваша камера, зависит, как много фото поместится на этой карте памяти. Например, у меня помещается 830 файлов с фото в формате RAW (о форматах читайте ниже).

От чего завит размер файла:

  • Во-первых, от размера фото (того, что пикселями измеряется): файл с первой фотографией ягодок (размер фото 7360x4912 px) - это 5.2 MB, а она же, уменьшенная до 150 рх будет "весить" 75,7 КВ (в 69 раза меньше).
  • Во-вторых, от формата (JPG, TIFF, RAW), о чём читайте ниже.
  • В-третьих, размер файла (или "вес фото") зависит от количества деталей: чем их больше, тем "тяжелее" фотография (что наиболее релевантно для JPG формата).

Много деталей - больше вес фотографии

Например, вот в этой фотографии с обезьянами со Шри-Ланки множество мелких чётких (говоря языком фотографов, "резких") деталей и размер файла с этой фотографией - 19.7MB, что существенно больше чем ягодки в вазочке на белом фоне (5.2MB).

Если вы спросите, какого размера фото я могу напечатать с фотографии, которая весит 2МБ. Никто вам не сможет ответить, пока не узнает количество пикселей. А лучше, конечно, ещё и взглянуть на фото, так как некоторые умельцы любят доставать фото из глубин интернета, увеличивать количество пикселей программно, а потом хотеть напечатать её на обложке журнала. Получается как на примере выше с растянутой фотографией вазочки шириной 150 px.

Размер файла (часто называют "вес фотографий) измеряется в мегабайтах (МВ) или килобайтах (КВ) и зависит от формата, размера в пикселях и детализайии фотографии.

5 | Форматы фото:

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

Практически все фото камеры могут сохранять фотографии в формате JPG (даже камеры телефонов и планшетов). Это самый распространённый формат изображений и его "понимают" все компьютеры и программы для просмотра изображений. В формате JPG фото можно загружать в соц сети, выкладывать в блоге, добавлять в файлы Word, Power Point и так далее. JPG можно обрабатывать в Фотошопе, Лайтруме и других программах для редактирования изображений.

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

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


При сохранении файла в формате jpg выбирается степень сжатия (пример из программы Photoshop).

Во всех зеркальных и без зеркальных камерах, а так же в продвинутых компактах в дополнение к JPG есть как минимум RAW, и часто ещё и TIFF.

Немного теории:

  • TIFF (англ. Tagged Image File Format) — формат хранения растровых графических изображений (в том числе фотографий). TIFF стал популярным форматом для хранения изображений с большой глубиной цвета. Он используется в полиграфии, широко поддерживается графическими приложениями.
  • RAW (англ. raw — cырой, необработанный) — формат цифровой фотографии, содержащий необработанные данные, полученные с фотоматрицы (та штука, что в цифровых камерах заменила плёнку).

Лично я никогда не фотографирую в формат TIFF. Не могу даже придумать, зачем мне это нужно, если есть RAW. TIFF без сжатия я могу использовать для сохранения фото, которые ещё планирую доработать в программе Photoshop.

6 | Преимущества и недостатки формата RAW:

У меня в камере почти всегда стоит RAW формат, так как я собираюсь обрабатывать (редактировать) фото в Лайтруме или Фотошопе. У RAW есть ряд существенных недостатков:

  • Нет возможности просмотра файлов без предварительной конвертации. То есть для просмотра фото в формате RAW вам нужна специальная программа, поддерживающая этот формат изображений.
  • Больший объём файлов, чем при сохранении в JPEG (с моё камеры Nikon D800 размер файла с фото в формате RAW - это 74-77 МБ). Это означает, что меньше фотографий поместится на флешке.
  • RAW невозможно загрузить в соц сети, блог, и иногда даже отправить по почте. Вначале RAW нужно конвертировать в RAW конвертере (например, Adobe Camera Raw), который поддерживает тип файла с вашей модели камеры.

Почему же профессиональные фотографы часто предпочитаю RAW, а не JPG? Потому что RAW:

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

Итак, если вы планируете тщательнейшим образом обрабатывать снимки в Фотошопе или Лайтруме, тонко чувствуя "артефакты" и полутона, "пересветы" и "провалы" в тенях, то снимайте в RAW. Только помните, что для получения хорошего результата, вам понадобится разобраться с настройками и работой RAW конвертеров. Подумайте, нужно ли вам эта головная боль? Может стоит снимать в JPG и уделить больше времени отдыху, а не компьютеру?

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

Уменьшаем снимок в редакторе Paint

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


Подтвердите действие и сохраните изменения в файле.

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


Уменьшаем фотографию в фотошопе

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

Фотошоп справляется с задачей уменьшения файлов JPG тремя способами:

  • Снижение разрешения . До определенного предела картинка не потеряет в качестве. Уменьшая разрешение, вы фактически уменьшаете количество точек файла, чем делаете его легче.
  • Снижение качества . Этот способ заключается в сжатии JPG. Качественные фото всегда весят много, а некачественные даже при большом размере - мало.
  • Комбинирование двух предыдущих способов . Это лучший и оптимальный почти во всех случаях метод, потому что фотографию можно уменьшить, но и качество при этом тоже не потерять.
Для уменьшения JPG файла проделайте следующие шаги.



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

Уменьшение JPG файла дляWeb

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


Уменьшаем фотографию в ACDSee

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

Как изменить размер одного снимка:



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




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

Уменьшаем фото онлайн

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


Видео-инструкция: как уменьшить фото двумя способами

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


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

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

Изменяем размер фото в пикселях

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

Встроенный Picture Manager

Приложение Picture Manager входит в состав пакета Office до версии 2013 года. Оно позволяет работать с фотографиями любого формата, в том числе и jpeg и легко запускается даже на слабых компьютерах.

Чтобы открыть нужный рисунок в Picture Manager, нажмите на него правой клавишей мыши, наведите курсор на «Открыть с помощью» и в выпадающем списке выберите нужную программу. После этого откроется ее главное окно.

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

В самом низу окошка показано, каким теперь будет размер изображения. Если он вас устраивает, нажмите «Ок». После этого пройдите по пути «Файл ― Сохранить».

Многофункциональный фотошоп

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

Чтобы открыть нужное фото в Фотошопе, нажмите на «Файл» и выберите соответствующий пункт в выпадающем меню. После кликните на «Изображение» ― «Размер изображения».

В поле «Подогнать под» можно выбрать формат из списка стандартных. Напротив ширины и высоты следует ввести требуемые параметры. Галочка возле поля «Ресамплинг» необходима, чтобы программа автоматически сохраняла пропорции. Если она поставлена, вам достаточно просто ввести ширину, а высота рассчитается автоматически. Или наоборот.

Когда закончите, нажмите на «Ок» и сохраните изменения через меню «Файл».

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

Простой Paint

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

После кликните по вкладке «Главная» и выберите в разделе «Изображение» пункт «Изменить размер».

Здесь всё работает аналогичным образом. Вам следует выбрать единицы измерения ― пиксели или проценты, и ввести их значения в соответствующие поля. Галочка «Сохранить пропорции» убережет вашу картинку от изменения соотношения сторон.

Сервис Photo Resizer

Чтобы изменить размер изображения в режиме онлайн, перейдите по ссылке https://photo-resizer.ru/. Кликните в выделенную область и загрузите на сайт свое изображение.

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

Как изменить вес изображения в мегабайтах, не меняя размеров сторон и качества

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

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

Для загрузки файла в File Optimizer необходимо нажать на кнопку File ― Add Files. В открывшемся окне вы можете выбрать одну или несколько картинок. После этого кликните на Optimize ― Optimize All files и немного подождите, пока процесс не завершится.

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

JPEG Optimizer — компактная программа, предназначенная для телефонов. Полностью бесплатна, но в ней есть небольшая, ненавязчивая реклама. Помогает сжать изображения 10 Мб до 2 или даже 1 Мб без потери качества.

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

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

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

Привет, друзья!

Это очередной материал по работе с изображениями.

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

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

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

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

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

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

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

Вариантов на самом деле огромное количество. Чтобы не томить мы приступаем к практике.

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

Теперь для любителей текстовых инструкций.

Изменение размера в Paint

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

Открываем изображение в Paint и на вкладке "Главная" имеется пункт "Изменить размер".

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

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

На это изменение размера изображения в Paint закончили.

Кстати, изменение параметров ширины и высоты также влияет на вес изображения. Поэтому, берите это на заметку.

Теперь рассмотрим вариант с помощью Photoshop.

Изменение размера в Photoshop

Открываем в программе наше изображение и двигаемся в пункт "Изображение - Размер изображения".


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


После нажатия на кнопку "Ок" параметры размера будут применены и можно сохранить файл.

Данных способов вполне достаточно для изменения размеров высоты и ширины изображений.

Теперь мы рассмотрим 2 способа, как можно уменьшить вес изображений.

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

Уменьшения веса в Photoshop

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

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

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

  • Качество - высокое (60-70). Значение регулируете под свои нужды;
  • Формат - jpeg. Если на изображении нужно сохранить прозрачные области, то нужен формат png;
  • Также ставим настройку "Прогрессивный".

Также можете менять размеры прямо в этом окне, а не отдельно через пункт "Изображение - размер изображения", как я это показал в пункте ранее. Это очень удобно.

После настройки параметров сохраняете настройки (см. скриншот выше).

Только этим способом мне удалось снизить вес картинки с 116 кб до 75 кб, не изменяя при этом размеров (высота и ширина остались прежними).

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

Теперь рассмотрим, как уменьшить вес при помощь онлайн сервиса.

Онлайн сервис для оптимизации

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

Сервис имеет название krakin.io . Переходим на него. Я дал ссылку уже сразу на страницу выбора изображения.

На данной странице нужно сначала определиться со степенью сжатия изображения. За это отвечают 2 параметра:

  • Lossy - сильное сжатие (стоит по-умолчанию);
  • Lossless - меньшее сжатие.

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

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

Видно, что оригинальный размер файла был 77 кб, а после оптимизации он стал 59 кб. Также показывает сколько было сжато в килобайтах (18 кб) и в процентном отношении (23.8%).

Чтобы сохранить сжатое изображение, необходимо нажать на кнопку "Download this file" в последней колонке "Status". Нас перекинет на новую вкладку, где откроется итоговое изображение, чтобы мы могли его оценить. Для сохранения нужно нажать правую кнопку мыши на изображении и выбрать пункт "Сохранить картинку как".

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

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

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

С уважением, Константин Хмелев!

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

Оптимизацию изображений можно рассматривать в 2 аспектах:

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

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


Введение: Для чего уменьшать вес изображений на сайте

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

Статистические исследования показывают, что посетители ждут загрузки сайта порядка 3 секунд на стационарных компьютерах и 5 — на телефоне!

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

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

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

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

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

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

Для уменьшения веса изображения:
  1. Определите размер изображения, которое будет отображаться на сайте.
    Не загружайте исходные картинки сразу. Если на сайте выводится изображение с размерами 500*600 пикселей, а загружается картинка в 3 раза большего размера, время загрузки будет такое же, как для исходной.
  2. Уменьшите размеры.


к содержанию


1. Как уменьшить размер изображения в Paint

Начну с Paint , потому что это программа входит в стандартный набор ОС Windows и не требует установки дополнительных графических редакторов.

1. Открываем картинку в Paint и на верхней панели кликаем «Изменить размер» .

2. В открывшемся окне вводим необходимые размеры (можно изменять в процентах, можно в пикселях. По умолчанию в Paint стоит галочка «Сохранять пропорции» , это позволит уменьшить изображение без искажений), жмем «ОК» .


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


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

исходное изображение с размерами 2184*1456 пк и весом 735 Кб после уменьшения до 750*500 пк стало весить 142 Кб — вес уменьшился в 5 раз!

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

2. Как уменьшить размер изображения в P hotoshop

1. Открываем файл в редакторе, в верхней панели выбираем вкладку Image (Изображение) - Image Size (Размер изображения) .

2. В открывшемся окне можно менять параметр ы ширины (Width ) , высоты ( Height ) и разрешения ( Resolution ) . Причем, для сохранения пропорций должен быть отмечен флажок Сохранять пропорции ( Constrain Proportions ) , в этом случае при изменении одного из параметров, другие меняются автоматически.
Для публикаций графики в вебе разрешени е составляет 72пк/дюйм .


Вводим необходимые параметры и жмем «ОК ».

3. Сохраняем изображение.

Для сохранения изображения есть три варианта:

  • Сохранить (Save (Ctrl+S ) );
  • Сохранить как (Save As (Shift+Crtl+S ) );
  • Сохранить для веб (Save for Web (Shift+Ctrl+Alt+S ) ).

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

При выборе Сохранения для Веб в открывшемся окне можно задать параметры:

  • Формат (как говорили выше, jpeg );
  • Качество (Quality ) - этот параметр изменяется от 0 до 100, соответственно при этом итоговое изображение будет лучшего или худшего качества.
    В окне
    слева от параметров на вкладках вы можете выбрать варианты отображения: Оригинал, Оптимизированное, 2 вари анта (одновременно отображается сохраняемое и итоговое изображение), 4 Варианта (отображаются оригинальное изображение, изображение с параметрами, которое вы задали, и 2 промежуточных).

    Я обычно выбираю 2 Варианта (

    2-Up ) — меняя качество можно одновременно видеть изменения в изображении и подобрать оптимальное для конкретного случая. Для статьи меня устроило качество 50, но это не постоянная величина, чаще я сохраняю изображения в пределах 60-75.

    Снизу под отображаемыми вариантами выводятся данные итогового изображения в зависимости от заданных настроек

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

После выбора необходимых настроек жмем «Сохранить» (Save ) и получаем оптимизированную для сайта картинку.

Анализируем результаты оптимизации изображения в Фотошопе:

исходное изображение все то же 2184*1456 пк , 735 Кб , после уменьшения до 750*500 пк : при обычном сохранении 1 59 Кб — вес больше, чем при уменьшении в Paint, Сохранение для Веб (при качестве 50) - 63,7 Кб . Сжатое изображение в есит 11.5 раз меньше. Не забываем, что ко всем прочим плюсам джипег еще и прогрессивный.

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

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

3. Онлайн-сервисы по оптимизации изображений

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

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

2 . Kraken

Форматы.jpg, .png, .gif. Предоставляет 3 варианта оптимизации:

  1. Сжатие с потерями Lossy - выбрано по умолчанию ;
  2. Сжатие без потерь - Lossless ;
  3. Expert - с выбором параметров оптимизации .

Загружаем файлы, которые надо оптимизировать.

По завершению оптимизации сервис выдает отчет о результатах. Для нагрузки файла жмем на кнопку «Do w nload File » - уменьшенная картинка открывается в соседней вкладке.

Если результат устраивает, сохраняем изображение (клик на фото правой кнопкой мыши — Сохранить как )

Простой интерфейс, результат оптимизации можно посмотреть сразу же. Работает только с форматом jpeg.

Сервис сжатия изображений в JPG, PNG и GIF- форматах. Имеет ограничени е по весу в 500 Кб и количеству 20 одновременно.

4. Уменьшение размера с помощью плагинов сжатия изображений

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

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

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

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

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