Регистрирует новый размер картинки (миниатюры).
Регистрация означает, что WordPress, при загрузке изображения, кроме базовых размеров будет создавать еще один файл - измененную копию оригинала с указанными размерами.
Чтобы для поста можно было определить картинку миниатюру, нужно активировать эту возможность функцией - add_theme_support("post-thumbnails"); в файле шаблона funсtions.php.
При создании своей темы для каталога тем ВП, название нового размера должно содержать имя темы, . Например:
Add_image_size("mytheme-mini", 200, 200, true);
Хуков нет.
Возвращает
Ничего не возвращает.
Использование
add_image_size($name, $width, $height, $crop); $name(строка) (обязательный) Название нового размера картинок. $width(число) (обязательный) Ширина миниатюры (в пикселях). $height(число) (обязательный) Высота миниатюры (в пикселях). $crop(логический)Как создавать миниатюру?
- array(координата_X, координата_Y) - указание позиции кадрирования, т.е. если указать массив (array("right", "top")), то изображение будет кадрированно с указанных позиций.
false - масштабирование: картинка будет изменена в размере по подходящей стороне. Миниатюра создается по одной из подходящих сторон: указанной ширине или высоте. Итоговая картинка не будет точно совпадать указанными размерами.
true - кадрирование: миниатюра создается точно по указанным размерам. Подбирается наиболее подходящая сторона, картинка уменьшается по ней, а у противоположной стороны лишняя часть, не подходящая по пропорциям обрезается.
crop работает только для вновь создаваемых картинок. Если на сайте уже есть картинки и только потом добавляется размер, то оно обработаны не будут.
По умолчанию: false
Зарезервированные названия размеров
thumb, thumbnail, medium, large, post-thumbnail
Названия " thumb " и " thumbnail " - это алиасы (синонимы) и относятся к одинаковым файлам.
Также вы можете установить опции создаваемой миниатюры через:
Update_option("thumbnail_size_w", 160); update_option("thumbnail_size_h", 160); update_option("thumbnail_crop", 1);
Примеры
Добавим новые размеры миниатюр
Регистрируем новые размеры миниатюр, добавив такой код в файл шаблона functions.php:
If (function_exists("add_theme_support")) { add_theme_support("post-thumbnails"); set_post_thumbnail_size(150, 150); // размер миниатюры поста по умолчанию } if (function_exists("add_image_size")) { add_image_size("category-thumb", 300, 9999); // 300 в ширину и без ограничения в высоту add_image_size("homepage-thumb", 220, 180, true); // Кадрирование изображения }
Кадрирование (параметр $crop)
#1 - false (масштабирование)
Эта строка укажет WP, что при загрузке нового файла, нужно создать его уменьшенную копию. В этом случае миниатюра будет подогнана под ширину или высоту, смотря какая из сторон подходит больше, а противоположная сторона будет уменьшена пропорционально и скорее всего не будет больше указанного размера. Например, у нас оригинал картинки 2500х1800 пикселей мы делаем миниатюру 220х180 пикселей. Картинка будет уменьшена до размеров - 250х180 px, т.е. высота будет 180, как мы и указали, однако ширина получится выше указанной 250 а не 220. В этом случае картинка не кадрируется и уменьшенная копия сохраняет пропорции полностью.
Add_image_size("homepage-thumb", 220, 180);
#2 - true (кадрирование)
Если установить четвертый параметр в true, то миниатюра будет уменьшена и обрезана точно под указанные размеры. Например, у нас оригинал картинки 2500х1800 пикселей мы делаем миниатюру 220х180 пикселей. Оригинал будет уменьшен до высоты 180xp (тогда ширина его как бы равна 250px), а ширина будет обрезана по краям по 15px и в итоге получим уменьшенную копию: 220х180 пикселей:
Add_image_size("homepage-thumb", 220, 180, true);
#3 - уменьшение по нужной стороне
Чтобы уменьшить картинку по одной из нужных нам сторон, нужно указать противоположной стороне огромное значение. Например, у нас есть картинка 2500х1800, нам нужно получить миниатюру 500х1800, тогда указываем так:
Add_image_size("homepage-thumb", 500, 9999);
#4 - Array(x, y) (кадрирование с указанием позиций)
С версии 3.9 появилась возможность указывать позицию кадрирования. Давайте добавим размер миниатюры, которая будет размером 220х220 пикселей и будет фрагментом от оригинала, который будет взят с левого верхнего угла (left, top):
Add_image_size("custom-size", 220, 220, array("left", "top"));
Х_позиция может быть: " left " " center " или " right ".
Y_позиция может быть: " top ", " center " или " bottom ".
Использование новых размеров
Мы зарегистрировали 3, отличных от базовых, размера: post-thumbnails , category-thumb , homepage-thumb . Чтобы теперь использовать эти размеры (выводить картинки в шаблоне), можно использовать следующие функции:
Избранная картинка (featured image)
Чтобы использовать новый размер при выводе картинки установленной как "Избранная картинка" поста, в файле шаблона нужно использовать функцию the_post_thumbnail() :
If (has_post_thumbnail()) { the_post_thumbnail("category-thumb"); // category-thumb - название размера }
Новый размер в выбор размеров при вставке картинки (админ-панель)
Чтобы добавить новый размер в выбор размеров при вставке картинки в пост, нужно использовать фильтр-хук image_size_names_choose , в котором нужно добавить размер и указать для него понятное название:
Add_filter("image_size_names_choose", "my_custom_sizes"); function my_custom_sizes($sizes) { return array_merge($sizes, array("category-thumb" => "Мой размерчик",)); }
Для основных медиафайлов (PHP/Templates)
Также можно выводить картинки (по размерам) напрямую из библиотеки WordPress по ID картинки. Для этого используйте функцию wp_get_attachment_image() :
// Подразумевается, что у вас в библиотеке есть картинка с ID 42... echo wp_get_attachment_image(42, "category-thumb");
Если нам нужно получить только УРЛ картинки а не готовый тег , то используйте функцию wp_get_attachment_image_src() .
Плагины
- Simple Image Sizes - позволяет создавать новые размеры миниатюр прямо из панели "Медиафайлы". Он также умеет пересоздавать миниатюры. Он добавляет новые размеры в выбор для постов, так вы можете вставлять новые размеры в посты. Вы можете выбирать какие из размеров вы бы хотели пересоздать и для каких типов постов это нужно сделать.
Regenerate Thumbnails - этот плагин позволяет создать новые размеры для каждого загруженного изображения. Полезен когда вы изменили или добавили новые размеры миниатюр (через Настройки > Медиафайлы) во время когда в библиотеке уже есть загруженные изображения. Или когда вы изменили размеры "Избранного изображения" поста.
Force Regenerate Thumbnails - удаляет ранее созданные размеры и создает новые, на основе текущих установок.
AJAX thumbnail rebuild - позволяет пересоздать миниатюры. Полезен, если вы использовали функцию add_image_size() когда у вас уже есть загруженные изображения. (Это медленный плагин, но при этом в нем не бывает ошибок с недостатком выделенной памяти).
Для измерения размера фотографий применяются по меньшей мере три параметра - разрешение цифрового изображения (в пикселях), размер отпечатка (в сантиметрах) и разрешение при печати (dpi - точки на дюйм). Пользователю, который впервые столкнулся с задачей преобразования изображения, подготовкой его к печати иногда сложно разобраться с этими настройками, приходится действовать наобум и идти к желаемому результату путем проб и ошибок, тратя уйму времени и бумаги.
Приведем простой пример задачи. Вам нужно сделать фотографию на документы. Можно пойти двумя путями - сходить в фотоателье и сфотографироваться там, отдав за 4 маленьких фотографии, напечатанных на листе 10*15 см рублей 150. Второй вариант - сфотографироваться дома, подготовить к печати лист А4, на который втиснуть столько своих фотографий разных размеров, что хватит на несколько лет вперед. Потом идете в фотоателье и печатаете свое творение на листе А4 рублей за 30. Вроде бы с одного заказа выгода смехотворная, но если нужно распечатать фотографии сразу для нескольких человек (например, когда вся семья фотографируется на визу перед путешествием в другую странц), то можно сэкономить более существенную сумму. И это лишь один из примеров. Другой вопрос - как соблюсти размеры фотографий, чтобы на отпечатке они были ровно 4*5 см (или каким-то другим размером). Для того, чтобы подогнать размер отпечатка к требуемому, нужно разобраться в связи сантиметров , пикселей и точек на дюйм .
Пиксели
Пиксель - это одна точка, из которых состоит изображение. Также пикселем называется ячейка изображения на мониторе или жк-телевизоре. Рассмотрите монитор вблизи и вы увидите едва заметную сеточку, одна ячейка этой сетки - и есть пиксель. Фотография, которую вы скачали с фотоаппарата имеет разрешение несколько мегапикселей, то есть, например, 6000 пикселей в ширину и 4000 пикселей в высоту - это 6.000 * 4.000 = 24.000.000 пикселей или 24 мегапикселя. При просмотре на мониторе картинка автоматически масштабируется до разрешения монитора (около 2 мегапикселей). Если мы пытаемся увеличить масштаб (растягиваем фотографию), то до какой-то степени картинка растягивается без видимой потери качества, но потом на ней появляются характерные квадратики. Это происходит, когда реальное разрешение фотографии меньше того, что мы хотим видеть - размер пикселя на фотографии стал больше размера пикселя на мониторе.
Сантиметры
Что такое "сантиметр", я думаю, объяснять не нужно. В нашем случае в сантиметрах измеряется размер отпечатков фотографии. Обычно фотографии печатаются размером 10*15 см, но иногда используются более крупные форматы - 20*30 см (примерно соответствует формату А4), 30*45 см (А3) и больше. Вероятно, вы сталкивались с проблемой - вы нашли на каком-то сайте красивую фотографию и решили ее распечатать ее крупным форматом (например, 20*30 см), но распечатав, заметили, что качество отпечатка не слишком хорошее - конткры объектов получились немного размытыми. Что самое печальное - никакой обработкой эту фотографию не исправить. И все потому, что разрешение фотографии на сайте составляет, к примеру, 900*600 пикселей. То есть, на 1 пиксель на отпечатке будет иметь размер примерно 0.33 миллиметра - при этом сложно рассчитывать на "звенящую" резкость! И здесь появляется еще один параметр качества изображения, при помощи которого можно оценить качество отпечатка - DPI
DPI
DPI сокращение английской фразы Dots per Inch, что на русский переводится как точки на дюйм. Эта величина как раз показывает, сколько пикселей изображения приходится на один "погонный" дюйм при печати (дюйм равен 2.54 см). Еще есть величина DPC (точек на сантиметр), но она используется реже - как ни крути, все эти технологии печати пришли к нам оттуда, где в ходу дюймы, футы, фунты и т.д. Итак, вернемся к нашему примеру - картинке 900*600 пикселей, которую мы решили напечатать форматом 30*20 см. Переведем для удобства сантиметры в дюймы - получаем 11.8 * 8.9". Если поделить 900 пикселей на 11.8", то получаем разрешение печати 76 DPI . Это примерно соответствует разрешающей способности монитора с его "крупными" пикселями, поэтому картинка на экране смотрится хорошо. Но чтобы получить отпечаток приемлемого качества, нужно разрешение печати как минимум 150 DPI, а если хотим совсем хорошую детализацию, не менее 300 DPI. Чтобы обеспечить такое разрешение при печати 30*20 сантиметров, оригинальное цифровое изображение должно иметь разрешение 3540 * 2670 пикселей - это около 9 мегапикселей. Вот и нашли причину, почему фотографии, распечатанные "из интернета" выглядят нерезко и мутно. Теперь вернемся к нашему вопросу - как подогнать разрешение картинки, чтобы оно печаталось заданным размером? В качестве примера рассмотрим подготовку фотографий для документов.
Создание собственного фото на документы - пошаговая инструкция
Предположим, вам нужно сделать несколько фотографий размером 4*6 см и разместить их на листе 20*30 см. Как это сделать?
1. Берем исходное изображение, открываем его в Photoshop. Выбираем пункт меню "изображение" - "размер изображения". Перед нами открывается такое диалоговое окно:
В открывшемся диалоге мы видим две группы настроек - "размерность" и "размер печатного оттиска". В группе "размерность" отображаются размеры цифрового изображения в пикселях. Эти настройки не трогаем! В группе "размер печатного оттиска" устанавливаем нужный нам размер в сантиметрах (единицы измерения выбираются из выпадающих списков). В нашем случае это 4*6 см. Также задаем разрешение при печати - 300 пикселей на дюйм, этим мы обеспечим хорошее качество печати.
Меняя настройки размера печатного оттиска, мы видим, что размеры в пикселях тоже изменяются. Так и должно быть! После всего этого нажимаем кнопку ОК. Изображение меняется в размерах. Теперь нам нужно скопировать его - используем комбинацию клавиш:
- Ctrl + A (англ) - выделить все
- Ctrl + C (англ) - скопировать в буфер обмена
То, что скопировано в буфер обмена мы будем переносить на отдельный холст, см п.2. 2. Теперь нам надо создать новое изображение, которое будет соответствовать листу 20*30 см, который мы пойдем распечатывать в фотолабораторию. Выбираем меню "Файл", "Создать", появляется диалоговое окно:
Указываем размер фотобумаги, на которой будет выполняться печать (20 на 30 см) и выставляем разрешение в пикселях на дюйм такое же, какое имеет наша фотография - 300 DPI. Нажимаем ОК.
3. Появилось пустое изображение с прозрачным фоном. Нажимаем комбинацию клавиш Ctrl + V и вставляем наше первое изображение на новый холст. Это будет выглядеть примерно так:
Изображение вставлено как новый слой. Передвигаем его в верхний левый угол, затем выбираем меню "Слой", "Создать дубликат слоя".
На холсте появится еще одна такая же картинка, изначально она "лежит" на исходном слое. Перемещаем ее и ставим рядом. Таким же образом создаем столько дубликатов слоев, сколько нам нужно. После этого выполняем сведение слоев (меню "Слой", "Выполнить сведение").
Сохраняем картинку в формате JPEG, копируем на флешку и идем в фотолабораторию. Оператору говорим следующее - "напечатайте это изображение форматом 20*30 см с разрешением 300 DPI без масштабирования ". При этом маленькие картинки будут иметь точно такой размер, какой мы для них указали - в нашем случае 4*6 сантиметров. При себе желательно иметь линейку, чтобы проверить размеры отпечатков.
Конвертер длины и расстояния Конвертер массы Конвертер мер объема сыпучих продуктов и продуктов питания Конвертер площади Конвертер объема и единиц измерения в кулинарных рецептах Конвертер температуры Конвертер давления, механического напряжения, модуля Юнга Конвертер энергии и работы Конвертер мощности Конвертер силы Конвертер времени Конвертер линейной скорости Плоский угол Конвертер тепловой эффективности и топливной экономичности Конвертер чисел в различных системах счисления Конвертер единиц измерения количества информации Курсы валют Размеры женской одежды и обуви Размеры мужской одежды и обуви Конвертер угловой скорости и частоты вращения Конвертер ускорения Конвертер углового ускорения Конвертер плотности Конвертер удельного объема Конвертер момента инерции Конвертер момента силы Конвертер вращающего момента Конвертер удельной теплоты сгорания (по массе) Конвертер плотности энергии и удельной теплоты сгорания топлива (по объему) Конвертер разности температур Конвертер коэффициента теплового расширения Конвертер термического сопротивления Конвертер удельной теплопроводности Конвертер удельной теплоёмкости Конвертер энергетической экспозиции и мощности теплового излучения Конвертер плотности теплового потока Конвертер коэффициента теплоотдачи Конвертер объёмного расхода Конвертер массового расхода Конвертер молярного расхода Конвертер плотности потока массы Конвертер молярной концентрации Конвертер массовой концентрации в растворе Конвертер динамической (абсолютной) вязкости Конвертер кинематической вязкости Конвертер поверхностного натяжения Конвертер паропроницаемости Конвертер паропроницаемости и скорости переноса пара Конвертер уровня звука Конвертер чувствительности микрофонов Конвертер уровня звукового давления (SPL) Конвертер уровня звукового давления с возможностью выбора опорного давления Конвертер яркости Конвертер силы света Конвертер освещённости Конвертер разрешения в компьютерной графике Конвертер частоты и длины волны Оптическая сила в диоптриях и фокусное расстояние Оптическая сила в диоптриях и увеличение линзы (×) Конвертер электрического заряда Конвертер линейной плотности заряда Конвертер поверхностной плотности заряда Конвертер объемной плотности заряда Конвертер электрического тока Конвертер линейной плотности тока Конвертер поверхностной плотности тока Конвертер напряжённости электрического поля Конвертер электростатического потенциала и напряжения Конвертер электрического сопротивления Конвертер удельного электрического сопротивления Конвертер электрической проводимости Конвертер удельной электрической проводимости Электрическая емкость Конвертер индуктивности Конвертер Американского калибра проводов Уровни в dBm (дБм или дБмВт), dBV (дБВ), ваттах и др. единицах Конвертер магнитодвижущей силы Конвертер напряженности магнитного поля Конвертер магнитного потока Конвертер магнитной индукции Радиация. Конвертер мощности поглощенной дозы ионизирующего излучения Радиоактивность. Конвертер радиоактивного распада Радиация. Конвертер экспозиционной дозы Радиация. Конвертер поглощённой дозы Конвертер десятичных приставок Передача данных Конвертер единиц типографики и обработки изображений Конвертер единиц измерения объема лесоматериалов Вычисление молярной массы Периодическая система химических элементов Д. И. Менделеева
1 сантиметр [см] = 37,7952755905511 пиксель (X)
Исходная величина
Преобразованная величина
твип метр сантиметр миллиметр символ (X) символ (Y) пиксель (X) пиксель (Y) дюйм пайка (компьютер) пайка (типографская) пункт НИС/PostScript пункт (компьютерный) пункт (типографский) среднее тире цицеро длинное тире пункт Дидо
Подробнее о единицах, используемых в типографике и для обработки цифровых изображений
Общие сведения
Типографика изучает воспроизведение текста на странице и использование его размера, гарнитуры, цвета и других внешних признаков для того, чтобы текст лучше читался и красиво выглядел. Типографика появилась в середине 15-го века, с появлением печатных станков. Расположение текста на странице влияет на наше восприятие - чем лучше его расположить, тем больше вероятность, что читатель поймет и запомнит то, что написано в тексте. Некачественная типографика, наоборот, делает текст плохо читаемым.
Гарнитуры подразделяют на разные виды, например на шрифты с засечками и без. Засечки - декоративный элемент шрифта, но в некоторых случаях они облегчают чтение текста, хотя иногда происходит и наоборот. Первая буква (голубого цвета) на изображении набрана шрифтом с засечками Бодони. Одна из четырех засечек обведена красным цветом. Вторая буква (желтая) - набрана шрифтом Футура без засечек.
Существует множество классификаций шрифтов, например, согласно времени их создания, или стилю, популярному в определенное время. Так, есть шрифты старого стиля - группа, которая включает самые старые шрифты; более новые шрифты переходного стиля ; современные шрифты , созданные после переходных шрифтов и до 1820-х годов; и, наконец, шрифты нового стиля или модернизированные старые шрифты , то есть, шрифты, выполненные по старому образцу в более позднее время. Эта классификация в основном используется для шрифтов с засечками. Существуют и другие классификации, основанные на внешнем виде шрифтов, например на толщине линий, контрасте между тонкими и толстыми линиями, и форме засечек. В отечественной печати существуют свои классификации. Например, классификация по ГОСТу группирует шрифты по наличию и отсутствию засечек, утолщению в засечках, плавному переходу от основной линии к засечке, закруглению засечки, и так далее. В классификациях русских, а также других кириллических шрифтов часто бывает категория для старославянских шрифтов.
Главная задача типографики - регулируя размер букв и выбирая подходящие шрифты, разместить текст на странице так, чтобы он хорошо читался и красиво выглядел. Существует ряд систем для определения размера шрифта. В некоторых случаях, одинаковый размер букв в типографских единицах, если они отпечатаны в разных гарнитурах, не означает одинаковый размер самих букв в сантиметрах или дюймах. Эта ситуация более подробно описана ниже. Несмотря на вызванные этим неудобства, применяемый на данный момент размер шрифта помогает дизайнерам аккуратно и красиво скомпоновать текст на странице. Это особенно важно в верстке.
В верстке необходимо знать не только размер текста, но и высоту и ширину цифровых изображений, чтобы разместить их на странице. Размер можно выразить в сантиметрах или дюймах, но существует также специально предназначенная для измерения размера изображений единица - пиксели. Пиксель - это элемент изображения в виде точки (или квадрата), из которых оно состоит.
Определение единиц
Размер букв в типографике обозначается словом «кегль». Существует несколько систем измерения кегля, но большинство из них основано на единице «пайка» в американской и английской системе измерения (англ. pica), или «цицеро» в европейской системе измерения. Название «пайка» иногда пишут как «пика». Существуют несколько видов пайки, которые слегка отличаются по величине, поэтому, используя пайку, стоит помнить, какая именно пайка имеется в виду. Изначально в отечественной печати использовали цицеро, но сейчас часто встречается и пайка. Цицеро и компьютерная пайка похожи по величине, но не равны. Иногда цицеро или пайку напрямую используют для измерения, например, чтобы определить размер полей или колонок. Чаще, особенно для измерения текста, используют производные единицы, полученные от пайки, такие как типографские пункты. Размер пайки определяется в разных системах по-разному, как описано ниже.
Буквы измеряют так, как показано на иллюстрации:
Другие единицы
Хотя компьютерная пайка постепенно вытесняет другие единицы, и возможно заменит более привычные цицеро, наряду с ней также используются другие единицы. Одна из таких единиц - американская пайка Она равна 0,166 дюйма или 2.9 миллиметра. Существует еще и типографская пайка . Она равна американской.
В некоторых отечественных типографиях и в литературе о печати до сих пор используют цицеро - единицу, которая широко применялась в Европе (за исключением Англии) до появления компьютерной пайки. Один цицеро равен 1/6 французского дюйма. Французский дюйм немного отличается от современного дюйма. В современных единицах один цицеро равен 4,512 миллиметра или 0,177 дюйма. Эта величина почти равна компьютерным пайкам. Один цицеро - это 1,06 компьютерных пайки.
Круглая шпация (em) и полукруглая шпация (en)
Описанные выше единицы определяют высоту букв, но существуют также единицы, обозначающие ширину букв и символов. Круглая и полукруглая шпации - как раз такие единицы. Первая также известна как кегельная шпация или em, от английского, обозначающего букву M. Ее ширина исторически равнялась ширине этой английской буквы. Аналогично, полукруглая шпация, равная половине круглой - известна под названием en. Сейчас эти величины не определяют с помощью буквы M, так как эта буква может иметь разный размер у разных шрифтов, даже если кегль одинаков.
В русском языке используются короткое и длинное тире. Для обозначения диапазонов и интервалов (например, во фразе: «возьмите 3–4 ложки сахара») используется короткое тире, называемее также тире-en (англ. en dash). Длинное тире используется в русском языке во всех остальных случаях (например, во фразе: «лето было коротким, а зима - длинной»). Оно называется также тире-em (англ. em dash).
Проблемы с современными системами единиц
Многим дизайнерам не нравится нынешняя система типографских единиц, основанная на пайках или цицеро, а также на типографских пунктах. Главная проблема в том, что эти единицы не привязаны к метрической или имперской системе мер, и в то же время их приходится использовать вместе с сантиметрами или дюймами, в которых измеряется размер иллюстраций.
Кроме этого, буквы, выполненные в двух разных гарнитурах, могут сильно отличаться размером, даже если они одинакового размера в типографских пунктах. Это вызвано тем, что высота буквы измеряется как высота литерной площадки, которая не связана напрямую с высотой знака. Это затрудняет задачу дизайнеров, особенно если они работают с несколькими шрифтами в одном документе. На иллюстрации - пример этой проблемы. Размер всех трех шрифтов в типографских пунктах одинаков, но высота знака везде разная. Некоторые дизайнеры для решения этой проблемы предлагают измерять кегль как высоту знака.
Текст
Родион Данилов
Подбор фотографий для социальных сетей - дело важное, хотя многие его недооценивают. Именно они представляют вас в сети, и именно глядя на них, большинство составляет самое первое впечатление о вас. Мы рассмотрели то, как можно оптимизировать фотографии в Facebook, Twitter и «ВКонтакте».
1 Facebook
При загрузке фотографий профайла в «Фейсбуке» они обрезаются в квадрат, поэтому лучше всего использовать изображение, которое уже имеет правильное соотношение сторон. Фото отображается на странице с размерами 160х160 пикселей, но загрузить вы должны картинку не менее 180х180 пикселей. Поэтому откройте фото в доступном для вас редакторе и задайте размеры 180х180 пикселей.
Размеры фотографии на обложке страницы «Фейсбука» - 851х315 пикселей, в то время как минимальный требуемый размер для неё составляет 399х150 пикселей. Стоит учитывать, что такая маленькая картинка растянется и будет выглядеть ужасно, поэтому подбирайте соответствующее фото и обрежьте его правильно.
Если вы задумали сделать так, чтобы обе картинки - фото профайла и обложка - представляли единое целое, учитывайте, что фото профайла встаёт на 23 пикселя правее от левого края обложки и на 210 пикселей ниже от верхнего края обложки.
Существует множество веб-сервисов, позволяющих сделать оригинальные обложки для вашей страницы в «Фейсбуке».
Pic Scatter даёт возможность создать коллаж из фотографий для использования его в качестве обложки. Вы можете сгенерировать его случайным образом или выбрать конкретный альбом.
Profile Picture Maker"s Timeline Cover Banner - довольно удобный инструмент для создания кастомной обложки со множеством функций для редактирования.
ace It Pages - бесплатный сервис позволяет загрузить свои картинки, «поиграть со шрифтами» и даже добавить в обложку ссылки на другие социальные сети.
Facebook поддерживает загрузку форматов JPG, GIF и PNG. JPEG, как правило, используется при загрузке картинок со смешанными тонами (фото и рисунки) , а PNG лучше подходит для графичных изображений, текстовых композиций и логотипов. Однако Facebook конвертирует все загружаемые изображения в JPG.
Чтобы фотографии загружались на странице быстрее, разработчики соцсети советуют использовать JPG-файлы в цветовом пространстве sRGB. Рекомендуемые размеры для загружаемых в альбом фотографий - 600х400 пикселей. При изменении размера в фоторедакторе выставьте разрешение (DPI) в значении 72.
2 Twitter
Twitter отображает профайл-фото совсем небольшим, поэтому очень важно подобрать то изображение, которое хорошо выглядит в миниатюре. Twitter кадрирует фотографию квадратом, так что лучше масштабировать её перед загрузкой надлежащим образом. В то время как максимальный размер файла для аватара в Twitter составляет 2 МБ, в профайле отобразится картинка размером 73х73 пикселя, и а в твитах и того меньше - 48х48 пикселей.
Изображение, которое используется в Twitter в качестве обложки, имеет рекомендованный масштаб 1200х600 пикселей, а размер файла ограничен 5 мегабайтами. Имейте в виду, что ваше имя в Twitter, никнейм, биография, месторасположение и URL будет отображаться поверх обложки, поэтому выбирайте картинку, на которой будет хорошо виден текст.
Для того чтобы сделать идеальную обложку, сочетающуюся с профайл-фото, вы можете использовать специальный веб-инструмент, например,