Как сделать изображение 150 150px
Как изменить размер фото или картинки в Microsoft Office Picture Manager
Самый доступный способ получить заданный размер изображения.
Изменение изображения без искажения пропорций.
Предлагаю рассмотреть простой способ, как изменить размер фото или картинки в Microsoft Office Picture Manager.
Мне нравится работать с Фотошопом, но у некоторых он не установлен. В комментариях многие писали, что они пользуются Microsoft Office Picture Manager. Я решила провести сравнительный анализ и посмотреть, насколько это удобно, и попробовать изменить размер фото или картинки в этом редакторе.
Если Вы используете на своем компьютере операционную систему Windows, то у Вас наверняка установлен Microsoft Office, а он имеет Средства Microsoft Office с графическим редактором Microsoft Office Picture Manager.
Клацни по следующей картинке, чтобы ее увеличить.
Для начала нужно поместить фото или картинку в папку «Мои рисунки». Открыть Microsoft Office Picture Manager и выбрать нужное фото. В редакторе анонсировано, что можно изменить размер изображения и сжать его по объему.
Давайте разберемся со всем по порядку.
Можно изменить размер пропорционально, указав определенный процент (меняется масштаб изображения). Из большего можно сделать меньшее и наоборот.
Для этого выбираем последовательно пункты меню «Рисунок» — «Изменить размер» и указываем численно процент для пропорционального изменения изображения в большую или меньшую сторону, а затем сохраняем измененный рисунок методом «Сохранить как» (можно с новым названием).
А как изменить размер изображения и получить картинку совершенно определенного размера?
Допустим, я скачала из интернета фото размером 767*515px, а мне нужно получить размер: ширина=170рх, высота=150 px(пикселей). И желательно провести изменение изображения без искажения пропорций.
1.Задать высоту.
Для этого выбираю пункт меню «Рисунок» и далее «Изменить размер». Устанавливаю нужную высоту численно, как показано ниже (клацни, можно увеличить!):
Получаю картинку размером 223*150 px
2.Обрезать ширину.
Далее выбираю пункт меню «Обрезать». Теперь можно обрезать ширину. Ее легко подогнать, передвигая границы обрезки, или указав численные значения того, на сколько нужно обрезать.
Получается картинка нужного размера (170*150)
Можно делать и наоборот: задать ширину и обрезать высоту.
Вы получаете изображение нужного размера без искажения пропорций того, что там изображено.
А вот со сжатием в этом редакторе все обстоит не так просто. Microsoft Office Picture Manager действительно предлагает сжать изображение. Но делать это лучше всего сразу после загрузки еще не измененной картинки большого размера потому, что параметры изображения после сжатия предлагаются совершенно конкретные:
для веб – размер 448*336 px;
для сообщений электронной почты – размер 160*160 px.
Конечно, если Вы используете у себя на сайте картинки указанных размеров, то тут все проще простого: открыл картинку в Microsoft Office Picture Manager, выбрал пункт меню сжать для веб или для почты, и за один клик получил сжатую картинку, указанных выше размеров.
А что? Можно приспособиться к таким размерам и быстро получать то, что надо!
Но если Вам нужна сжатая картинка другого размера, то тут все обстоит несколько иначе.
Я провела для себя такой эксперимент с тем же исходным фото:
1 В первом случае сначала сжала исходную картинку для веб (пропорции при этой операции слегка искажаются) и получила фото размером 448*336px, а потом подогнала нужный размер (170*150), указанным выше способом;
2 Во втором случае сразу подогнала конкретный размер изображения, без сжатия.
В результате я получила две примерно одинаковые картинки, как по размеру, так и по объему в кБ.
Причем потом, когда я подвергла полученные фото сжатию в Фотошопе, то объем изображения уменьшился в несколько раз.
Вывод: изменить размер фото или картинки с помощью Microsoft Office Picture Manager можно и делать это удобно, но Фотошоп дает лучшие параметры сжатия изображения.!
Как изменить размер изображения в сантиметрах.
Как перевести пиксели в миллиметры или наоборот?
1 пиксель равен примерно 0,26 миллиметра.
Для более точного пересчета можно воспользоваться специальным преобразователем величин измерения длины. Один из таких конвентеров я нашла здесь.
Посмотрите online сервисы.
Операции по изменению размера, веса и фона изображения можно легко выполнить в сети интернет с помощью online сервисов.
Советую обязательно о них узнать. Пригодится!
Как сделать изображения адаптивными с помощью CSS
Большинство сегодняшних сайтов адаптивны. А если в нём нужно центрировать и выровнять изображение, необходимо научиться делать изображения плавными или адаптивными с помощью CSS.
Пару недель назад я опубликовал обучающее видео, в котором объяснил, как сделать адаптивный веб-сайт. В видео мы сделали изображение адаптивным. В этом посте я хотел бы рассказать об этом подробнее.
Также вы узнаете некоторые общие проблемы, которые могут возникнуть при попытке сделать изображения адаптивными. Я постараюсь объяснить, как их решить.
Сделать изображение гибким или отзывчивым на самом деле довольно просто. Когда вы загружаете изображение на веб-сайт, оно имеет ширину и высоту по умолчанию. Вы можете изменить их с помощью CSS.
Чтобы изображение было отзывчивым, нужно присвоить новое значение его свойству width. Тогда высота изображения автоматически изменится.
Важно знать, что вы всегда должны использовать относительные единицы для свойства ширины, такие как процент, а не абсолютные единицы, такие как пиксели.
Например, если вы определите фиксированную ширину 500 пикселей, ваше изображение не будет отзывчивым, потому что единица измерения абсолютная.
Вот почему вам следует вместо этого назначить относительную единицу, например 50%. Такой подход сделает ваши изображения плавными, и они смогут изменять свой размер независимо от размера экрана.
Один из вопросов, который мне задают чаще всего, — следует ли использовать медиа-запросы.
Медиа-запрос — еще одна важная функция CSS, которая помогает сделать веб-сайт адаптивным. Я не буду вдаваться в подробности, но вы можете прочитать другой мой пост позже, чтобы узнать, как использовать медиа-запросы более подробно.
Ответ на этот вопрос: «это зависит от обстоятельств». Если хотите, чтобы изображение имело разные размеры от одного устройства к другому, нужно будет использовать медиа-запросы. В противном случае вы этого не сделаете.
Теперь для этого примера ваше изображение имеет ширину 50% для любого экрана. Но если вы хотите сделать его полноразмерным для мобильных устройств, понадобится помощь медиа-запросов:
Таким образом, в соответствии с правилом медиа-запроса любое устройство размером менее 480 пикселей будет занимать всю ширину экрана.
Другой способ, которым разработчики могут создавать адаптивные изображения, — это свойство max-width. Однако это не всегда лучший метод, поскольку он может работать не для всех размеров экрана и устройств.
Прежде чем перейти к примеру, необходимо понять, что именно делает свойство max-width.
Свойство max-width устанавливает максимальную ширину для элемента, которая не позволяет ширине этого элемента быть больше, чем его значение max-width (но может быть меньше).
Например, если изображение имеет ширину по умолчанию 500 пикселей, а размер вашего экрана всего 360 пикселей, вы не сможете увидеть полное изображение, потому что недостаточно места:
Поэтому вы можете определить свойство max-width для изображения и установить его на 100%, что сжимает изображение с 500 до 360 пикселей. Таким образом, вы сможете увидеть полное изображение на экране меньшего размера.
Хорошо то, что, поскольку вы используете относительные единицы, изображение будет плавным на любом устройстве размером менее 500 пикселей.
К сожалению, размер экрана будет несколько больше 500 пикселей, но изображение не изменится, поскольку его ширина по умолчанию составляет 500 пикселей. Такой подход нарушит отзывчивость изображения.
Чтобы исправить это, вам нужно снова использовать свойство width, что делает бесполезным свойство max-width.
Другая распространенная проблема, с которой вы можете столкнуться, связана со свойством высоты. Обычно высота изображения автоматически изменяется, поэтому вам не нужно назначать свойство высоты вашим изображениям (потому что это как бы ломает изображение).
Но в некоторых случаях вам, возможно, придется работать с изображениями, которые должны иметь фиксированную высоту. Поэтому, когда вы назначаете фиксированную высоту изображения, оно все равно будет отзывчивым, но не будет хорошо выглядеть.
Как сделать идеальное изображение для социальных медиа?
Вы знаете все о размещении картинок в социальных сетях и как никто умеете заинтересовать подписчиков классным визуальным контентом? А в курсе ли вы, какие размеры и пропорции должны быть у изображения, чтобы оно идеально вписалось в вашу ленту новостей?
Если вы ответили «нет», то наш пост для вас!
При выборе картинок для публикаций нужно учитывать так много факторов, что часто о размере иллюстраций думают в последнюю очередь. А ведь высота, ширина и ориентация картинки очень сильно влияют на ее внешний вид.
Мы подобрали для вас несколько практических рекомендаций по размещению изображений, актуальных для всех известных социальных сервисов.
Идеальный размер изображений для социальных медиа
Размер изображений — довольно объемная тема, но постараемся не вдаваться в излишние подробности и перечислим только самое главное.
Как вы уже могли догадаться, для фотографии профиля, обложки страницы, рекламы на Facebook или записей в Twitter нужны изображения разных форматов.
Большинство ведущих социальных медиа, например, Вконтакте, Facebook или Twitter, позволяют управлять отображением картинки профиля и обложки страницы — вы можете менять размер и двигать фотографию до тех пор, пока она не встанет, как вам надо.
Например, процесс настройки обложки страницы на Facebook выглядит следующим образом:
Но как сделать так, чтобы изображение в хронике или новостной ленте выглядело максимально эффектно?
С целью изучения влияния изображений на степень вовлеченности аудитории — количество ретвитов, кликов и так далее, сервисом Buffer было обнаружено, что твиты с картинками получают на 150% больше ретвитов, чем обычные текстовые посты.
Экспериментируя с размерами картинок, которые гарантированно хорошо будут работать в социальных медиа, были найдены два универсальных размера изображений: 1024 x 512 пикселей для альбомной (горизонтальной) ориентации и 800 x 1200 пикселей — для портретных (вертикальных) фотографий.
Квадратные картинки с разрешением 1200 x 1200 пискселей лучше всего подходят для новостной ленты в Facebook и LinkedIn, альбомные с разрешением 1200 x 627 пикселей также отлично впишутся в посты Facebook или Twitter, а портретные изображения с разрешением 736 x 1128 пикселей можно удачно использовать в Pinterest и Google+.
А вообще, для обмена изображениями в соцсетях выделяют следующие идеальные размеры (в пикселях):
Рассмотрим подробнее, почему это так.
Оптимальные размеры изображений для Facebook
От ориентации изображения зависит его итоговый размер в Facebook.
Если вы прикрепляете к посту квадратную картинку, ее ширина в Facebook составит 470 пикселей — максимально возможный размер изображения в новостной ленте. Даже если его изначальная длина и ширина — 800 x 800 пикселей, оно все равно отобразится на фейсбуке с разрешением 470 x 470 пикселей:
Если вы загрузите изображение альбомного формата, фейсбук сожмет его до 470 пикселей по ширине, а высота изменится пропорционально:
Картинки с шириной меньше 470 пикселей показываются в фактическом размере — выровненные по левому краю с белым полем справа.
Если вы загрузите изображение портретного формата, Facebook уменьшит его до 394 пикселей по высоте и выровняет картинку по левому краю — справа также останется белое поле, а ширина изменится пропорционально высоте.
Например, если вы загрузите картинку 500 на 700 пикселей, фейсбук изменит ее размеры до 281 х 394 пикселей:
Таким образом, изображение, прикрепленное к посту на фейсбук, может отобразиться несколькими способами: все зависит от размеров картинки (ширины и высоты в пикселях) и ее ориентации.
А что насчет ссылок?
Изображения предварительного просмотра при «расшаривании» ссылок подгоняются до 470 х 246 пикселей:
Картинку для иллюстрации ссылки Facebook берет из Open Graph разметки страницы, а конкретно — из тэга «og:image», где прописывается URL сопутствующего ссылке изображения для соцсетей.
Тэг «og:image» можно либо вставить вручную в раздел на каждой странице лендинга, либо воспользоваться плагином вроде Yoast SEO для WordPress, который автоматически обрабатывает код и вставляет его в нужное место.
Когда вы создаете картинку для вставки в тэг «og:image», помните — большое изображение будет автоматически обрезано сверху и снизу и уменьшено до 470 x 246 пикселей:
Если тэг «og:image» страницы, ссылкой на которую вы делитесь, прописан не совсем корректно или картинка по ссылке в тэге слишком маленькая, фейсбук не отобразит ее в полную ширину: миниатюра изображения будет помещена в маленькую рамочку слева от текста.
Миниатюры таких картинок — квадратных, альбомной или портретной ориентации — будут сжаты и обрезаны до квадрата 158 x 158 пикселей:
В отдельных случаях длинные изображения (вроде инфографики) сжимаются до 158 пикселей по ширине и 237 пикселей по высоте:
Самый подходящий размер картинок для постов и «расшаривания» ссылок в Facebook — это 1024 х 512 пикселей. Такие изображения не совсем соответствуют описанным выше параметрам, но они хорошо выглядят на Retina-дисплеях (с высокой плотностью пикселей) и неплохо вписываются в полноразмерные области в ленте новостей.
(И как вы увидите ниже, этот формат изображений также идеально подходит для постов в Twitter).
Оптимальные размеры изображений для Twitter
На десктопных экранах картинки в ленте твиттера отображаются с размерами 506 пикселей по ширине и 253 пикселя по высоте, что соответствует пропорциям 2:1 (это значит, что каждым двум пикселям ширины соответствует 1 пиксель высоты).
Если вы прикрепляете к твиту изображение с размерами 800 х 400 или 1000 х 500 пикселей — или любого другого размера, соответствующего параметрам 2:1 — то ваше изображение отобразится в хронике полностью.
Вот пример изображения с расширением 1024 x 512 пикселей (соотношение 2 к 1), подогнанного до размера 506 x 253 пикселей в хронике твиттера.
(Обратите внимание: если вы загрузите изображение, которое по размеру меньше 506 пикселей по ширине, то справа останется белое поле).
Если разрешение картинки выходит за рамки соотношения 2 к 1, Twitter автоматически обрежет лишнее — полный вариант картинки можно будет увидеть только при клике на нее.
Технология Twitter умеет определять доминирующий визуальный элемент на изображениях, благодаря чему обрезает картинки «по-умному»: убирая лишние пиксели сверху и снизу, он оставляет нетронутой часть изображения с визуальным центром фотографии:
Если обнаружить доминирующий элемент не получается, твиттер оставляет середину изображения:
Размеры изображений для Twitter Cards
Twitter Cards — инструмент для создания расширенных постов в Twitter. Изображения используются во всех девяти типах Twitter Cards, мы же разберем подробнее два вида, которые лучше всего подходят для распространения контента в соцсетях: Summary card (стандартная карточка) и Summary card with large image (карточка с акцентом на изображении).
Summary Card включают заголовок, описание, ссылку и фотографию при публикации ссылки на лендинг, содержащий соответствующие коды. Информация берется из HTML-тэгов, часто — тех же, что используются фейсбуком для отображения ссылок.
(Очень часто плагины для автоматической вставки кода для Facebook на сайт также поддерживают и Twitter Cards).
Любой тип карточек содержит соответствующие изображения-миниатюры:
1. Изображения для обычных карточек (Summary Cards) должны быть с разрешением не менее 120х120 пискелей и весить меньше 1MB. Для расширенного твита и его страницы-описания картинка будет обрезана до соотношения 4:3 и уменьшена до 109×82 пикселей. Для использования во встроенных твитах изображение также будет обрезано и уменьшено до разрешения 120 на 120 пикселей.
2. Изображения для карточек с акцентом на изображении (Summary Cards with large images) должны быть как минимум 280 пикселей по ширине 150 пикселей по высоте, сама же картинка также обязана весить меньше 1MB.
Все изображения для карточек с большими картинками по ширине составляют 506 пикселей. Это касается изображений как альбомной, так и портретной ориентации: ширина в любом случае составит 506 пикселей, а высота — сколько получится (минимума или максимума здесь нет). Квадратные картинки отображаются с разрешением 506 х 506 пикселей, соответственно.
Любое изображение меньше 506 пикселей по ширине будет выравнено по левому краю, справа останется белое поле:
Интересно отметить, как Twitter Cards кадрирует картинки. Для основных видов карточек изображения обрезаются следующим образом:
Если вам интересно, как ваши картинки будут выглядеть в Twitter Cards, вставьте ссылку в бесплатный валидатор карточек твиттера (Twitter’s free card validator) — откроется окно предпросмотра.
Идеальные размеры изображений для постов в LinkedIn
Когда вы делитесь ссылками и статьями в LinkedIn, изображения-миниатюры отображаются с разрешением 180 пикселей по ширине и 110 пикселей по высоте:
Если вы загружаете картинку напрямую, ее максимальная ширина в ленте составит 350 пикселей, по высоте же изображение будет изменено пропорционально ширине, несмотря на ориентацию картинки. К примеру, изображение с расширением 700 х 500 пикселей будет уменьшено до 350 на 250 пикселей:
Исключением из этого правила является LinkedIn Showcase Pages — инструмент, позволяющий компаниям создавать страницы для ответвлений бренда (например, Adobe создал отдельные страницы для Adobe Creative Cloud, Adobe Marketing Cloud и т. д.)
На таких страницах миниатюры и специальные изображения для ссылок отображаются либо в стандартном размере 180 х 110, либо в чуть большем — 442 х 248 пискселей:
LinkedIn использует ту же разметку Open Graph, что и Facebook или другие соцсети. Если вы правильно оптимизируете свой лендинг для фейсбука, то и в LinkedIn ссылки на него тоже будут выглядеть хорошо.
Дополнительный способ делиться контентом в LinkedIn — публиковать статьи через LinkedIn Pulse: сервис создал серьезную платформу для публикации контента, которая позволяет добавлять картинки-миниатюры к статьям. Понравившийся контент появляется на страницах пользователей и в ленте LinkedIn Pulse.
В ленте домашней страницы изображение при обновлении Pulse отображается с размером 180 х 110 пикселей — как и для всех картинок в ссылках. Если же ссылка появляется в списке рекомендованных, размеры миниатюры составят 70 х 37 пикселей:
На странице Pulse список публикаций находится в левой колонке. Миниатюры изображений здесь квадратные — со стороной 70 пикселей. Миниатюра в верхней части статьи отображается с шириной 698 пикселей и высотой 400 пикселей.
(Обрезка таких изображений происходит с боков, поэтому на итоговой картинке будет отображаться центр изображения).
Идеальные изображения для постов в Google+
Когда вы делитесь ссылками и статьями в Google+, прикрепленные фотографии отображаются с шириной максимум в 426 пикселей — высота меняется пропорционально:
Как и другие социальные сервисы, упомянутые выше, Google+ выбирает картинки при помощи разметки Open Graph. Если же изображение, прописанное в мета-тэгах, меньше 426 пикселей по ширине или ссылка на него не существует, Google+ может вставить квадратную миниатюру со стороной 150 пикселей слева от новости.
Если вы загружаете картинку напрямую в Google+, она тоже отобразится с шириной не больше 426 пикселей. При клике на URL новости изображение откроется с расширением не более 506 пикселей по ширине:
Если ваша картинка меньше 346 пикселей по ширине, Google+ размещает ее по центру, оставляя белые поля по бокам.
Google+ также может показывать фотографии шириной в две колонки новостного потока — такие изображения загружаются с шириной 886 пикселей, а высота меняется автоматически:
Идеальный размер изображений для Pinterest
Pinterest включает несколько специальных мест, где появляются опубликованные изображения, или «пины» (от англ. a pin — булавка).
На «доске» Pinterest ширина каждого изображения — 235 рх, высота изменяется пропорционально:
При клике на изображение оно увеличивается до 736 пикселей по ширине, а высота подгоняется соответственно:
Кроме этих двух мест, пины можно обнаружить на обложках «досок» пользователей и в рекламных блоках сбоку, где отображаются рекомендованные и похожие пины.
По официальному заявлению Pinterest, лучшее соотношение сторон для изображений в этой сети — что-то среднее между 2:3 и 1:3,5, причем по ширине картинка должна быть не меньше 600рх.
Если вы не знаете, что такое соотношение сторон — это то, как ширина и высота картинки соотносятся друг с другом. Например, у картинки с соотношением сторон 2 к 3 может быть, к примеру, следующее расширение: 600 пикселей по ширине на 900 пикселей по высоте, 800 пикселей по ширине на 1200 пикселей по высоте и так далее.
У изображения с соотношением сторон 1 к 3,5 разрешение может быть таким: 600 пикселей по ширине на 2100 пикселей по высоте, 800 пикселей по ширине на 2800 пикселей по высоте и т. д.
Пины с соотношением сторон более, чем 1:3,5, обрезаются снизу и отображаются в новостной ленте с возможностью полного просмотра при нажатии на кнопку «Развернуть пин» в нижней части картинки:
Идеальные размеры изображений для Instagram
До недавнего времени все фотографии в инстаграме были квадратными с разрешением 1080 х 1080 пикселей. Но с августа 2015 года алгоритм сервиса обновился: теперь помимо квадратных, пользователи могут загружать также портретные и альбомные изображения.
Ширина всех фотографий в ленте новостей Instagram составляет 600 пикселей, а на мобильных устройствах изображения открываются по ширине экрана. Квадратные картинки показываются в ленте с разрешением 600х600 пикселей:
При загрузке фотографии в Instagram теперь можно выбрать ее ориентацию: по умолчанию по-прежнему установлен квадратный формат, но при нажатии на кнопку со стрелками в левом нижнем углу изображения или при «растягивании» картинки пальцами, она отобразится в почти нужном вам виде.
«Почти» — потому что если изображение выходит за рамки установленных Instagram пропорций, оно будет обрезано. Диапазон подходящих для инстаграма соотношений сторон достаточно велик: от 1,91:1 до 4:5.
В профилях пользователей и в области поиска картинки все так же показываются в виде сетки квадратов, но ширина стороны увеличилась с 161 до 291 пикселей. Для отображения прямоугольных фоток берется середина изображения: обрезка происходит с боков, если картинка альбомной ориентации, и сверху и снизу — если портретной:
Идеальные размеры изображений для Вконтакте и «Одноклассников»
Лучший размер изображения для баннера Вконтакте — 700 на 500 пикселей, а максимальный размер — 1000 х 700 пикселей. Картинки других размеров загрузятся с потерей качества, но с сохранением пропорций:
С июля 2015 в ОК можно загружать изображения с расширением до 1680 х 1680 без потери качества:
Лучший размер для публикаций в Одноклассниках теперь — 1680 x 1260 пикселей. В ленте такие картинки отображаются с максимально возможным разрешением — 548 x 411, а при клике на изображение оно открывается в разрешении 780 х 585 пискселей:
Таким образом, максимальная высота картинки портретного формата в ленте составляет 411 пикселей, а ширина подгоняется соответственно. Максимальная ширина картинки альбомного формата — 548 пикселей, а высота изменяется пропорционально.
Надеемся, что это руководство по размерам изображений в основных социальных сетях будет вам полезно. Следите за изменениями в настройках вместе с нами.
Высоких вам конверсий!
Прочитать статью целиком
Ваш e-mail адрес на 100% защищен от спама
Если вы уже являетесь подписчиком блога LPgenerator,
просто введите ваш email