Размер фото для сайта оптимальный – SEO фотки или какого размера фото ставить на сайт для адаптивности?!

Содержание

SEO фотки или какого размера фото ставить на сайт для адаптивности?!

Сергей СМОРОВОЗ

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

Да, для тех, кто всерьёз задумывается о таких «мелочах» как мобильный трафик на своих сайтах сегодня очень сильно усложнилась жизнь, многие из них даже и не подозревают, что ещё не всю боль они ощутили в полной мере. Ниже будет много букв, кому читать всё лень можете перейти сразу к выводам.

Мобильный контент

Чтобы до конца осознать полноту масштаба «трагедии» необходимо обратиться к такому непопулярному в среде маркетологов отчёту в Яндекс.Метрике как «Ориентация экрана». Строится этот отчёт только как вспомогательный к основным отчётам через «Группировки».

Так вот, если построить отчёт «Ориентация экрана» за последние 2-3 месяца на любом коммерческом сайте, то можно увидеть такую картину, где доля трафика portrait(портретная, вертикальная ориентация экрана) почти догнала долю landscape(ландшафтная, пейзажная, альбомная или горизонтальная ориентация экрана). Ниже, на графике №1 видно, что 36620 пользователей просмотрели сайт в горизонтальной ориентации экрана (landscape), а 33394 пользователя за этот же промежуток времени просмотрели сайт в вертикальной ориентации экрана (portrait).

Таблица №1: соотношение устройств с горизонтальной ориентацией экрана и вертикальной.

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

Таблица №2: ориентация экрана и устройства.

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

Совместная доля планшетов и мобильных телефонов в общей доле трафика по некоторым, наблюдаемым мною проектам коммерческой тематики весной 2016 года перевалила за 50% и продолжила рост, а по данным докладчиков конференции YaC/m 2016, проходившей в Москве 29 июня, рост пользователей, посещающих интернет через ПК замедлился, а то и вовсе остановился!

Что это значит?

Это значит, что сегодня просто иметь адаптивную вёрстку или мобильную версию сайта уже не достаточно, эту статью, конкретно в моём случае пользователи будут читать вместе с вами в двух типах ориентации экрана: вертикально и горизонтально, а пропорция этих пользователей будет примерно 50/50, так показывает Яндекс.Метрика по предыдущим публикациям. Ещё это значит, что восприятие информации с таблицы №1 и таблицы №2 будет разным. Не верите? Если вы сейчас читаете этот материал со стационарного компьютера, то посмотрите на эти таблицы с мобильника или планшета, а если вы сейчас читаете статью с мобильного устройства, то посмотрите как эти две таблицы будут вами восприняты со стационарного компьютера.

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

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

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

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

Если уж совсем шрифт на картинке получается гигантским, то можно уменьшить размер картинки, сохранив пропорции сторон, на мобильном устройстве пользователь не заметит ни какой разницы, а пользователь десктопа уже не будет испытывать дискомфорт от слишком больших букв и цифр таблицы, сравните сами как отображается Таблица №2.2 и Таблица №2.3.

Разницу заметят только владельцы десктопов и ноутбуков, Таблица №2.3 у них будет меньше, чем Таблица №2.2, а у владельцев мобильных устройств не будет ни какой разницы, т.е. мы избавляемся от гигантизма шрифтов в десктопной версии, получаем читаемый вариант в мобильной версии и бонусом выигрывает 6,2 Кб веса. Таблица №2.3 легче чем Таблица №2.2 на 6,2 Кб. И не нужно здесь смеяться, эпоха мобильного контента и оптимизация страниц сайта возвращает нас обратно в 90-е, когда пользователи сидели на dial-up линиях и скорость интернет соединений была очень маленькая. В сети полно статей про прямую зависимость веса загружаемых страниц, скорости загрузки страниц, конверсий, поведенческих факторов и SEO.

В итоге выиграет тот, у кого контент интересный и оптимизированный, во всех смыслах.

Выводы

Какие выводы из всего этого можно сделать?

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

Рекомендация №1

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

Изображение с контуром, отмеченным красной линией, меньше всего пригодны для комфортного отображения на мобильном устройстве. Изображения с оранжевым контуром — более, менее терпимы. Наилучший формат публикаций графических изображений отмечен зелёным контуром.

Почему самый высокий прямоугольник тоже помечен оранжевым? Всё просто, вертикальные «столбы» не слишком гармонично воспринимаются на экране с горизонтальной ориентацией, т.е. на ПК и ноутбуках.

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

Вот так это фото выглядит на экранах типовых устройств.

Либо квадрат, либо вертикальный прямоугольник малой высоты.

Рекомендация №2

Как для адаптивной вёрстки, так и для мобильной версии сайта необходимо оптимизировать изображения, максимально сокращать размеры их и вес до разумных пределов.

Наиболее оптимальный размер картинок для ваших публикаций имеет смыл вычислить по данным веб-аналитики вашего сайта. Для стационарных ПК можно взять за основу самое маленькое разрешение ноутбука из популярных в вашей веб-аналитике, допустим: 1024х768. Делаем поправку на меню браузера и элементы дизайна сайта, а это минус 15-20% получаем лимит по ширине ~ 800px, а по высотке ~ 600px, в этих рамках весь ваш визуальный контент и должен быть не выходя за него, меньше можно, больше не стоит, на ноутбуках с разрешением 1024х768 ваш графический контент не будет виден полностью.

Формат для ваших графических публикаций (Сохранить как для WEB) имеет смысл выбирать по следующим правилам:

1.1) GIF (16 цветов) лучше всего применять для анимации на сайте, но не стоит ими злоупотреблять анимированные гифки весят очень много.

1.2) JPEG лучше всего применять для публикаций фотографий, сохраняя файл с качеством (Qiality): 60-80, этого достаточно, чтобы отобразить фото без потери качества.

1.3) PNG лучше всего подходит для публикаций графиков и рисованных изображений, с этим форматом вам удастся добиться, и прозрачного фона при необходимости, и сравнительно небольшого веса файла.

Софт: PhotoShop, Lightroom, FastStone Image Viewer.

Рекомендация №3

Отсканируйте свой сайт на предмет наличия старых больших графических файлов (Xenu) и постарайтесь уменьшить вес файлов с помощью графических редакторов.

Сканер XENU позволяет получить очень много полезной информации о вашем сайте, но сейчас речь идёт именно о графическом контенте, точнее об оптимизации графического контента, особенно это актуально для страниц входа на ваш сайт, куда приходит больше всего внешнего трафика (особенно поискового), именно этим страницам необходимо уделить наибольшее внимание и по максимуму сократить время загрузки страницы.

Понятно, что десятки тысяч и сотни тысяч графических файлов сложно будет сжать в ручном режиме, проблемы могут возникнуть если эти фалы разбросаны по разным папкам на сайте, но в том случае, когда они все лежат в 1-2 папках, можно с помощью бесплатной программы FastStone Image Viewer процедуру сжатия проделать всего за 20-30 минут в автоматическом режиме, все подробности читайте здесь.

Удачного вам продвижения и успехов в вашем Бизнесе.

Москва, 16.07.2016.

Автор: Сергей Сморовоз, профессиональный фотограф, интернет-маркетолог.

yurymihalich.livejournal.com

Зачем уменьшать фотографии для сайтов


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


Максимальные размеры фотографии

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

Для отображения картинки пиксель в пиксель, ее разрешение должно быть меньше разрешения монитора компьютера. Сейчас большинство пользователей имеет мониторы с размерами экрана 17 или 19 дюймов, их разрешение составляет 1280×1024 точек. А стало быть 1280×1024 пикселей и есть тот максимальный размер фотографии, который может отображаться на мониторе компьютера у большинства пользователей, без потери качества.

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

