Как постить картинки в блог

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

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

Картинки бывают горизонтальные и вертикальные. Для блога в ЖЖ больше подходят горизонтальные картинки, так как пост с такими картинками в ленте просмотра занимает меньше места, чем с вертикальными картинками.

Ширина картинки измеряется в пикселях. Какую же ширину выбрать? Лично я для горизонтальных картинок выбираю ширину 800 или 560, для вертикальных картинок 560. Почему 560? Это типовой размер видео для постов ЖЖ и примерно такая же ширина у плейлистов с музыкой. С единой шириной смотрится аккуратнее и красивее.

Размер картинки в посте можно изменить с помощью кода HTML (об этом далее), но лучше заранее обработать картинки в каком-нибудь фоторедакторе и уменьшить (увеличить) их до необходимого размера.

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

И вот представьте, что вы пытаетесь открыть пост из 20-30 картинок весом по 1,5-2 мегабайта каждая. У многих людей возникнут проблемы с загрузкой, особенно на мобильных устройствах с медленным Интернетом.

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

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

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

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

Прежде всего нам нужен адрес картинки в Интернете (на фотохостинге). Я буду использовать для наглядности АДРЕС КАРТИНКИ из этого поста https://img-fotki.yandex.ru/get/12/185889951.27/0_102ab0_e810a41a_orig.jpg

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

Почему не стоит хранить картинки в самом ЖЖ? Есть такие причины:

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

Обычно используемые для блога картинки имеют расширение JPG, PNG или GIF. Есть и более экзотические, но с ними лучше не связываться. GIF — это картинки с анимацией и их размер кодом лучше не редактировать, для этого есть специальные программы!

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

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

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

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

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

width=»ШИРИНА» — это ширина картинки в пикселях

height=»ВЫСОТА» — это высота картинки в пикселях

border=»1″ — это размер рамки в пикселях, можно сделать 2, 3 и т.д., цвет будет, как у шрифта в дизайне блога.

style=»border:5px solid red;» — это толщина и цвет рамки, который вы сами можете задать. В этом примере 5px — толщина рамки, solid red — это указание цвета, здесь red — это код красного цвета, можно использовать другие типовые наименования типа teal, а если хотите, то обычный HTML код цвета типа #006699, тогда будет например solid #006699

title=»ОПИСАНИЕ КАРТИНКИ» — это пояснительный текст, который появится при наведении курсора на картинку. Я это никогда не использую, потому что меня раздражают всплывающие надписи, тем более и так все понятно, но можете и сделать такое.

Возьмем исходную картинку, адрес ее указан выше и попробуем отредактировать. В исходном варианте ширина 800, высота 450, рамок нет. Уменьшаем ее например до ширины 400 и высоты 225 и делаем рамку толщиной 5, пояснительный текст «Художница»

Нам следует через пробел добавить следующие коды:

width=»400″ height=»225″ border=»5″ title=»Художница»

Есть еще коды для обтекания картинки текстом:

align=left — картинка слева (left), текст справа
align=right — картинка справа (right), текст слева
hspace=10 — расстояние между текстом и картинкой по горизонтали
vspace=10 — расстояние между текстом и картинкой по вертикали

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

Делаем картинку шириной 400, высотой 225, размещенную в посте слева, текст обтекает сбоку и по вертикали на расстоянии 10 пикселей.

Для экспериментов лучше всего использовать какой-нибудь старый пост, сделать его доступным только для вас и начать проверять разные коды. Лично я обычно использую типовую сборку кодов width=»560″ height=»360″ border=»1″ и затем подгоняю картинку по высоте.

Если вы собираетесь отправлять свои посты в топ, то знайте, что пост в топе ЖЖ показывается с картинкой если:

— Картинка шириной 900px или более
— Соотношение ее сторон примерно 3:2
— Она находится в первых 400 символах поста
— Расположена до ката
— Не анимированная (не GIF)
— Ее фотохостинг разрешен ЖЖ (Яндекс разрешен, Фастпик и Радикал тоже, если ничего не изменилось)

Я не рекомендую пользоваться редактированием картинок, встроенным в редактирование поста. Если вы планируете заниматься блогом, то лучше раз и навсегда научитесь пользоваться редактированием с помощью кодов HTML.

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

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