Оптимизация изображений - один из важных моментов в общей оптимизации сайта, на который многие не обращают внимания. А между тем, этот момент оказывает существенное влияние как на поведение пользователей на ресурсе, так и на ранжирование сайта.
Оптимизацию изображений можно рассматривать в 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, и платных, и бесплатных, они используют разные алгоритмы сжатия и выдают разные результаты. Главное, подобрать подходящий для вашего ресурса.
- Плагины с предварительной генерацией миниатюр.
В настройках плагина указываются размеры миниатюр. При загрузке файла создаются миниатюры указанных размеров.
Преимущество данного способа в том, что при загрузке страницы количество изображений не влияет на время генерации страницы. Но при большом количестве файлов и миниатюр будет возрастать и занимаемое сайтом дисковое пространство. - Плагины с динамическим изменением размера миниатюр.
Изображение обрабатывается при генерации страницы, не занимает место на диске, но негативно сказывается на времени загрузки страницы. Не рекомендуется при выводе большого количества изображений.
Можно совмещать между собой различные плагины, получая максимально эффективный результат.
Надеюсь, среди указанных способов вы найдете оптимальный для вас. Не забывайте об уменьшении изображений на сайте - используйте свой контент эффективно.
А еще — задавайте вопросы, пишите в комментариях, оказалась ли статья полезной. Если да, ставьте лайки и делитесь с друзьями.
Удачи и хорошего настроения.
Темы материала
Многие пользователи ПК неоднократно сталкивались с необходимостью уменьшить фото, например, для пересылки его по почте, размещения в социальных сетях, на сайте объявлений и т.д. В принципе существует множество программ, которые могут решить данную задачу, но не все умеют ими пользоваться.
На самом деле в этом нет ничего сложного, и сегодня мы подробно рассмотри процесс уменьшения фото в редакторе Adobe Photoshop и простейшей программе Paint, которая установлена всех компьютерах с операционной системой семейства Windows.
Размер файла JPG: определение
Размером файла может называться высота и ширина «картинки», которые измеряются пикселями. В тоже время размером файла может называться его «вес», то есть то, сколько места он занимает в памяти компьютера. Этот показатель уже измеряется при помощи Б,КБ и МБ.
Таким образом, получается, что изображения с одними и теми же параметрами по вертикали и горизонтали, могут иметь разный «вес». При желании вы можете уменьшить размер фото до нужного количества МБ или КБ, но при этом немного пострадает качество картинки.
Практические советы:
- Из-за того, что при проведении операции страдает «расширение» картинки, и она теряет в качестве, не злоупотребляйте уменьшением. То есть, если вы хотите разместить фото на сайте, то перед тем как начать его ужимать, обязательно узнайте максимально разрешенный размер, и далее подгоняйте картинку под эти параметры;
- Если же проблема в том, что вам необходимо переслать большое количество фото, то в данном случае лучше не уменьшать изображения, а просто заархивировать их;
- И еще один важный момент для новичков: работая в графическом редакторе впервые, вы легко можете ошибиться и сохранить фото с ненужными вам изменениями, например, уменьшив его до размеров спичечного коробка. Учтите, что в данном случае, если вы уже вышли из программы, то увеличить изображение до прежних параметров у вас уже не получится. Поэтому перед тем как начать работать со своими фото, лучше потренироваться на нейтральных картинках или сделать копию снимка в другой папке, и работать уже с ней.
Как уменьшить размер JPG-файла в программе Paint?
Этот редактор изображений хорош тем, что его не надо дополнительно устанавливать, да и пользоваться данной программой очень просто, так как ее применение не требует наличия практических навыков. Пошаговая инструкция:
- Откройте файл в паинте
Откройте папку, где у вас хранится нужный файл, наведите на него курсор и нажмите правую кнопку мыши. Спуститесь по открывшейся таблице до строки «открыть с помощью» и выберите из предложенных вариантов Paint.
- Если вы хотите изменить количество пикселей по длине и ширине изображения, следуйте инструкции:
Когда файл откроется в программе Paint, выберите действие «изменить размер» или нажмите одновременно клавиши Ctrl и W .
Вы увидите открытое окно и в нем уже можете выбрать нужную операцию и изменить размер изображения в процентах или в пикселях. Для этого вам нужно будет ввести в одно из окон новое значение. Программа всегда одновременно меняет размер по горизонтали и вертикали, поэтому здесь достаточно вписать только одну из цифр, вторую Paint заменит автоматически.
- Сохраните готовое изображение;
Когда вы произвели все нужные действия, ни в коем случае не забудьте их сохранить, нажав значок с изображением дискеты. Можно воспользоваться и горячими клавишами Ctrl и S . Нажимать их надо одновременно.
- Как только вы сохраните изображение, то программа сразу же покажет вам, сколько оно сейчас весит, то есть, какое количество места занимает на диске.
Уменьшаем размер файла в Adobe Photoshop
Adobe Photoshop – профессиональная программа для работы с изображениями, и, конечно же, возможностей у нее гораздо больше. Пошаговая инструкция:
- Зайдите в Adobe Photoshop.
- Не выходя из программы, откройте нужное вам изображение. Это можно сделать, перетащив мышкой нужную «иконку» в рабочее поле программы.
- В главном меню найдите раздел «Изображение». Когда вы нажмете на него, появится меню, в котором будет строка «размер изображения». Если у вас возникли сложности, можете проделать данную операцию, нажав одновременно клавиши Alt + Ctrl
- Перед вами откроется окно с параметрами изображения по ширине и высоте. Измените один из параметров, и второй поменяется автоматически, в зависимости от пропорций изображения. После этого нажмите клавишу «ок», чтобы сохранить изменения.
- Для того что бы сохранить уже новое изображение вам нужно выбрать в меню клавишу «Файл» и пункт «сохранить. Также вы можете сделать это с помощью клавиш, нажав одновременно Ctrl + S .
Интернет-сервисы по уменьшению файлов
Если вам достаточно сложно воспользоваться одним из описанных выше графических редакторов, то всегда можно уменьшить размер файла при помощи соответствующих сервисов в сети Интернет.
Для этого вам надо ввести в поисковую строку вашего браузера запрос «Уменьшить размер файла JPG онлайн». В итоге вам будет предложено множество ссылок на ресурсы, предлагающие данную услугу.
Выбрав одну из них, следуйте дальнейшим инструкциям. В основном работа таких сервисов выглядит следующим образом: вы заходите на сайт, загружаете в рабочее окно нужное изображение и далее указываете до какого размера необходимо снизить его расширение. После этого вы сохраняете уменьшенное фото в памяти своего компьютера.
Все! Файл уменьшен и изменения сохранены! Какие способы знаете Вы? Делитесь в комментариях!
Представим, что для вас стал актуальным вопрос о том, как изменить размер картинки без фотошопа ? Вы при этом в интернете, и вам необходимо обрезать фото или картинку для анкеты. Вы правильно поступите, если сидя у компьютера, или с планшетником, или со смартфоном в руках, зайдете на сайт.
Ведь на этом ресурсе можно воспользоваться приложением по обрезке фото онлайн. Обращаем внимание на то, что приложение поддерживает форматы gif, bmp, jpg, png. Оно находится в блоке «Работа с изображениями» под названием «Обрезка изображений».
И, выполняя здесь несложные операции, мы изменяем размер изображения . Ведь, как и все прочее в рамках сервиса, данное приложение очень просто в использовании. Оно предоставляет возможность получить качественный результат очень быстро.
Мы с его помощью изменяем размер фото . Мы обрезаем его. А для этого необходимо всего-то произвести загрузку нужного изображения, выбрать нужный для обрезки фрагмент и нажать клавишу «Вырезать», предварительно получив информацию о размерах будущей картинки. То есть процесс предусматривает процентное увеличение или уменьшение изображения. Всегда есть возможность посмотреть, как ты обрезал фото, а потом сохранить его.
Какие еще возможности предоставляет приложение
Когда мы изменяем размер фото онлайн, то это вовсе не означает, что весь процесс, который занимает считанные секунды, сводится к тому, чтобы просто обрезать картинку онлайн.
Тот, кто работает с изображением, может еще потратить дополнительно (но буквально считанные) секунды, чтобы при необходимости повернуть фото или отразить его зеркально. Но и этим все вовсе не ограничивается. Можно также добавить красивые эффекты или рамку. И всего-то требуется сделать несколько кликов.
Нет ничего удивительного в том, что пользователями сайта являются люди самых разных профессий, возраста и даже увлечений. Все потому, что некоторые предпочитают не искать нужное им приложение на разных интернет-ресурсах. А указанный онлайн-сервис тем и хорош для многих, что в нем сосредоточены самые разные, но часто используемые приложения.
И многие из числа тех, кто проводят массу времени в мировой паутине (в том числе и для того, чтобы изменить фото ), попадают на сайт вполне закономерно. Будь он дизайнер или вебмастер, журналист или автомобилист. Ведь сюда ведут многие ссылки в интернете, да и сервис всем доступен без регистрации.
Сервис к тому же бесплатный. Его можно использовать при подготовке фото и музыки для блогов и сайтов. Ко всему нет необходимости в загрузке файлов, установке и последующем обновлении программ.
Это положительно оценивает и тот, кто занимается профессионально фотографией, и тот, для кого проводить время с фотоаппаратом - просто большое увлечение. Ведь на сайте есть для них подходящее приложение. Например, для того, кто мучается вопросом, как изменить размер изображения ?
Зачем нужна такая функция
Причина, по которой тот или иной пользователь интернета вынужден искать для применения фоторедактор онлайн, может быть разной. Но, как показывает опыт, обычно это вызвано именно необходимостью быстро изменить размер фото .
И это обычно бывает так. Допустим, кому-то необходимо загрузить редактируемое изображение на сайт. К примеру, как аватарку «ВКонтакте». Как правило, на большинстве ресурсах в глобальной сети для изображений, которые заливают на сервис, предусмотрено ограничение по его габаритам. А это в конкретном случае означает, что необходимо изменить размер фото онлайн.
Без этого никак не обойтись. Однако ограничение предусмотрено не только для габаритов. Ограничение распространяется также и на вес изображения. То есть проблема требует такого решения, когда нужно уменьшить фото. А это очень просто сделать, используя фоторедактор онлайн.
А вот к функции «увеличить фото» прибегают тогда, когда необходимо увеличить размеры изображения. Также как и уменьшение фото, эта функция находит применение, когда кто-то очень часто обрабатывает изображение.
Для более детальной характеристики популярного сервиса следует упомянуть и про такую «фишку», как фотографии в стиле Instagram. То есть с данном случае сервис предоставляет возможность не только изменить размер , но и придать желаемый вид фотографиям. Причем мы говорим про те случаи, когда у вас при себе нет мобильного устройства и аккаунта в Инстаграм.
Уверяем, что на персональном компьютере заниматься обработкой фотографий намного удобней и приятней. Функция «фото в стиле Инстаграм» действует точно так же, как и обрезка фотографий онлайн. Это означает следующее: вам необходимо загрузить фотографию, наложить эффекты и потом сохранить на свой компьютер. Так, в частности, можно сделать эффект старой фотографии из обычного снимка.
Самым распространенным графическим форматом, с которым успешно работают все операционные системы, устройства и программы, является JPG. Он хорошо сжимает графические данные, поэтому файлы JPEG обычно имеют небольшой объем.
Но зачастую изображения, имеющие высокое качество и разрешение, занимают собой довольно ощутимый объем. А это препятствует нормальной передаче файла по электронной почте, и хранящиеся в большом количестве картинки с такими параметрами занимают много места на жестком диске.
Хорошим вариантом будет уменьшение объема, за счет сжатия этих файлов, при минимальной потери качества.
Когда по отношению к графике мы употребляем слово «размер», оно имеет два значения - габариты изображения по ширине и высоте (разрешение, оно измеряется в точках — пикселях) и объем (измеряется в килобайтах и мегабайтах). Поэтому мы имеем два способа уменьшить размер графического объекта:
Физический метод
Уменьшение габаритов самой картинки.
Предположим, у Вас есть изображение с размером 1024×768 (в пикселях). Это средняя картинка и ее можно обрезать с помощью встроенных в Windows сервисов или сторонних приложений.
Методика позволяет удалить не несущие важной информации участки картинки (обычно это фон), оставив только важную область. Высота и ширина изображения в пикселях становится меньше, например, 660×380, а качество сохраняется.
Сжатие файла
Сложный процесс уменьшения объема картинки, при котором есть вероятность потери качества изображения.
Механизм сжатия работает так - программа находит одинаковые или близкие по цветам участки и замещает их своеобразным эталоном. Например, изображение имеет область с 34 одинаковыми по цвету точками. При сжатии они заменяются на один большой «усредненный» пиксель. Из-за этого на фото появляются размытые и нечеткие области и прочие дефекты, называемые артефактами.
Если изображение имеет большое число схожих пикселей, то процесс сжатия будет максимальным (то есть объем фото в 4 Мб, например, сократится до 1.3 Мб). Но при этом качество самой картинки станет довольно низким. Если же одинаковых пикселей мало, то объем фото фактически не уменьшится, но зато и качество не пострадает.
Бесплатные онлайн-сервисы
Во всем Интернет можно найти большое количество ресурсов, сжимающих фото и картинки в формате JPEG в режиме онлайн. Но пользоваться нужно лишь несколькими, поскольку действительно качественно (с сохранением четкости рисунка) эту операцию выполняют лишь немногие. Среди них:
- tinyjpg.com
- compressjpeg.com/ru
- iloveimg.com/ru/compress-image/compress-jpg
Наиболее качественным и удобным для редактирования будет первый ресурс в списке. У него англоязычный интерфейс, но все интуитивно-понятно, поэтому сложностей не возникнет. Все, что нужно сделать, - нажать на кнопку загрузки вверху в центре и дождаться завершения процесса.
На этом сайте сжатие выполняется с сохранением качества изображения.
Сжатие с помощью программ
Безусловным лидером в области редактирования графики является Adobe Photoshop. Но для таких процедур, как сжатие картинок, можно использовать что-нибудь попроще и желательно бесплатное. Например, программа Caesium
. 
Она обычным образом устанавливается на компьютер и имеет понятный, дружелюбный интерфейс. Сам процесс установки от начала до конца сопровождается появлением окон с англоязычным содержимым. После запуска программа полностью переведена на русский язык.
Чтобы отредактировать файл, запустим это приложение и выполним следующие действия:
Приложение сохраняет пропорции картинок, поэтому дополнительных операций по редактированию делать не требуется.
Если нужно обработать всю папку с файлами, то делаем так:
Программа начнет обработку всех файлов в указанной папке.
На рисунке выше, красным цветом выделен показатель коэффициента сжатия для каждого файла. Желтым — начальный и конечный объем изображения.
После обработки всех изображений можно сделать .
Здравствуйте, на связи Владислав. И сегодня я Вам расскажу, как уменьшить размер файла JPG .
Для выполнения данной задачи — нам понадобится программа Paint версии 4.0.5. Вот ссылка на данную программу — .
Также ниже на этой странице есть видео, поэтому если не хотите читать, переходите сразу к просмотру видео.
Надеюсь эту программу Вы уже установили и мы переходим к следующему действию. Заранее я уже подготовил файл, его размер 305 kb. Именно с этим файлом я и буду работать:
В начале естественно открываем файл в программе Paint.
Посмотрите как это выглядит (на скриншоте ниже видно, что при качестве 75% — размер файла jpg 115.1 кб:
Хочу сказать, что при 75%, качество картинки сильно не меняется, а вот при дальнейшем движении ползунка в сторону уменьшения качества — изображение станет более «расплывчатым» хуже. Здесь уж Вы сами определите, что для поставленной задачи важнее — размер файла или качество фото.
Затем нажимаем — Ок и можно сравнивать исходный файл с полученным.
Как уменьшить файл JPG в Фотошопе
В фотошопе после открытия файла, нажимаем — Файл — Сохранить для Web и в открывшемся окошке, в правом верхнем углу, меняя значение — низкое качество или среднее, высокое качество получаем уменьшение размера файла jpg.