Поэтому использовать такие большие картинки на сайте нужно в исключительных случаях, когда они того действительно заслуживают. Обычно размер лучших фотографий для сайта следует ограничить 800 пикселей по длинной стороне кадра, а остальных 600 пикселей по длинной стороне кадра.


Почему нужно уменьшать картинки для сайта

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

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

И так, если все ваши снимки действительно шедевры, и это вам сказал кто-нибудь посторонний и знающий, то уменьшайте их до размеров 800×600 пикселей. Если они нравятся не только вам, а хотя бы жене и лучшему другу, то уменьшайте их до 600×450 пикселей. Если же ваши фотоснимки нравятся пока только вам, то будьте самокритичны и уменьшайте их до 400×300 пикселей.

Кроме уменьшения размеров фотографии, перед ее выкладыванием на сайт, нужно еще выбрать режим сжатия самого графического файла, проще всего это сделать через меню Фотошопа – «Save for Web…»

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

                                    


Просмотров: 8242 | Добавил: Dolpfin | Источник: http://www.fotogor.ru/fotosit.htm

i-foto-graf.com

Разрешение фотографий для веб — KAM-merch.ru

Размер фото для WEB-проектов

Какого размера должны быть фотографии для WEB? Какой камерой можно снимать эти фотографии? Какое разрешение должно быть у этих снимков?

Эти и другие вопросы часто возникают при размещении фотоиллюстраций в сети Интернет. Почему бы для WEB не использовать фотографии в виде тех файлов, которые камера записывает при съёмке? Оказывается, что разрешение компьютерных мониторов уступает разрешению фотографий, отпечатанных в 300-400 dpi минилабе. А размеры мониторов в пикселях (pixel), достаточно редко превышают 1600×1200 пикселей (pixel).

Достаточно распространены мониторы со следующими размерами:
800×600 = 0.48 Mega pixels
1024×768 = 0.79 Mega pixels
1280×1024 = 1.31 Mega pixels
1400×1050 = 1.47 Mega pixels
1600×1400 = 2.24 Mega pixels

Мониторы могут иметь разрешение 72, 96 и 120 dpi.

В Таблице 1, Таблице 2, Таблице 3 приведены размеры фотографий в пересчёте на разрешение мониторов. В Таблице 1 расчёт выполнен для 72 dpi. В Таблице 2 расчёт выполнен для 96 dpi. В Таблице 3 расчёт выполнен для 120 dpi.

Таблица 1. Размеры снимков при разрешении 72 dpi

Разрешение 72 dpi

Таблица 2. Размеры снимков при разрешении 96 dpi

Разрешение 96 dpi

Таблица 3. Размеры снимков при разрешении 120 dpi

Разрешение 120 dpi

Анализируя таблицы можно сделать выводы о том, что съёмка для WEB возможна даже 3 Mega pixels камерой (камерой мобильного телефона).

Большинство зеркальных фотоаппаратов имеют возможность работы с небольшим разрешением. Например, фотокамера с 18 Mega pixels сенсором может работать в режиме 2592×1728. Небольшой размер снимков позволяет сохранять их в большом количестве, допустим в поездке.

Размер «обоев» для рабочего стола компьютера не должен превышать размер мониторов 800×600, 1024×768, 1280×1024, 1400×1050, 1600×1400.

Если открыть папку Sample Pictures компьютера, то в ней находятся отличные снимки размером 1024×768, выполненные с разрешением 96 точек/дюйм (96 dpi). Эти снимки можно использовать в качестве «обоев» для рабочего стола. Полезно посмотреть эти снимки просто в качестве хорошего примера цифровой фотографии

Фотографии для WEB должны быть небольшими, чтобы они быстрее загружались из Интернета. Для уменьшения «веса» файла с фотографией, представляется целесообразным, ограничится разрешением 72 точки/дюйм (72 dpi). Стоит ограничивать размер самих снимков (особенно это важно при вёрстке страниц в несколько колонок).

abcibc.com

Пошаговая инструкция создания оптимального размера фотографии для сайта

И снова здравствуйте, дорогие мои читатели. С вами на связи, Тимур Мустаев. Сегодня хочу отойти от основной темы и рассказать вам, про оптимальный размер фото для сайтов. Многие совершают грубейшие ошибки, когда публикуют фотографии, взятые сразу из фотоаппарата. Сегодня вы узнаете, как правильно подготавливать фотографии, для публикации на сайтах.

С чего все начинается?

Изображения, получаемые цифровой камерой, преобразуются в формат JPEG прямо в самом фотоаппарате. Там для этого есть аппаратный кодек.

Исходный формат RAW имеет слишком большой объем данных, хотя он и хранит максимум информации об изображении, о снятом кадре. Можно сказать, что это копия матрицы камеры на момент съемки.

Но в таком “сыром” виде его использовать нельзя. Поэтому RAW используют профессионалы, как отправную точку для дальнейшей обработки, – либо очень уж крутые фотохудожники, либо эксперты: в области науки, техники, криминалистики, или медицины. В тех случаях, когда надо вытянуть максимум качества из отдельного фрагмента изображения.

Большинство репортеров и даже художников довольствуются JPEG, настраивая камеру под свои цели. (Любой фотограф вам скажет – дайте мне светосилу, а зерно во вторую очередь. Поэтому огромный объектив с просветленной оптикой ценится больше, чем матрица с огромным разрешением.)

Но и в этом виде, фотографии весят очень прилично в мегабайтах. Производители камер ставят на первое место качество изображения, и оно кодируется у них в JPEG практически без сжатия, но с определенной обработкой, относящейся к конкретной модели камеры.

Делать веб-страницы с такими фотками, при всем их качестве, – дело неблагодарное. Они медленно грузятся.

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

Давайте разберем по порядку.

Оптимальный размер изображения

Во-первых, не только текст, но и изображения индексируются поисковыми системами, которые предпочитают большие картинки маленьким. Значит, размер картинки целесообразно брать побольше. Но до каких пор?

Очевидно, что до размеров экрана устройства в пикселях. Это максимум, а еще на странице может быть использован двух- или даже трехколоночный макет. Много чего еще зависит от атрибутов тега img. Загруженное изображение может масштабироваться самим браузером, если это предписано в разметке страницы.

Во-вторых, разрешающая способность экрана на большинстве устройств 72 пикселя на дюйм или 96. Совершенно незачем пытаться отображать на таких экранах изображения с 300 пикселей на дюйм. Лишние пиксели будут просто усреднены и будет взята их проекция на один.

А если мы попытаемся изобразить фото в масштабе 1:1 то получим огромное изображение с полосами прокрутки, то есть, сможем наблюдать только часть изображения одновременно.

Выходит, что зря грузилось много мегабайт? Выходит. Вот тут и открывается резерв для сжатия.

Процесс обработки

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

Фотошоп той или иной версии есть практически у всех, кто занимается сайтами, их созданием, поддержкой и продвижением и так далее.

Посмотрим на конкретном примере, как делается оптимизация фотографии, полученной с цифровой камеры, в редакторе Photoshop. В моей случае, я буду пользоваться Adobe Photoshop CS6 русской версией. Для тех шагов, которые мы с вами выполним, подойдет Photoshop любой версии. И так начнем.

1. Открываем фотографию в редакторе

ФайлОткрыть. В появившемся окне выбираем нужную фотографию.

На рисунке мы берем фото, имеющее размер около 4,5 Мб. Этот файл у нас в формате JPEG, полученную с зеркальной фотокамеры.

2. Уменьшаем размер фотографии

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

  • Разрешение, ставим 72 пикселя на дюйм, нам больше и не надо.
  • Размер. Ширину ставим 800 пикселей, он автоматически назначит высоту, в данном случае, он поставил 533 пикселей, согласно пропорций фотографии.

