Оптимизация изображений - один из важных моментов в общей оптимизации сайта, на который многие не обращают внимания. А между тем, этот момент оказывает существенное влияние как на поведение пользователей на ресурсе, так и на ранжирование сайта.
Оптимизацию изображений можно рассматривать в 2 аспектах:
- уменьшение веса изображений для увеличения скорости загрузки страницы;
- как составляющая SEO - о птимизации — в этом случае кроме уменьшения веса изображениям присваиваются подходящие названия и прописываются альт теги.
В сегодняшней статье я рассмотрю оптимизацию изображения для ускорения загрузки страницы — то есть, уменьшение веса изображений.
Введение: Для чего уменьшать вес изображений на сайте
Думаю, всем давно известно, что вес изображений влияет на скорость загрузки страницы.
Статистические исследования показывают, что посетители ждут загрузки сайта порядка 3 секунд на стационарных компьютерах и 5 — на телефоне!
Если время ожидания превышает эти числа, то посетители уходят, и тогда уже не важно, на сколько красивы ваши изображения, никто их все равно не увидит.
Каким должен быть вес изображений?
Для различных ресурсов выбор веса изображения — индивидуальный параметр, для интернет-магазин с большим ассортиментом товаров допустимый вес не более 50-70 Кб. Для сайтов — портфолио, в которых ставка делается именно на красивые, качественные изображения - больше. Старайтесь придерживаться максимально возможного уменьшения веса картинок, а если большие изображения необходимы вашему ресурсу, лучше дайте посетителям просмотреть их в полном размере в новой вкладке.
Оптимизация изображений позволяет уменьшить их вес в разы без ощутимой потери качества.
Вес изображения измеряется в килобайтах (Кб) или мегабайтах (Мб), зависит от размеров в пикселях (высоты и ширины), количества деталей и от формата изображения.
Самый распространенный графический формат изображений формат JPG . Он используется повсеместно, его «понимают» все компьютеры, просмотрщики и графические редакторы. В этом формате публикуются графические материалы на сайте. Он не поддерживает прозрачности и анимацию, но для этого используются другие форматы. И говорить я сегодня буду именно об изображениях в формате JPG .
Для уменьшения веса изображения:
- Определите размер изображения, которое будет отображаться на сайте.
Не загружайте исходные картинки сразу. Если на сайте выводится изображение с размерами 500*600 пикселей, а загружается картинка в 3 раза большего размера, время загрузки будет такое же, как для исходной. - Уменьшите размеры.
к содержанию
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 варианта оптимизации:
- Сжатие с потерями Lossy - выбрано по умолчанию ;
- Сжатие без потерь - Lossless ;
- Expert - с выбором параметров оптимизации .
Загружаем файлы, которые надо оптимизировать.
По завершению оптимизации сервис выдает отчет о результатах. Для нагрузки файла жмем на кнопку «Do w nload File » - уменьшенная картинка открывается в соседней вкладке.
Если результат устраивает, сохраняем изображение (клик на фото правой кнопкой мыши — Сохранить как )
Простой интерфейс, результат оптимизации можно посмотреть сразу же. Работает только с форматом jpeg.
Сервис сжатия изображений в JPG, PNG и GIF- форматах. Имеет ограничени е по весу в 500 Кб и количеству 20 одновременно.
4. Уменьшение размера с помощью плагинов сжатия изображений
Все вышеперечисленные методы актуальны, когда изображений на сайте не много. Если же ресурс содержит огромную базу изображений, то не обойтись без плагинов сжатия изображений. Существует множество хороших плагинов для различных CMS, и платных, и бесплатных, они используют разные алгоритмы сжатия и выдают разные результаты. Главное, подобрать подходящий для вашего ресурса.
- Плагины с предварительной генерацией миниатюр.
В настройках плагина указываются размеры миниатюр. При загрузке файла создаются миниатюры указанных размеров.
Преимущество данного способа в том, что при загрузке страницы количество изображений не влияет на время генерации страницы. Но при большом количестве файлов и миниатюр будет возрастать и занимаемое сайтом дисковое пространство. - Плагины с динамическим изменением размера миниатюр.
Изображение обрабатывается при генерации страницы, не занимает место на диске, но негативно сказывается на времени загрузки страницы. Не рекомендуется при выводе большого количества изображений.
Можно совмещать между собой различные плагины, получая максимально эффективный результат.
Надеюсь, среди указанных способов вы найдете оптимальный для вас. Не забывайте об уменьшении изображений на сайте - используйте свой контент эффективно.
А еще — задавайте вопросы, пишите в комментариях, оказалась ли статья полезной. Если да, ставьте лайки и делитесь с друзьями.
Удачи и хорошего настроения.
Желание в изменении размера фото появляется при неудачных кадрах (когда запечатлены ненужные и лишние детали), размещении аватарки (на личной странице в социальной сети, в форуме на сайте, в интернет-магазине), создании различных фото-портфолио и при других обстоятельствах. Для этого существуют специальные инструменты.
Изменить размер фото можно тремя способами, — с помощью стандартных программ операционной системы Windows, с помощью сторонних программ и в online режиме через интернет. Рассмотрим более подробно каждый способ.
Три простых способа изменить размер фотографии
Как изменить размер фото в paint
Во всех версиях Windows есть программа Paint. Запускаем ее и нажимаем в левом верхнем углу кнопку «меню». Выбираем пункт «Открыть» и находим фото, которое нужно отредактировать. Загружаем ее в рабочую зону. Далее, если надо ее обрезать, выбираем соответствующий пункт в верхней панели программы. С помощью курсора определяем зону фотографии, которую нужно оставить. Обрезаем и сохраняем полученный результат.
Второй вариант — выбираем функцию «Выделить». Выделяем нужную зону фотографии и нажимаем комбинацию клавиш Ctrl+X (вырезать). Далее открываем еще раз программу Paint. В ней рабочая зона пустая, наводим туда курсор и жмем комбинацию клавиш Ctrl+V. Фрагмент фото вставиться в новый документ Paint. Если белый фон рабочей зоны окажется больше вставленной фотографии, ее можно уменьшить с помощью того же курсора. Полученный результат успешно сохраняем.
Есть третий вариант — когда необходимо уменьшить фотографию до определенных пикселей. Выбираем пункт «изменить размер» в верхней части программы.
В Windows 7 есть программа Picture Manager. Она очень похожа на Paint. Запускаем ее и выбираем пункт «Файл» в верхнем левом углу. Нажимаем на «Найти рисунок». Находим фото. Далее выбираем пункт «Рисунок», там есть два варианта обработки — «Обрезать» и «Изменить размер». Пользоваться ими нужно также, как и с функциями программы Paint. Изменяем изображение и благополучно сохраняем его на компьютере.
Как изменить размера фото с помощью программ
Существует множество качественных программ от сторонних разработчиков. Особенно стоит выделить:
— Image Resizer,
— фоторедактор Movavi,
— Adobe Photoshop CC,
— PIXresizer,
— Fotosizer,
— BImage Studio и др.
Большинство из них бесплатные и находятся в свободном доступе в интернете. Процесс скачки и установки займет от 5 до 30 минут. В качестве примера рассмотрим программу Image Resizer.
Находим ее с помощью поисковой системы, скачиваем, устанавливаем на компьютер, запускаем. Открывается окно программы в котором нужно кликнуть на меню Добавить файлы. После чего выбрать нужную фотографию и перейти в раздел Настройка.
В настройках вводим нужный размер и кликаем Выполнить. Фотография с новыми размерами сохраняется на рабочий стол в специально созданную программой папку. Готово!
Скачать Image Resizer — https://light-image-resizer.ru.uptodown.com/windows
Как изменить размера фото через online сервисы
Так же как и сторонних программ, в интернете есть множество online сервисов, предлагающих обрезать фотографию или изменить ее размер с помощью ввода пикселей. Самыми популярными и часто используемыми из них являются:
— imgonline.com.ua,
— resizepiconline.com,
— croper.ru,
— resizenow.com,
— inettools.net,
— optimizilla.com.ru,
— reduction-image.com,
— pichold.ru.
Более подробно рассмотрим сервис imgonline.com.ua. Переходим на сайт и кликаем на вкладку Изменить размер.
Далее нажимаем кнопку «Выберите файл». Находим на компьютере фотографию, загружаем. Далее, вводим нужную ширину и высоту в пикселях. Выбираем тип изменения размера. Если надо, делаем дополнительные настройки, подбираем формат будущего изображения и жмем «Ок».
Откроется новая страница с информацией о фотографии. Есть два варианта, — либо открыть фотографию для просмотра (если что-то не понравиться, можно «Вернуться назад»), либо скачать ее. Готово! Фотография получила новые размеры.
В целом, использование перечисленных способов очень простое. Главное следовать подсказкам и вводить данные в нужные поля. На выходе получится всегда качественное изображение с нужными пиксельными параметрами.
Здравствуйте, мои читатели!
Изменение размера изображения – достаточно важная операция не только для того, кто создает и наполняет свои , но и для повседневного применения, начиная с социальных сетей и заканчивая чатами и форумами.
Существует большое количество программ, которые позволят вам изменить разрешение картинки. Но как сделать так, чтобы при таком редактировании фото не потеряло качество отображения?
Вот об этом я и хотел бы поговорить с вами сегодня. Если вам интересно, как изменить размер изображения без потери качества, тогда вы по адресу.
PAINT
В первую очередь хотелось бы поговорить о стандартном фоторедакторе Paint. Набор функций данной утилиты не большой, но основные возможности присущи.
Запускаем программу Пэйнт на своем ПК, во вкладке «Файл» выбираем пункт «Открыть». В появившемся окне находим желаемое изображение, указав к нему путь последовательным открытием нужных папок.
Навигация программы очень проста: возле пиктограммы «Выделить» вы и найдете необходимую нам функцию «Изменить размер», выберем же ее.
Перед нами появилось окно самого редактора изображения. Изменять размер мы можем в двух параметрах: проценты и пиксели. Выбираем пиксели и ставим галочку на «Сохранять пропорции», это даст возможность сберечь саму форму картинки, что не позволит снизить качество отображения. При сохранении пропорций, вам нужно ввести лишь один параметр (ширину или длину), а второй подберется автоматически. На самом деле достаточно просто, не правда ли?
После проделанных манипуляций, сохраняйте файл в удобном для вас формате.
Еще в Paint доступно ручное редактирование. Для этого вам нужно выделить все изображение (нажатие CTRL + A), после чего навести курсор на нижний правый угол картинки и перемещать его в верхний левый, размер будет меняться.
После того, как вы добились желаемого результата, кликните на невыделенной области левой кнопкой, а рабочее полотно программы подгоните под картинку. К сожалению, в ручном режиме сохранить пропорцию очень сложно.
Следует заметить, что с помощью Пэинт вы сможете как увеличить, так и уменьшить размер любой картинки.
Adobe PhotoShop
Если вы хотите овладеть всеми возможностями этой программы, то я рекомендую вам пройти курс «Фотошоп от А до Я в видеоформате ». Пройдя курс, вы сможете творить чудеса вместе с этим софтом даже если сейчас вы практически ничего не умеете.
Изменить размер и вес фотографии с помощью данного софта – считается универсальным методом. Несмотря на весь ассортимент возможностей, редактирование такого характера в PhotoShop осуществляется очень просто.
Для начала вам, собственно, нужно чтобы на вашем компьютере была установлена программа фотошоп. Если на ПК данный программный продукт уже установлен, кликните по фото правой кнопкой мыши и выберете вариант «Открыть с помощью», среди всего списка найдите PhotoShop и выберете его.
Или сначала запустите программу, а потом перейдите в меню «Файл» — «открыть».
На панели инструментов вы увидите раздел «Изображение», выберете его. В меню выберете «Размер...», после чего будет запущено средство редактирования изображения.
После этих манипуляций сохраните файлы в формате BMP. В таком случае разницы между оригиналом и сниженной копией не найти. Либо же, оставьте формат JPG, но при сохранении в блоке «Качество изображения», вместо цифры 8 ставьте 10, это позволит дать максимальное качество картинке.
Если же вы сохраняете картинку с целью дальнейшего ее размещения в интернете, например, на своем блоге, то лучше сохранить ее по-другому (чтобы она меньше весила). Смотрите на скриншоты ниже:
Помимо этих вариантов в Интернете есть еще сотни типов программного обеспечения, которые выполняют подобные функции. Также вы можете воспользоваться сервисами онлайн, они тоже отлично справляются со своими обязанностями, как правило, все имеют детальные инструкции.
С уважением! Абдуллин Руслан
Уменьшить размер и вес фото проще простого, и для этого не понадобятся никакие специальные онлайн сервисы. Если вам нужно уменьшить размер одной фотографии, то можно обойтись программой предустановленной в Windows. С уменьшением размера большого количества фото справиться бесплатная программа FastStone или можно воспользоваться Adobe Photoshop и Lightroom.
В каких случая может понадобиться уменьшить размер фото:
- фото предназначены для загрузки на сайт (например, для блога, статьи, фото-отчёта с поездки) и файлы нужно уменьшить до оптимального размера;
- необходимо отправить фото по почте (высокое качество фото не требуется);
- есть желание отправить фото на конкурс, где требуется предоставить файлы определённого размера.
- нужно загрузить фото на сайт, на котором ограничения по размеру фото (в пикселях - px) или весу файла (в мегабайтах - МБ);
1 | Способ уменьшить размер фото в Paint (предустановлен в Windows).
Программа Paint хорошо справиться с несколькими файлами, но уменьшать большое количество фото этим способом займёт много времени. Перед уменьшением размера файла обязательно создайте копию, так как Paint при сохранении перезапишет файл с новыми настройками, поверх оригинала.
Откройте фото в программе Paint (кликнув правой кнопкой мыши по фото и выбрав из списка нужную программу - Paint), в верхней панели нажмите на Resize (изменение размера). В открывшемся меню можно выбрать проценты или пиксели.
Уменьшение размера фото в программе Paint
2 | Способ уменьшить размер фото в программе Adobe Photoshop.
Чтобы изменить размер фото Фотошопе, нужно нажать комбинацию клавиш Alt+Ctrl+I или зайти в меню Image (Изображение) Image size (Размер изображения). Следите за наличием галочки в поле "сохранить пропорции". Если нужно уменьшить размер большому количеству фотографий, то стоит создать Action (Действие) и потом использовать его при помощи автоматической пакетной обработки (это тема для отдельной статьи и если вы не знаете, как это сделать, то читайте дальше - будет более простой способ уменьшить фото).
Уменьшение размера фото в программе Adobe Photoshop
В Фотошоп есть ещё инструмент - сохранения файлов для Web (подразумевается для сайтов в интернете), где в одном окне можно сразу изменить не только размер фото, но и степень и тип сжатия jpg, удалить метаданные и оценить результат (в том числе увидеть вес конечного файла). Чтобы открыть этот инструмент Photoshop, нужно нажать комбинацию клавиш Alt+Shift+Ctrl+I или зайти в меню File (Файл) Save for Web (Сохранить для Web).
3 | Способ уменьшить размер нескольких фото в программе Adobe Lightroom.
В программе Лайтрум можно не только быстро обрабатывать большое количество фотографий. В ней есть очень много полезных инструментов и уменьшение размера фото - лишь один из них.Чтобы изменить размер фото в Lightroom, нужно выделить файлы, нажать кнопку Export и настроить параметры в полях Image Sizing.
Уменьшение размера фото в программе Adobe Lightroom
4 | Способ уменьшить размер фото с помощью бесплатной программы.
Удобная бесплатная программа, которая умеет быстро уменьшать любое количество фото - FastStone Photo Resizer. Её можно скачать на сайте разработчика (faststone.org) и пользоваться совершенно бесплатно. Чтобы открыть меню для изменения размера фотографий, нужно поставить галочку "Use advanced options" и потом нажать на появившуюся кнопку "Advanced options".
Уменьшение размера фото в программе FastStone Photo Resizer
В этой программе можно вместе с изменением размера фото, добавить на фото надпись или логотип (водяной знак), изменить разрешение или количество цветов. Настроек много - если есть желание и время, то можно их все изучить.
Сохраните статью на память в Pinterest
Какой из перечисленных способов лучше использовать для уменьшения размера фото? Зависит от того, как часто и как много фото нужно уменьшать, нужно ли при этом их обрабатывать или оптимизировать для загрузки на сайт. Я предпочитаю использовать программу Adobe Lightroom и её богатый выбор инструментов для работы с фото.
Часто сталкиваюсь с ситуацией когда необходимо уменьшить вес фотографии для того что бы загрузить на одноклассники либо передать по интернету, или же послать на почтовый ящик. В этой заметке хочу поделится как легко и быстро уменьшить вес или размер фотографии для приемлемого уровня. Вам не нужно искать какие то сторонние программы или приложения все можно сделать из стандартного Windows XP.
Что такое ВЕС фотографии
Существуют такие понятия как размер фотографии и вес фотографии, с размером все понятно это количество точек по горизонтали на количество точек по вертикали допустим 3264 * 2448 еще их называют пикселями. Другое дело это вес, под весом понимают объем в мегабайтах. Допустим фотография сделанная на хороший цифровой фотоаппарат будет иметь вес 4.04 мегабайта. Естественно такой вес фотографии не всегда удобно переносить допустим на электронную почту ну или же есть желание уменьшить вес фотографии. Делается это очень просто из программы входящую в Windows называется она Paint.
Итак выбираем фотографию которой хотим уменьшить вес кликаем на нее один раз правой кнопкой мыши и выбираем открыть с помощью, далее выбираем PAINT нажимаем на левую кнопку мышки. Фотография должна отрыться в программе Paint смотрите ниже.
Теперь для уменьшения веса выбираем из верхнего меню Рисунок и Растянуть/Наклонить.
Откроется вот такое окошко.
Теперь в графе По горизонтали меняем значение со 100 процентов на допустим 50 если хотим уменьшить вес в половину, так и в графе По вертикали уменьшаем на 50 процентов. Нажимаем на ОК. Теперь нажимаем на Файл в верхнем меню выбираем Сохранить как и сохраняем фотографию. Все теперь вес уменьшен. Замечу что иногда достаточно вписать значение в 10 процентов что бы значительно уменьшить вес фотографии не теряя особенно в качестве фотографии.
