Уменьшение размера фото в мегабайтах без потери качества — актуальный вопрос для всех владельцев сайтов, желающих оптимизировать свои веб-сайты. Чаще всего, именно фото занимают значительную часть веса сайта. И речь идет не только о сайтах Joomla. Одно большое фото может весить чем один небольшой сайт (без картинок).
Кроме того, что фотографии занимают много места, как на физических так и на веб-серверах, большой вес фото влияет на скорость загрузки сайта. Чем больше изображений на странице, тем медленнее сайт будет загружаться. Чем больше вес каждой из картинок в МБ, тем больше времени потребуется странице для загрузки.
Не всегда уместно уменьшать количество картинок на странице. Но всегда уместно уменьшить их вес. Даже если фото на странице — всего одно. Таковы требования Google к сайтам.
Чем более оптимальным будет вес фотографий на сайте, тем меньше придется ждать вашим пользователям, что положительно влияет на SEO. Скорость загрузки сайта — один из важнейших SEO-показателей.
Ниже мы разберем оптимизацию веса фото по шагам, с примерами. Именно в такой последовательности необходимо оптимизировать фотографии.
Шаг 1. Изменение разрешения фото
Наиболее очевидная мера по уменьшению веса фото — это изменение разрешения. Если для вашего сайта достаточно разрешения, к примеру — 1000 х 1300 px не нужно использовать фото большего размера, скажем 3000 х 3900.
Если вы получили оригинал фото в высоком разрешении, или скачали фотографию с какого-то фото-стока, применять на сайте картинку в оригинальном размере — это плохая практика, и Google вряд ли это оценит. Уменьшите разрешение фото до минимально необходимого.
Размер можно уменьшить пропорционально, и/или обрезав ненужные части, например пустые области по бокам. Ниже покажем как это делается в Adobe Photoshop (профессиональный графический редактор) и Paint (бесплатная стандартная программа Windows).
Изменение разрешения изображения в Photoshop с сохранением пропорций
Открываем изображение в Photoshop: Файл > Открыть.
1) Чтобы изменить размер, переходим в Изображение > Размер изображения... (Alt + Ctrl + i)
2) Указываем необходимые значения ширины или высоты, для изменения разрешения.
3) Звено соединяющее поля ширины и высоты означает пропорциональное изменение разрешения (т.е. при изменении высоты также изменится ширина, и наоборот).
После изменения параметров ширины и высоты нажимаем ОК внизу всплывающего окна. После чего можно сохранить файл.
1) Для сохранения выбираем Файл > Сохранить как...
2) Выбираем необходимый тип файла (например JPEG или PNG). И нажимаем на Сохранить (справа внизу).
Фото будет сохранено в указанное место (например на Рабочий стол). Также можно сразу задать свое имя файла.
Изменение разрешения изображения в Paint с сохранением пропорций
Стоит отметить, что, несмотря на очевидные преимущества Photoshop, сохраненные в Paint фотографии (JPG / PNG) обычно не уступают по качеству, хотя могут иметь больший вес. После уменьшения веса фото на 3-м шаге, фото сохраненные в Paint и Photoshop, становятся примерно одинаковыми по качеству и по весу. Таким образом, бесплатной программы Paint может быть достаточно в рамках простой задачи - изменения размера фото (с последующим уменьшением веса - шаг 3).
Откройте Paint через панель Пуск, или воспользуйтесь поиском, введя название программы. (Если не удается найти Paint через Пуск или поиск, введите в проводнике путь C:\Windows\System32\ и найдите файл с названием "mspaint.exe").
После запуска Paint, откройте фото для редактирования: Файл > Открыть, после чего выберите необходимое изображение.
1) Нажмите Изменить размер.
2) В открывшемся окне, вы можете выбрать проценты или пиксели как параметр изменения.
3) Поля для ввода необходимых параметров ширины и высоты фото.
4) Наличие галочки означает сохранение пропорций фото при изменении высоты или ширины.
После изменения параметров нажмите ОК. Для сохранения фото выберите Файл > Сохранить как. После чего вы можете выбрать формат сохранения (JPG, PNG и другие), а также место куда будет сохранена фотография и имя файла.
Обрезка фото в Photoshop (2 способа)
Способ 1: Изменение размера холста
Открываем изображение в Photoshop: Файл > Открыть.
1) Переходим в Изображение > Размер холста... (Alt + Ctrl + c).
2) В открывшемся окне настроек можно задать параметры ширины и высоты (фото обрежется согласно веденным параметрам)
3) Выбор единиц измерения фото (например пиксели или проценты)
4) Направления обрезки фото. Например, стрелка слева направо означает что область справа будет обрезана (или увеличена) при изменении параметра ширины.
После изменения параметров нажимаем ОК.
Отменить действие в Photoshop можно нажатием клавиш Ctrl + Z
Способ 2: Удаление выделенной области
Также обрезать картинку в Photoshop можно выделив определенную область курсором, и удалив ее. Данный способ может быть удобным в том случае, если при обрезке вы ориентируетесь на какой-то объект изображенный на фото.
После открытия изображения откройте окно управления слоями - нажатием клавиши F7.
Разблокируйте слой с изображением нажатием на иконку замка:
После разблокирования слоя, можно удалять любую область фотографии с помощью инструментов выделения, например "Прямоугольная область" (клавиша M):
Допустим, необходимо удалить горный массив справа на фотографии. Для этого выделяем область справа пунктирным прямоугольником, и нажимаем клавишу Delete:
В результате удаления выделенной области, на ее месте должен остаться пустой (прозрачный) фон.
Чтобы быстро избавиться от образовавшейся пустой области, выберите Изображение > Тримминг... В открывшемся меню, настройки остаются по умолчанию (на основе прозрачных пикселей), необходимо просто подтвердить нажатием ОК. "Тримминг" удалит прозрачную часть, оставив только заполненную область.
Сохраняется изображение через Файл > Сохранить как... (подробнее сохранение изображения описано выше).
Обрезка фото в Paint
В программе Paint фото можно обрезать просто потянув за границы:
Если удалили слишком много, отмените действие нажатием клавиш Ctrl + Z.
Фото сохраняется через кнопки Файл > Сохранить как.
При необходимости, вы можете комбинировать способы уменьшения разрешения фото, сначала обрезав изображение (удалив лишние области), затем изменив высоту или ширину картинки, с сохранением пропорций.
Шаг 2. Изменение формата фото
Обычно фотографии в формате JPG (JPEG) весят меньше чем в формате PNG или BMP. Поэтому Google считает формат JPG более оптимальным. Но JPG не всегда самый легкий, все зависит от вашего исходного файла изображения, и методов сохранения. Например, скриншот экрана компьютера сохраненный изначально как PNG при повторном сохранении может весить больше, даже если формат будет JPG. Необходимо смотреть на конечный результат. Вы можете сохранить фото в формате JPG и PNG, и сравнить какой из вариантов имеет меньший вес.
Если ваше изображение имеет прозрачный фон или другие прозрачные области, фото необходимо сохранять в формате PNG, чтобы прозрачность осталась.
Сохранение фото в формате JPG в Photoshop
1) Выбираем Файл > Сохранить как...
2) Выбираем тип файла JPEG (JPG).
Нажимаем Сохранить. Далее, редактор предложит параметры сохраняемого изображения.
Оставляем качество со значением 8, так как это оптимальный показатель, который снижает вес фото, но не ухудшает ощутимо детализацию фото. Жмем ОК.
Сохранение фото в формате PNG в Photoshop
Вы можете сохранить изображение аналогичным способом, описанным выше. Но вместо JPEG выбрать PNG. Т.е. Файл > Сохранить как, выбираем тип файла PNG, нажимаем Сохранить. Параметры сохраняемого фото в PNG будут выглядеть следующим образом:
Где можно выбрать размер файла от большого до маленького, и нажать ОК. Выбор самого маленького размера файла означает что сохраненный файл будет весить меньше всего, по сравнению с другими опциями. Однако сохранение в маленьком размере займет больше времени.
Альтернативным методом сохранения в PNG является Быстрый экспорт:
Открываем слои (F7), на слое изображения вызываем контекстное меню кликом правой кнопки мыши, и выбираем пункт "Быстрый экспорт в PNG". Никаких параметров сохранения предложено не будет, фото сразу сохранится. Этим методом можно пользоваться не боясь, с учетом того, что далее изображение будет сжато (Шаг 3).
Сохранение фото в формате JPEG/PNG в Paint
В программе Paint изображения сохраняется достаточно просто, через Файл > Сохранить как, после чего следует выбрать формат JPEG (JPG) или PNG.
По сравнению с Photoshop, Paint не имеет настроек качества изображения при сохранении.
Шаг 3. Уменьшение веса (Сжатие фото)
Вне зависимости от того сохранили вы фотографию в формате JPEG или PNG; использовали при этом Photoshop, Paint, или другую программу, всегда стоит прибегать к уменьшению веса фото. Ведь даже самое оптимизированное изображение можно уменьшить.
Для уменьшения веса воспользуемся онлайн-сервисом https://tinypng.com/. Вы можете просто перетянуть фото на страницу сервиса, чтобы моментально получить сжатую фотографию без потери качества.
Существует множество подобных онлайн-сервисов, вы можете найти их по соответствующим запросам в Google. https://tinypng.com/ действительно хорошо справляется с задачей сжатия картинок, и может уменьшить вес изображения в разы. Однако, всегда стоит проверять качество фото в результате такой обработки. Ограничение для каждой фотографии - 5 МБ (для бесплатного пользования).
Если у вас есть два варианта фото — в JPG и PNG, загрузите в tinypng оба варианта, и посмотрите что будет. Иногда, файл с большим размером на старте, выходит с меньшим весом в результате сжатия.
В процессе оптимизации фотографии, обязательно сохраняйте оригиналы. И следите чтобы качество изображения не получило сильно заметного ухудшения.
Также, незначительного уменьшения веса фото можно достичь удалив метаданные изображения. Удалить метаданные можно при экспорте в Photoshop (Файл > Экспортировать > Экспортировать как - откроется окно с настройками, где в области Метаданные должна стоять галочка Нет), или с помощью специальных программ, таких как Exif Pilot, Easy Exif Delete или Exif Tag Remover.
Первые 3 шага — это основные способы уменьшения веса фото. Вы можете воспользоваться любым из них, например только сжать фото (шаг 3). Но применяя все способы поэтапно, с первого по третий, вы получите наилучший результат.