Важно! Ставим все галочки, картинки. Это:

  • Масштабировать стили;
  • Сохранить пропорции;
  • Интерполяция: Бикубическая автоматическая
  • 3. Правильное сохранение

    Здесь, мы будем сохранять, специально для веб публикаций. Для этого заходим, ФайлСохранить для Web.

    4. Выставляем качество

    Но у нас остался еще вопрос качества. Какой размер фото считать разумным для загрузки? Ну, например, в пределах 200 Кбайт. Такие изображения являются вполне приемлемым компромиссом между качеством и размером.

    Выбираем «Высокое» качество 60%. У нас получилось в этом примере 193.5 Кбайт при качестве 60%. Ну и ладно. На вид обработанное изображение почти неотличимо от оригинала. Вот в таком самом виде его и сохраняем. Готово!

    5. Проверим в браузере

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

    На этом и все. Теперь вы можете выкладывать фотографию куда угодно, веб-сайт, социальные сети и так далее.

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

    fotorika.ru

    Разрешение фотографий для веб

    Цифровые изображения имеют свои размеры и вес. Например, стандартное фото хорошего качества в формате JPEG может весить 5 MB мега байт и иметь размеры 4200х2800 px пикселей ширины и высоты. Стандартное же разрешение монитора тоже считается в пикселях. Самые популярные размеры — это 1024×768, 1152×864, 1280х960.

    Теперь, если сопоставить разрешение монитора 1024х768 и размер картинки 4200х2800, то становится очевидным, что она более чем в 2 раза шире самого монитора, а значит браузер (Опера, Мозила и пр) будет сжимать картинку до нужных ему размеров, или появятся ползунки, и придется прокручивать её. Зависит от установок сайта. К тому же изменятся только видимые размеры картинки.
    Мы, конечно, можем впихать в наш сайт подобные габариты, но такие фото занимают много места на хосте т.к. весят много. Вдобавок тормозят браузеры и компьютер посетителей. Все это добро чрезвычайно долго открывается, что отпугивает немалую часть посетителей. Я, например, долго прогружаемые сайты закрываю и гуглю дальше.

    Как узнать оптимальный размер картинки для той или иной статьи?

    В принципе можно и на глаз, если размер монитора 1024х768, то возьмем примерные размеры поля браузера и вычтем из размера монитора. Поля сайта тоже вычтем, то получим примерно 900х700 +- px то есть, фото можно смело уменьшать до таких размеров. А вообще 600х400 самое оно.

    Если вы хотите поместить картинку в определенное место на сайте, определенных размеров, то можно взять спец. инструмент для веб дизаинеров – линейка ( к примеру mySize ) и прям в браузере померить место, куда вы хотите вставить картинку. Это нужно для того, чтоб посмотреть пропорции, и если надо подрезать фотографию, чтоб её не сплющило.

    Изменить размеры и вес фото можно в фотошопе.

    Размер изменяем таким образом. Image(Изображение) — Image Size – В полях width и height ставим нужные значения в пикселях, и в поле ниже constrain proportions(сохранять пропорции) ставим галочку. Скрин ниже.

    Изменяя вес, мы изменяем качество изображения. Например с 5мb можно смело опускать качество до 50-200 кв, и на мониторе это будет не заметно. На некоторых картинках и при 15кв особо не заметны ухудшения. Зато места занимают в десятки раз меньше. Слева картинка сжатая — 500х630 26,7кб, справа нет — 1269х1600 1.35Мб. Вышло в 6 раз меньше. Если не придираться, то и не заметно.

    Как изменить вес фото или картинки? Все просто. Меняется вес в фотошопе несколькими путями. 1) Просто изменить размер image- image size и если недостаточно уменшили , 2) File — Save for web & devices . Появится окошко с установками параметров, в верхнем правом будет ползунок Quality (качество) , в нижнем левом показатель веса картинки. Качества ставите Low – низкое , следите на сколько уменьшается вес и возюкаете ползунок до нужного значения. Скрин ниже.

    Или можно таким образом. File — save as — появится список форматов, выберите например Jpeg далее жмём «сохранить», появится окошко JPEG options. Там в окошке image option будет ползунок, перемещая его увидите справа цифры — сколько весит.

    Еще один способ сжать картинку разлицных форматов — это специальные сайты, веб сервисы например вот tinypng . com

    photoart-design.ru

    § 69. Разрешение картинок

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

    Дело в том, что у электронного изображения вообще нет разрешения. Разрешение (точнее, разрешающая способность) может быть только у приспособления ввода/вывода — монитора, принтера, сканера, фотоаппарата.

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

    Картинке в «Фотошопе» совершенно все равно, сколько ей задать точек на дюйм в форме изменения размера картинки. Этот параметр ни на что не повлияет при выводе изображения на экран. Потому что картинка состоит из такого-то количества пикселей в ширину на такое-то количество в высоту.

    Многочисленные авторы учебников и книг по созданию сайтов либо советуют использовать 72 или 96 точек на дюйм, либо деликатно обходят вопрос стороной. Функция «сохранить для веба» в «Фотошопе» тупо сохраняет все картинки с разрешением 72 точки на дюйм. Обойти это можно, только пользуясь другими инструментами для сохранения файлов, но это все равно ничего не даст, так как разрешение, записанное в форматах ГИФ или джипег, проигнорируют и браузер, и монитор.

    Загадочные 72 точки на дюйм идут с тех времен, когда имело смысл слово «визивиг». То есть 72 последовательных пикселя на экране Макинтоша печатались линией длиной в один дюйм на бумаге. Пиксель на заре настольно-издательских революций решили приравнять к типографскому пункту, который никогда не был равен 1⁄72 дюйма, но всегда был близок к этому значению (в разных странах причем по-разному).

    WYSIWYG — what you see is what you get (что видишь [на экране], то и получишь [при печати] — англ.)

    Это же соотношение лежит в основе языка «Постскрипт», под управлением которого работают большинство принтеров в мире, а также всех программ, произведенных компанией «Адобе». Разумеется, компьютеры победили, и сегодня в одном дюйме 72 пункта.

    См. также: § 81. Жизнь и необычайные приключения типографского пункта

    Если ГИФу установить разрешение в одну точку на дюйм, то ничего не произойдет. Сколько изображение занимало пикселей по высоте и ширине, столько и будет занимать. Если увеличивать значение разрешения, то некоторые программы будут пытаться соответственно уменьшать изображение при выводе на принтер, компенсируя по дороге несоответствие размера пикселя одной точке принтера.

    www.artlebedev.ru

    Подготовка фотографии для Интернета

    Урок №2

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

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

    Итак, сначала определяемся, какой размер будет у нашей фотографии.

    Смотрим исходный размер. То есть, в меню Изображение, выбираете пункт Размер изображения.

    Открывается окно Размер изображения

    Как видите, у приведенной мной для образца фотографии размер слишком большой — объем файла будет тоже не маленький. Поскольку самое распространенное на данный момент экранное разрешение — 1024х768 пикселей, то и фотографию больше этого размера делать не стоит.

    Вводим вместо 2048 (у вас скорее всего там другие цифры) 1024 в окошко «ширина», при этом в окошке «Высота» автоматически появится цифра 768 (потому, что перед фразой Сохранить пропорции стоит галочка)

    Нажимаем кнопку «ОК» — теперь у Вашей фотографии нужный размер!
    Кстати, если вы на первом уроке кадрировали снимок до нужного размера, то этот абзац можете пропустить.

    Примечание: Если исходный размер снимка меньше, чем 1024х768, то увеличивать его не стоит. Он, конечно, растянется до требуемого размера, но качество изображения ухудшится. Поэтому, если фотография и не закрывает весь экран — то пусть радует глаз красотой а не размерами. Ведь еще Ленин говорил по этому поводу: «Лучше меньше — да лучше!»

    С размерами определились, переходим непосредственно к сохранению.

    Сохранение фотографии для Интернета

    В меню Файл, выбираете пункт Сохранить для Web.

    Открывается диалоговое окно Save For Web

    Как видите, появляется 2 снимка для сравнения качества изображения: оригинал и тот снимок, который получится при устанавливаемых Вами параметрах.

    Вы спросите: какие параметры устанавливать?

    Во-первых, в окошке 2 выберите формат GIF или JPEG.

    Формат GIF поддерживает не больше 256 цветов и подойдет только для сохранения рисунков и чертежей (рисунки 6-8 на этой странице сохранены в формате GIF с поддержкой 64 цветов, поэтому весят по 7-11 кб — мелочь, а приятно!)

    Конечно, красивую фотографию в этом формате не сохранишь, поэтому выбираем формат JPEG.

    В окошке 3 выбираем качество фотографии: низкое, среднее, высокое, максимальное. Вы скажете: конечно максимальное?

    Да, если бы речь шла о сохранении на винчестер, то так бы оно и было. Но Вы же собираетесь эти фотографии размещать в Интернете для скачивания почитателями Вашего таланта! А кто любит долго ждать открытия страницы? Вот именно, никто!

    Представленная фотография сохранена при среднем качестве и «весит» 36 кб. При высоком качестве она бы весила около 100 кб, а при максимальном — 200! Вообщем, я особой разницы между средним и высоким качеством не вижу, зато вижу большую разницу в объеме получаемого файла.

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

    Наконец, когда выбор размера изображения, формата и качества закончен, нажимаем кнопку Save (Сохранить). Как обычно, потребуется назвать файл (поскольку файл готовите для Интернета — сразу напишите латинскими буквами) и определить папку для сохранения. Когда вы это сделали — опять нажимаете кнопку Сохранить.

    Если шибко грамотный фотошоп при этом выдаст вам предупреждение, что «некоторые имена файлов несовместимы с некоторыми веб-браузерами», скажите, что и без него все знаете и нажмите ОК .

    Всё, снимок готов!

    Внимание! Пока Вы полностью не закончите работу над фотографией, сохраняйте ее в «родном» фотошоповском формате PSD. Потому что многократное повторное сжатие в форматах GIF и JPEG приводит к безвозвратной потере качества.

    www.pc-pensioneru.ru

    kam-merch.ru

    Как оптимизировать картинки для сайта: 4 способа

    От автора: здравствуйте. Сегодня я расскажу вам о нескольких способах, как оптимизировать картинки для сайта. Мы рассмотрим как работу с атрибутами изображения, так и уменьшение веса графики.

    Первая сторона оптимизации – скорость загрузки

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

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

    Хорошо, так как оптимизировать картинки прямо сейчаc? Здесь я предлагаю 2 способа:

    Уменьшить размеры изображений до таких, которые необходимы для вставки в статью

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

    Узнать подробнее

    Сжать изображение. Это позволит незначительно потерять в качестве, зато вес картинки уменьшиться на 30-70%!

    Размеры изображений

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

    Это означает, что нет смысла добавлять картинку 1200×800 пикселей. Конечно, движок сам может ее преобразовать до нужных размеров, но в некоторых случаях лучше делать это самому. Ведь с сервера будет грузиться именно оригинал картинки, а он будет весить немало, учитывая разрешение.

    Многие идут еще дальше – они вставляют в текст совсем небольшие картинки – 200-300 пикселей в ширину, но при этом кликабельные. То есть в тексте отображаются только миниатюры изображений, а при клике они раскрываются в полном размере. Есть много плагинов для того же WordPress, которые позволяют это сделать. Например, Lightbox.

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

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

    Способ с кликабельными миниатюрами я видел на многих блогах и информационных сайтах. В целом, мне он понравился и вы можете его применить.

    Сжатие картинок

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

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

    Более менее нормально просматривать ваш сайт смогут только пользователи, у которых очень быстрый интернет от 20 мегабит в секунду. Но нужно понимать, что многие пользуются менее скоростным соединением. Многие сидят на том же 3G, кто-то заходит с мобильных устройств и т.д.

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

    Таким образом, появление картинок на web-странице может превратиться в вечность. Конечно, ситуацию нельзя оставлять так.

    Пример сжатия картинки

    Сейчас я зайду на pixabay. Это бесплатный банк изображений, где можно абсолютно бесплатно взять любую картинку. Я выберу любую и посмотрю, в каких разрешениях ее можно скачать.

    Как видите, в оригинале это аж полтора мегабайта, что очень много для web-страницы. Нам для размещения в статье как раз подойдет разрешение 640 на 420. Как видим, изначально размер уже 147 килобайт, что в 10 раз меньше. Но все равно это по-прежнему достаточно немало, поэтому мы попробуем еще немного уменьшить картинку с помощью сжатия.

    Ну а как, собственно, сжать фото? Тут я вижу два варианта:

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

    Узнать подробнее

    Воспользоваться одним из онлайн-сервисов для этой цели. Найти вы их сможете самостоятельно, просто вбив в поиск что-то вроде “сжать фото онлайн”.

    Открыть картинку в фотошопе. Нажать Файл – Сохранить для Web и задать нужные настройки.

    Вот так это выглядит в фотошопе:

    Этот вариант мне нравится больше тем, что управлять качеством можно очень гибко. Как видите, на картинку смотреть вполне себе можно, при этом ее вес снижен до 80 килобайт. Это почти в 2 раза. Ползунок качества при этом смещен на 40. При желании вы можете ставить еше меньше.

    Тут важно понимать, что все-таки внешний вид картинок немного важнее их веса. Поэтому лучше пусть она будет весить чуть больше, но выглядеть нормально, чем вы ее сожмете в 10 раз, но при взгляде на фото глаза будут просить о пощаде. 40 – это достаточно мало, но в данном случае оказалось, что картинка сохранила свой внешний вид вполне нормально.

    То есть для каждого изображения нужно смотреть индивидуально, как оно будет выглядеть при сжатии и выставлять тот или иной уровень качества. Например, для скриншотов, где очень важно что-то разглядеть, лучше не выставлять качество на столь низкий уровень, как 40. Лучше установить 60-80. Также не забудьте указать правильный формат изображения – jpeg.

    Как сжать png изображения

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

    Таким образом удавалось добиться снижения веса png-изображений в 2-3 раза без существенных изменений в качестве.

    Спрайты или как оптимизировать запросы к серверу

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

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

    Чтобы исправить это, создают так называемые спрайты. Это когда все иконки объединяют в одно большое изображение, а потом вставляют в нужном месте шаблоне с помощью позиционирования фона. Подробнее с этим приемом вы можете познакомиться при изучении css и оптимизации сайтов. Ну а в этой статье я просто упомяну, что такой прием существует, чтобы вы знали.

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

    Вторая сторона оптимизации – подписи к картинкам

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

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

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

    Так есть ли какая-то польза от заполнения alt и title? Можно сказать, что она определенно есть, но не такая большая, как думают некоторые (заполняй alt и попадешь в топ). Подробнее о том, как заполнять эти атрибуты я писал в прошлых статьях о них.

    Если кратко обобщить, то самое главное не спамить ключевыми словами. Текст должен быть длиной не более 150 символов и максимально конкретно описывать изображение. Оптимальным можно считать одинаковый title и alt. То есть просто заполняете один атрибут, копируете текст и вставляете в другой.

    Собственно, самым важным является то, какие лично у вас цели. Потому что если вы не нацелены на трафик из поиска по картинкам, то особого смысла в заполнении атрибутов нет. Они не помогут вам подняться в Яндексе. Единственное, что можно сказать, это то, что поисковик Google, кажется, использует наличие нормальных alt и title как один из факторов ранжирования. Но наверняка этот фактор играет небольшую роль.

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

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

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

    Узнать подробнее

    PSD to HTML

    Практика верстки сайта на HTML5 и CSS3 с нуля

    Получить

    webformyself.com

    Какой формат изображения лучше выбрать для сайта

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

    Таких вопросов я получаю довольно много, многие из моих учеников спрашивают можно ли им использовать новые форматы SVG и WebP, и где лучше применить эти изображения. Разумеется, можно использовать и новые форматы, только нужно понимать какой формат и для чего подходит лучше.

    На сегодняшний день изображения на сайте являются неотъемлемой частью. Начиная от графического дизайна и закачивая изображениями в статьях, графика сопровождает большинство сайтов в сети. Но за красоту приходится расплачиваться скоростью загрузки сайта.

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

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

    Какие изображения для сайтов использую сегодня

    Все изображения для сайтов, подразделяются:

    • растровые (пример — JPG, JPEG, GIF, PNG),
    • векторные (пример — SVG).

    Растровые изображения состоят из пикселей, в которых хранится цвет и значение прозрачности. Такими форматами представлены изображения в статьях, кнопками, иконками и элементами дизайна. Эти изображения популярны среди разработчиков и владельцев сайтов. Основной минус растровых изображений – они плохо масштабируются.

    То есть при увеличении размера картинки, идёт потеря качества.

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

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

    Описание популярных форматов изображения для сайта

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

    JPEG

    JPEG или JPG – один из самых популярных форматов изображений для сайтов. Формат поддерживает миллионы цветов, что и даёт ему лидирующую позицию в представлении фотографий и картинок на сайте.

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

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

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

    PNG

    Этот формат использует алгоритм сжатия без потери качества. По количеству цветов и уровню прозрачности доступен в двух видах 8 и 24-бит. Оба поддерживают прозрачность.

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

    Изображения в формате PNG можно много раз оптимизировать, редактировать – оно сохранит первоначальное качество.

    Формат также поддерживается всеми браузерами и устройствами, что гарантирует его отображение на любом экране.

    По качеству изображения выглядят лучше, чем JPG, но вес файла будет больше. Это нужно учитывать при размещении файлов на сайте.

    GIF

    Это 8-битный формат, поддерживающий 256 цветов, прозрачность и анимацию. За счёт поддержки малого количества цветов, вес файла тоже минимальный.

    Формат не подходит для фотографий и изображений с широким диапазоном цветов.

    Зато широко используется при создании GIF-анимаций, баннеров, кнопок, иконок и так далее.

    В современных сайтах этот формат используется всё реже.

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

    SVG

    Это формат векторных файлов на основе XML. Формат стал набирать популярность совсем недавно, так как ранее он слабо поддерживался в браузерах. И из-за проблем отображения никто не торопился его использовать.

    На сегодняшний день SVG поддерживается всеми современными браузерами. Но, проблемы с отображением все, же встречаются.

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

    Формат SVG имеет малый вес, отлично масштабируются, обеспечивая чёткость изображения на любом разрешении экрана, поддерживает анимацию, можно управлять через CSS и размещать в HTML, сокращая количество запросов.

    WebP

    Формат с открытым исходным кодом, разработан Google специально для интернета. Сегодня YouTube использует преобразование миниатюр для видео в формат WebP.

    Формат обеспечивает превосходное сжатие и поддерживает прозрачность. Он сочетает в себе преимущества JPG и PNG форматов без увеличения размера файла.

    Но, несмотря на преимущества формата, он поддерживается не всем браузерами, например, IE, Edge, Firefox и Safari.

    Существуют способы обхода этих ограничений, но они не дают использовать формат повсеместно.

    Заключение

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

    Возможно, когда WebP получит широкую поддержку, мы все перейдём на него и заменим jpg и png на своих сайтах.

    Давайте обсудим в комментариях, какие вы используете форматы на своих сайтах, что нравится и что не нравится.

    На сегодня у меня всё, жду ваших комментариев.

    С уважением, Максим Зайцев.

    1zaicev.ru

    Создание изображений для соцсетей: размеры, вотермарки, инструменты, примеры

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

    В статье рассматриваем:

    • Правильные размеры аватаров, обложек, картинок для публикаций и других изображений для Facebook, «ВКонтакте», «Одноклассники», Twitter, Instagram, Pinterest, LinkedIn.
    • Сервисы для создания изображений и фотостоки с бесплатными или дешевыми картинками для бизнеса.
    • Советы о том, как ставить водяные знаки, и когда это нужно.
    • Примеры для вдохновения.

    Статья расчитана на начинающих.

    РАЗМЕРЫ ИЗОБРАЖЕНИЙ

    Важно придерживаться визуального формата соцсетей, потому что картинки меньше нужного размера растягиваются и теряют резкость, а большего — сжимаются и теряют качество. Если у изображения неверное соотношение ширины и высоты, оно обрезается в неожиданном месте.

    Facebook

    Фото профиля

    Загружайте изображение 180×180 px. Фото профиля личной страницы на компьютере отобразиться в размере 160х160 px, управляемой страницы — 170×170 px. В ленте и комментариях аватар отображается в форме круга.

    Обложка

    Лучший размер для загрузки зависит от оформления и информации на обложке.

    Обложка личной страницы на компьютере отобразится в размере 851х315 px, управляемой страницы — 820×312 px, группы — 820×250 px. Мероприятия — 500×262 px. На смартфоне пропорции поменяются — 640х360 px. То есть, если вы загрузили 851х315, или 2,7 к 1, на смартфоне картинка обрежется и отобразится в пропорции 1,8 к 1.

    Картинка для поста

    Загружайте 1200×630 px. При отображении в ленте горизонтальная картинка уменьшится до 470 px по ширине, соотношение сторон сохранится. Вертикальная картинка уменьшится до 394 px по высоте, соотношение сторон сохранится.

    Картинка к внешним ссылкам

    Загружайте в поле «og:image» картинку 1200×630 px. В ленте на компьютере отобразится как 470х246 px. Facebook советует размер 1200×630 px, чтобы картинка лучше отображалась на мониторах с высоким разрешением. Не загружайте картинку меньше 470х246 px, т.к. она отобразится в виде маленького квадрата 158х158 px вместе с текстом. Также маленький квадрат появится, если в поле «og:image» есть ошибка.

    По данным Facebook, быстрее всего грузится файл sRGB png размером 851х315 px, который весит менее 100 Кбайт. Ограничение по объему — 8 Мбайт. Формат, который максимально сохранит качество — PNG.

    Подбираем обложку для Facebook

    Пожалуй, это самый сложный визуальный элемент страницы. Для разных типов страниц — разные параметры, соотношения сторон и расположение профильного фото на странице и смартфоне.

    Начнем с плохого примера. Вот я загрузила фотографию 4032х3021 px, не задумываясь, как это будет выглядеть на разных устройствах.

    Так у меня выглядит профиль на ПК:

    Ничего особенного, но для личной некоммерческой страницы сойдет.

    А вот так на смартфоне:

    Я не учла, что картинка будет обрезана по краям, а профильное фото залезет на середину. Это очень плохо. Не делайте так, учитывайте особенности форматов.

    А вот для создания обложки для управляемой страницы и группы я решила больше не полагаться на себя. Я взяла шаблон сервиса Canva, он предлагает делать обложку 628×315 px.

    Управляемая страница на ПК

    На смартфоне

    Группа на ПК

    На смартфоне

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

    Еще есть оптимальный размер обложки по мнению Buffer, сервиса для планирования публикаций в социальных сетях. И это 820х462 px:

    Можно скачать их шаблон для фотошопа в формате PSD.

    «ВКонтакте»

    Аватар

    Загружайте изображение размером 200 на 300 px. Или 2 к 3, но не более 600х900 px. На компьютере отобразится в размере 200×300 px. Миниатюра отобразится в круге с диаметром 200 px. Если загрузить бóльшую картинку, она отобразится при клике на аватар.

    Обложка группы

    Загружайте изображение размером 1590×400 px. На компьютере отобразится в размере 795х200 px.

    Картинка для публикации

    Загружайте картинку 510x 510 px. (ширина: 510, длина: меньше или равна 510 px) Если загрузить картинку больше, но пропорционально похожую, тоже будет отлично. При отображении в ленте вертикальная картинка сожмется до 510 px по высоте, горизонтальная — до 510 рх по ширине. Соотношение сторон картинки сохранится.

    Вот, что говорит поддержка VK

    Картинка к внешним ссылкам

    Загружайте в поле «og:image» картинку 537×240 px или в пропорции 2,23 к 1. Во «ВКонтакте» картинка сожмется до 537×240 px. Соотношения сторон важны. Если изображение квадратное или вертикальное, оно будет обрезано.

    Размер аватара во «ВКонтакте»

    Если в Facebook главная головная боль — это обложка, то во «ВКонтакте» это аватар. Во-первых, о реальных максимальных размерах аватара во «ВКонтакте» не подозревает даже тех. поддержка.

    Но вот утка 200х500 px. Она спокойно отображается:

    Проверяем дальше:

    Ладно, загружаем утку размером 200х300 px:

    Вполне симпатично. Согласимся, что 200х300 px — действительно хороший размер. Тем более, после того как вы добавляете на страницу обложку, размер аватара перестает волновать, т. к. от него остается лишь миниатюра:

    Картинка для внешней ссылки

    Если сравнивать с картинкой для внешней ссылки в ленте Facebook, в ленте «ВКонтакте» она отображается более вытянутой. Вместо 470х246 px на FB, она имеет параметры 537×240 px. А значит, будет больше обрезана сверху и снизу. Следите, чтобы с картинки не пропала важная информация.

    Так выглядит картинка в ленте «ВКонтакте»

    Так выглядит оригинал на сайте animalsglobe

    Сохраняем качество изображений во «ВКонтакте»

    Чтобы качество не терялось, поддержка VK советует загружать картинку не через открытие файла на сайте, а перетаскивая файл из папки на компьютере в загрузчик.

    Больше советов об оформлении групп VK в руководстве Texterra.

    «Одноклассники»

    Фото профиля или группы

    Загружайте изображение 288×288 px.

    Тема группы

    Состоит из трех частей:

    • Главное изображение — 1340×320 px;
    • Обложка темы для каталога — 240×90 px;
    • Повторяющийся фон страницы — 320×320 px.

    Картинка для поста

    Загружайте изображение 1024×768 px.

    При отображении в ленте горизонтальная картинка уменьшится до 548 px по ширине, соотношение сторон сохранится.

    Вертикальная уменьшится до 411 px по высоте, соотношение сторон сохранится.

    Советы по оформлению групп.

    Как поставить свою тему группы в «Одноклассниках»

    Добавить свою тему оформления могут только официальные группы и группы, у которых больше 10 000 участников.

    Чтобы тема выглядела красиво, ОЧЕНЬ важно следовать рекомендациям, которые дает служба поддержки ОК:

    Использовать для фона темы изображение размером 1340×320 px, до 120 КБ; для повторяющегося фона страницы — 320×320 px, до 50 КБ; для обложки темы для каталога — 240×90 px, до 30 КБ.

    Все необходимо тщательно продумать. Случайно выбранные картинки не сложатся в правильную тему. Верхнее изображение должно незаметно «перетекать» в фон, без видимых стыков.

    При отображении на компьютере часть картинки закроется содержанием группы. Полностью видимым останется верх изображения высотой 140 px. Поэтому все важное должно быть расположено в верхней части.

    Если требования к фону не соблюдаются, он может не пройти проверку, и вы получите оповещение с причинами отказа.

    Instagram

    Фото профиля

    Загружайте картинку размером 110×110 px. Фотография отобразится в круге.

    Картинка для поста

    Загружайте картинку размером 1080×1080 px. Квадратную картинку загружать не обязательно, но желательно. Если вы загружаете неквадратную картинку, то идеальная ширина — 1080 px, а длина — от 566 до 1350 px. В веб-версии фотографии будут отображаться в размере 291×291 px. При сжатии в Instagram картинка уменьшится до 640 px. В веб-версии откроется картинка размером 600×600 px.

    Картинка для Stories

    Загружайте картинку размером 1080х1920 px. Можно и других размеров. Главное, чтобы сохранялась пропорция 9:16. Например, подойдет 900х1600 px.

    При выборе логотипа помните, что картинка примет круглую форму:

    Поэтому проследите, чтобы важные части картинки и текст не располагались в углах. Особенно, если вы ставите логотип.

    В Instagram лучше загружать квадратные фотографии

    Почему? При показе в профиле даже самые красивые фотографии могут быть неудачно обрезаны. Например, у горячих красоток на пляжах Пхукета могут пропасть головы.

    Если квадрат вам не подходит, а красивую ленту хочется — загружайте горизонтальные фотографии одинакового размера.

    Если загружаете неквадратную фотографию, Instagram сперва предложит обрезать ее до квадрата.

    Это именно та часть, которая отобразится в профиле.

    Обычно обрезка фотографий не критична, но когда вы ведете аккаунт интернет-магазина, и на «длинной» фотографии вверху указана цена, то клиент ее не увидит, если не откроет полную картинку.

    Неквадратные изображения в ленте неудачно обрезаны. Источник: Instagram/malishpsih

    Неквадратные горизонтальные изображения одного размера выглядят хорошо. Источник: Instagram/vitalykovalevich

    Twitter

    Фото профиля

    Загружайте изображение размером 400×400 px. Фото профиля на компьютере отобразится как круг размером 200px в диаметре.

    Обложка

    Загружайте изображение размером 1500х500 px. Так советует сам Twitter и все редакторы, в которых есть шаблон обложки для Twitter. Однако при отображении на компьютере обложка показывается как 1900 на 500. А это уже не 3 к 1, а 19 к 5.

    Картинка для поста

    Загружайте 1024×512 px. При отображении в ленте картинка уменьшится до 506 px по ширине. Сохранится пропорция 2 к 1. Вертикальная уменьшится до 506 px по высоте и ширине, станет квадратной. Поэтому, если вы захотите поставить вертикальную картинку, при показе в ленте она равномерно обрежется сверху и снизу. Если нажать на картинку, она откроется без обрезки.

    Pinterest

    Фото профиля

    Загружайте изображение размером 165×165 px. Отобразится в круге, поэтому следите, чтобы самое важное находилось в центре.

    Картинка для пина

    Загружайте картинки размером 600×900 px или с соотношением сторон 2 к 3. На компьютере картинка сожмется до 238 px в ширину.

    Пропорции сохраняются до тех пор, пока соотношение сторон примерно от 1 к 1 до 1 к 3,5. Если фотография более вытянутая, то сервис ее обрежет на общей странице, а полная версия будет доступна при клике. Максимальная ширина при открытии — 735 px.

    Картинка для доски/альбома

    Загружайте картинки размером 600×900 px или с соотношением сторон 2 к 3. Во многих источниках указано, что нужно загружать картинку шириной 238 px, но это неверно.

    Как объясняет Дарси, член сообщества экспертов Pinterest, если загружать картинку размером 238 px, то при открытии вы используете меньше половины допустимой площади. А в случае с Pinterest, где пользователи приходят именно за визуально привлекательным полноразмерным материалом, это преступление.

    LinkedIn

    Фото профиля

    Загружайте изображение размером 300×300 px. В личном профиле отобразится в круге, на странице компании — в квадрате 130х130 px.

    Фото обложки

    Загружайте 1584х396 px для личной страницы и 1536х768 px для страницы компании.

    Картинка для поста

    Загружайте изображение размером 1200×627 px.

    При отображении в ленте картинка сожмется до 520х272 px. Если загружать картинки других размеров, горизонтальные сожмутся до 520 px по ширине, а вертикальные — до 510 px по высоте. Пропорции сохранятся.

    Картинка к внешним ссылкам

    Загружайте изображение размером 1200×627 или 520х272 px. Соотношение сторон должно быть 1,91 к 1. Ширина должна превышать 200 px.

    В новом дизайне LinkedIn обложка компании обрезается

    При выборе обложки сервис рекомендует загружать картинку 1536х768, а затем беспощадно её обрезает сверху и снизу. На компьютере отображается картинка высотой 220 px, остальное обрезается:

    Зачем сервис советует именно 1536х768? Будет красиво при просмотре со смартфона. Поэтому, загружая обложку страницы в LinkedIn, нужно обязательно проверить результат как на компьютере, так и на смартфоне.

    ВОДЯНЫЕ ЗНАКИ ИЛИ ВОТЕРМАРКИ

    Применение

    Водяные знаки нужны, когда вы хотите защитить изображения. Когда это:

    1. фотография для фотостоков, которую вы планируете продавать;
    2. ценный репортажный кадр, и вы хотите его продать.

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

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

    Источник: Google Research Blog

    Водяные знаки желательны, если вы хотите добиться популярности бренда:

    1. вы фотограф/художник/дизайнер и используете подпись для узнаваемости;
    2. это коммерческий кадр, но на нем нет названия компании или продукта.

    Есть правила:

    • Водяной знак не должен перекрывать изображение и привлекать слишком много внимания.
    • Не нужно лепить на фотографию дополнительные элементы, например, рамку.
    • Не стоит ставить водяной знак на слишком маленьких и низкокачественных картинках.
    • Желательно сделать вотермарк полупрозрачным.
    • Текст должен быть лаконичным и емким: имя фотографа, адрес сайта, логотип.

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

    Плохо

    Хорошо

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

    Отличный пример. Намного лучше вотермарка на фотографии.

    Источник: Advizzer

    А тут на подложку для торта нанесли еще адрес сайта:

    Источник: Instagram/just35sqm

    В этих случаях вотермарк или визитка — это подсказка для потенциального покупателя. Они играют роль связи клиента с компанией. Например, если клиент хочет заказать именно такой торт, он сможет найти производителя.

    Вотермарки могут дополнять плакаты и информировать:

    В остальных случаях можно обойтись без водяного знака.

    ПОИСК И СОЗДАНИЕ ИЗОБРАЖЕНИЙ

    Фотостоки

    Everypixel

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

    Unsplash

    Пожалуй, один из самых красивых фотостоков. На сайте написано, что в их базе более 200 000 фотографий для свободного пользования, подаренные самым щедрым сообществом фотографов. Наверху страницы можно выбрать категорию и искать по интересам.

    Focusfitness

    Тематический фотосток, где можно найти фотографии на спортивную тематику. Есть категории: тренировки, еда и напитки, йога, диеты, фитнес и т. п.

    New old stock

    Тематический фотосток, где собраны винтажные фотографии. Найти что-либо определенное на сайте сложно, но есть множество атмосферных кадров из прошлого. Средний размер, в котором можно скачать фотографию — 1200х1200 px.

    ВАЖНО: картинки этого фотостока можно свободно использовать только в некоммерческих целях. На сайте указано, что изображениями можно иллюстрировать статью, публикации в СМИ, страницу 404, а также личные некоммерческие проекты.

    Но не увлекайтесь фотостоками. Картинки могут быть красивыми, но они не настоящие, не отображают вас и ваш бренд. Пользователь устал от натянутых улыбок моделей в неестественных ситуациях, слишком идеальных и «глянцевых».

    Настоящие фотографии вызываются больше эмоционального отклика. Снимайте свой бизнес. Нарисуйте иллюстрацию. Создавайте коллажи или инфографику.

    Инструменты для создания картинок

    Canva

    Вероятно, самый востребованный бесплатный редактор среди СММ-щиков. Продвинутый, с большим количеством функций, но по-прежнему очень простой и интуитивный. Есть список готовых шаблонов на выбор — почти для каждой популярной соцсети, кроме VK.

    Social Media Image Maker

    Крутейший инструмент, который должен добавить в закладки каждый SMM-щик. Тут собраны шаблоны для 16 социальных сетей. К сожалению, нет «ВКонтакте». При выборе соцсети программа показывает зеленой подсветкой области, для которых можно создать картинку. Просто нажмите на нужную, загрузите файл и передвиньте шаблон.

    Pablo

    Еще один простой и удобный редактор. Регистрироваться не надо. Просто заходите, создаете, скачиваете, публикуете. Справа можно выбрать один из трех форматов: вытянутый вертикальный для Pinterest, квадратный для Instagram и горизонтальный для Facebook и Twitter.

    Другие полезные инструменты

    Colorscheme

    Отличный инструмент, чтобы подобрать цветовую гамму. Можно выбрать моно-гамму, два, три или четыре цвета, а потом посмотреть, как они могли бы выглядеть в дизайне сайта. Часто хорошее оформление — это просто удачное сочетание цветов. Пример цветовой гаммы. Точки во второй окружности схемы можно передвигать в поисках любимого сочетания, либо просто нажать кнопку «Рандом».

    Справа под палитрой цветов можно нажать «пример светлой страницы» или «пример темной страницы», чтобы посмотреть, как это выглядит в дизайне. Программа показывает дизайн сайта, но можно представить, как эти цвета будут смотреться в социальной сети.

    Omnicoreagency

    Самый развернутый англоязычный гид по размерам визуальных элементов, который я видела. Тут Facebook, YouTube, Pinterest, Twitter, LinkedIn, Instagram, Google+. На странице показаны размеры изображений и схематично, и в таблице. Последняя дата обновления — 19 апреля 2017 года. Есть расхождения в числах с другими источниками, но их мало, и они незначительны.

    Makeawebsitehub

    Более лаконичный гид по размерам, обновляется чаще. Последняя дата: 3 августа 2017 года..

    Timeline Slicer

    Тем, кто хочет увидеть, как будет выглядеть страница в Facebook. Захóдите на сайт, перетаскиваете картинки в шаблон и смотрите, красиво ли выходит. Программа платная, но есть тестовый период.

    Recite

    Наверное, самый простой генератор постеров, который вы встречали. Просто введите текст и выберите шаблон.

    Постер можно скачать, а можно сразу запостить в социальные сети.

    Monosnap

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

    Watermark

    Простой и интуитивный сервис, где проще всего поставить текстовый вотермарк. Все элементарно: загружаете изображение, выбираете шаблон и располагаете там, где нужно. Вотермарк можно увеличить или уменьшить, поиграть с прозрачностью и цветом. Также можно заполнить изображение водяными знаками. Минус — большинство шрифтов пойдут только с латинской раскладкой клавиатуры.

    Marksta

    Приложения для iPhone c огромным выбором инструментов, шрифтов, фонов, цветов. Загружайте и добавляйте вотермарки на изображения: ваше имя, название компании, адреса электронной почты или веб-страницы. Приложение стоит 2,29 €.

    Есть также бесплатная версия с ограниченными функциями — Marksta Lite.

    ПРИМЕРЫ УДАЧНОГО ИСПОЛЬЗОВАНИЯ ИЗОБРАЖЕНИЙ В СОЦСЕТЯХ

    Делюсь коллекцией визуально привлекательных страниц, где стоит подсматривать идеи и черпать вдохновение.

    Facebook

    Nutella

    Умилительная страница, которая напомнит, что вы проголодались. Особенно если любите сладкое. Тут можно почерпнуть идеи, если развиваетесь в сфере ресторанного бизнеса, выпускаете съедобные продукты или просто хотите «аппетитно» преподнести товар.

    KFC

    Для KFC типично добавлять на картинки Полковника Сандерса — человека, который основал КFС и придумал главный рецепт. У страницы можно поучиться, как внедрить и использовать образ, сделать его узнаваемым и любимым.

    Jack Daniel’s

    А у Jack’a можно подсмотреть, как красиво раскручивать алкоголь или безалкогольные напитки. Ракурсы, оформление постов с рецептами, постановочные кадры с использованием продукта в повседневных ситуациях.

    Научно-образовательный проект «Образовач».

    Ребята нашли способ привлекать внимание к науке и вовлекать пользователей Facebook: у постов много лайков и реакций, ими делятся, а в комментариях отмечают друзей. Пишут статьи на серьезные темы и обыгрывают их в публикациях. Рисуют комиксы, используют мемы. Обычно это смешно.

    …и да, порой у них в текстах есть ошибки

    Наверное, все знают «Тинькофф Банк» и то, какие картинки там создают. Но если вы еще не подписаны, то стоит. Они вовремя реагируют на российские и мировые инфоповоды, используют ситуативный маркетинг, рисуют быстро и качественно.

    Instagram

    twheat

    Владелец профиля сумел красиво расставить неквадратные кадры в ленте. Все просто: он чередует горизонтальные и вертикальные картинки в белых рамках.

    acolorstory

    Аккаунт, который рекламирует возможности приложения для обработки фото. Тут в основном публикуют кадры, сделанные пользователями приложения. Наглядно.

    bimbasket

    Мило продают развивающие наборы для детей. Тут и счастливые дети, и красивые мамы, и яркие кадры с продуктом.

    meundies

    Instagram магазина позитивного нижнего белья. Кадры соответствующие. Большую часть контента генерируют клиенты, выставляя фото с продуктом и хештегом #MeUndies.

    pankratova916

    Девушка организует путешествия, зарабатывает на учебу в Америке, рассказывает мини-истории. Здесь все прекрасно.

    Pinterest

    local milk

    Волшебный профиль, посвященный домашней кухне, путешествиям, семье и размеренной жизни. Автор показывает свою работу в деталях, и это вдохновляет.

    Damn Delicious

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

    Etsy

    Etsy — веб-сайт, где можно найти изделия ручной работы, винтажные вещи и уникальные товары. На Pinterest у них есть коллекция «досок» (boards), например, «Находки» (Etsy Finds). Туда попадают красивые фото с продуктами, которые есть на сайте Etsy.

    Twitter

    Designboom

    Twitter-страница журнала об архитектуре, искусстве и дизайне. Ребята публикуют 1-3 удачные фотографии проекта, а чтобы посмотреть остальные, придется нажать на ссылку в твите.

    HealthTap

    Страница приложения по поиску докторов. Публикуют кадры, которые ассоциируются со здоровой и счастливой жизнью.

    Health & Fitness

    Если вы работаете в фитнес-сфере, знайте: красивые подкаченные девушки все еще собирают подписчиков.

    Закрепляем:

    Чтобы картинки в социальных сетях выглядели хорошо:

    • Подбираем правильный размер, чтобы картинка не растягивалась и не сжималась.
    • Соблюдаем правильные пропорции отдельно для каждой сети, чтобы картинка не обрезалась.
    • Придерживаемся одного формата/стиля.
    • Проверяем профили в соцсетях на устройствах с разным разрешением (компьютер/смартфон/планшет).
    • Отказываемся от водяных знаков, либо ставим их так, чтобы не портить композицию.
    • Обходимся без фотостоков или используем их минимально.
    • Создаем и редактируем картинки с помощью надежных программ и инструментов без вирусов.
    sozdanie-izobrazheniy-dlya-sotssetey-razmery-votermarki-instrumenty-primery

    texterra.ru

    Какой размер картинок рекомендуется загружать на сайт

    Размер загружаемых картинок должен быть целесообразен нашему проекту, как в прочем и количество их копий — иначе через какое-то время испытаем всю прелесть мороки от громадного веса сайта: его бекапа!

    Вордпресс имеет достаточно широкий спектр настроек медиафайлов (по умолчанию), а посему некоторые регулировки просто необходимо подстроить в админпанели соответственно своему проекту на самом начальном этапе запуска сайта в свет…

    По тексту статьи попытаюсь подробно рассказать о некоторых нюансах, касающихся загружаемых картинок (медиа) а также отыщем и удалим забытые и неиспользуемые в работе сайта фотки — с плагином media-cleaner — оч. полезно!!

    Вперёд…


     

     

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

     

    Это, конечно, коли не использовать всякие галереи и тому подобное…

     

     

    При настройках по умолчанию, машинка WP при загрузке невинной фотки делает её копии, которые чаще всего весят более оригинала.

    Спрашивается, к чему они нужны?? тем паче, коли ни коем образом не используются… или используются редко в некоторых статьях (хотя в этом случае, возможно, правильнее для конкретной статьи единожды перенастроить «загрузку» медиа: а после этого вернуться в исходник.

    …иначе и при последующих — новых загрузках подгрузится много лишнего!

     

     

     

     

     

     

    к оглавлению $
    Размер миниатюры изображения

     

    Целесообразно оставить, иначе в админке при редакции статьи-медиа (в «медиафайлах» будут подгружаться оригиналы: а это тяжеловато)

     

     

     

    Средний размер изображения

     

    Однако, для галерей, возможно оставить (задать) «Средний размер»: на ваше усмотрение… это всё в зависимости ширины контентовой части вашего сайта.

     

     

     

    Крупный размер изображения

     

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

     

     

    Ко пользе))

    не забудьте поставить птичку в чекбокс «Помещать загруженные мной файлы в папки по месяцу и году» — иначе каша в папке uploads обеспечена!!

     

    ваш-домен.ru/wp-content/uploads

     

     

     

    Вот как бы статейка и закончена: поверьте, своевременные знания и настройки размеров, количества загружаемых фоток — сослужат положительную пользу))

     

     

     

     

     

     

     

    к оглавлению $

     

     

     

     

    media-cleaner — с помощью этого плагина возможно запросто узнать о неиспользуемых на сайте картинках и запросто почистить мусор.

     

    Как бы вы ни старались, уверен «пустые» картинки отыщутся… Попробуйте, установите плагин и увидите.

     

    Установка банальна: через депозитарий WP.

    После работ, плагин можно запросто и чистенько удалить…

     

     

     

     

    к оглавлению $
    Вот некоторые настройки плагина media-cleaner

     

     

    После активации… необходимо кликнуть см. фто ниже (обведено зелёным)

     

     

     

     

    В окне предварительных настроек нужно в двух первых чекбоксах поставить галочки!

    Впрочем я дал технический перевод, смотрите:

     

     

     

     

    После настроек, переходим в раздел настроек сканирования плагина media-Сleaner.

     

     

     

     

     

     

    Ну и как понимаете, остаётся кликнуть «Scan» — то бишь сканирование…

     

     

     

     

     

     

    Вот и всё !! остаётся решить, что будете делать с найденными «пустыми» картинками.

     

    Я рекомендую пройти по указанным ссылкам и ознакомиться с рисунками поближе, так сказать… мало ли !!

     

    А ненужное, конечно же, удалите !!

     

     

     

     

     

    Желаю удачи в работах и настройках своего сайта!

     

     

     


    На этом занавес представления опускается…
    …на рампы пыль печальная ложится…

     

     

     


    Online консультация по работе c сайтом на WordPress


    !..подписываясь на обновления mihalica.ru —
    …расстаёмся с невежеством..!

     


    На этом занавес представления опускается…
    …на рампы пыль печальная ложится…

     

     

    …вопросы в комментариях — помогу, в чём дюжу…
    mihalica.ru !

    консоль WordPress создание сайта — начало контент ускоряем сайт

    mihalica.ru

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Авторское право © 2021 Es picture - Картинки
    top