Руководство по настройке и редактированию изображений Blogger

Хотя опытные блогеры советуют для собственного блога, платформу WordPress Платформа Blogger от Google также является отличным выбором для огромного количества блогеров. Люди часто жалуются на ограниченную гибкость, доступность на платформе Blogger. И это утверждение частично верно. Существует множество скрытых функций Blogger, о которых обычный пользователь не знает.

И одна из таких мощных и чрезвычайно гибких функций - это настройка изображения, используемые в сообщениях блога. Здесь речь идет о различных видах оптимизаций и эффектов, которые мы можем применить к загруженным изображениям. К счастью, изображения, загруженные на платформу Blogger, размещаются внутри Google App Engine.

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

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

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

Изменение размера изображения и обрезка

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

https://1.bp.blogspot.com/xxxxxxxx/xxxxxxxx/xxxxxxxx/s320/baby.png

Здесь значение s320 - это то, где происходит вся магия. В вашем случае числовое значение может быть больше или меньше. Нам просто нужно манипулировать этой частью URL, чтобы настроить изображения. Давайте начнем!

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

s000 (изображение 000 пикселей по наибольшему размеру) - например, если вы используете число с s параметром s350, вы получите изображение с размером 350 пикселей.

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

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

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

Обратите внимание, как несколько параметров объединяются с помощью дефиса.

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

n (обрезать изображение из центра) - этот cпараметр похож на параметр выше, только с одним отличием. Вместо обрезки сверху этот параметр обрезает изображение (например w500 - h150 - n) из центра.

p (умная квадратная обрезка) - этот параметр пытается обрезать важную часть изображения, начиная с центра. Соотношение сторон не сохраняется. Примером является w500 - h150 - p.

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

pa (сохранить соотношение сторон изображения) - этот параметр интеллектуального кадрирования (например w500-h150-pa) аналогичен pпараметру. Разница лишь в том, что он сохраняет соотношение сторон. Естественно, параметр высоты имеет преимущество и в этом случае.

pf (интеллектуальное кадрирование с распознаванием лиц) - оно также пытается интеллектуальное кадрирование с распознаванием лиц. Соотношение сторон не сохраняется, и кадрирование начинается с центра. Пример есть w500-h150-pf.

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

Область вне обрезанной части возвращается как прозрачный фон. Примером того же является w500-h150-cc.

i (простая квадратная обрезка изображения) - этот параметр (например w700-h150-ci) возвращает идеально квадратное обрезанное изображение с наименьшим возможным размером около самых низких заданных параметров ширины или высоты.

lf (обрезка без лица) - после тщательного тестирования этот параметр (например w700-h150-lf) просто возвращает изображение с указанной высотой, сохраняя соотношение сторон - без изменений.

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

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

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

Разные эффекты, фильтры и правки

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

Перевернуть изображение - по вертикали - чтобы перевернуть изображение по вертикали, используйте fv опцию. Например, s0-fv перевернет изображение с исходными размерами - по вертикали.

Перевернуть изображение по горизонтали - для горизонтального переворота используйте fh опцию. Простой пример еще раз s0-fh.

Повернуть изображение - если вы хотите повернуть изображение, используйте r опцию. Доступны три угла поворота: 90, 180 и 270 градусов. Например, s0-r180 это по сути вертикальный переворот.

Получить формат JPG - используйте эту rjопцию, чтобы получить изображение в формате JPG. Например, изображение в формате PNG с параметрами s0 -rjдаст вам такое же изображение в формате JPG.

Получить формат PNG - для получения изображения в формате PNG используйте rp опцию.

Получить формат WebP - чтобы получить изображение в формате Google WebP, используйте rw опцию.

Извлечь формат GIF - чтобы преобразовать изображение в формат GIF, используйте rg параметр.

Применить параметры формата. Обычно изображения JPEG имеют 3 типа: базовый стандарт, оптимизированный базовый уровень и прогрессивный. Мы можем использовать эти типы через v опцию с номерами 0, 1, 2 и 3 Например, s0-v0 или s0-v1. Поскольку мы увеличиваем число до 2 и 3, снижение качества является существенным и не рекомендуется для использования веб-сайтом.

Получить MP4 из анимированного GIF - если вы хотите встроить анимированный GIF в виде видеофайла MP4, используйте rh опцию. Вот пример.

Ширина может быть изменена в соответствии с вашими требованиями. Как вы могли заметить, мы использовали <video> тег HTML5 вместо обычного <img> тега.

Убить анимацию GIF - и если вы хотите убить анимацию изображения GIF и хотите статическую версию, используйте kопцию. Например, s0-k возвращает статическую форму анимированного GIF-изображения.

Задать пользовательскую рамку. Обычно для применения настраиваемой рамки или рамки вокруг изображения мы используем правила CSS. Но что, если мы можем сделать это без использования какого-либо кода CSS?

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

Второй параметр cиспользуется для указания цвета границы в шестнадцатеричном формате. В приведенном выше примере используются s320-b10-c0xffeeeeee параметры. Здесь толщина границы составляет 10 пикселей, а цвет - в формате 0xAARRGGBB.

Сжатие изображения JPEG - если вы заботитесь о скорости сайта , не рекомендуется предлагать посетителям объемные изображения. Сжатие изображения может уменьшить размер файла, что в свою очередь, уменьшает общий размер веб-страницы.

Доступен параметр сжатия изображения, l который уменьшает размер файла, но в то же время влияет на качество изображения. Пример того же - s0-rj-l85 сжатие файла на 15 процентов.

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

Для этого используйте e параметр. Например, s0-e30 будет кэшировать изображение в течение 30 дней.

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

Используйте fSoften параметр, который принимает 3 числовых параметра, чтобы добавить эффект размытия. Для примера изображения, показанного выше, я использовал fSoften=1,5,0 для добавления желаемого эффекта размытия. Здесь среднее число можно изменить от 0 до 100, чтобы настроить и отрегулировать интенсивность эффекта размытия.

Добавьте градиент и тень границы - и теперь появляется эффект градиента в сочетании с пользовательским цветом тени границы. Да, вы тоже можете это сделать!

Используйте fVignette опцию, чтобы добавить оба этих эффекта к изображению. Для демонстрационного изображения я использовал fVignette=1,100,1.5,0,aaaaaa добавление градиента и тени границы.

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

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

Cancel