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

И так давайте приступим к рассмотрению данных ошибок более детально!

Картинки разных размеров

К примеру в одной новости размер картинки 150x150 пикселей, в другой 250x150 пикселей, а в третьей 175x132 пикселя:

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

Непропорциональное уменьшение картинки

Вторая очень распространённая ошибка, это непропорциональное уменьшение картинки. Когда благодаря CSS стилям или графическим редактором, берётся картинка размеров 400x300 пикселей и уменьшается до 150x200 пикселей, в результате чего картинка сплющивается:

чтобы увидеть разницу более лучше, давайте взглянем на оригинал:

Увеличить маленькую картинку

Аналогичная ошибка и с маленьким изображением, автор блога увеличивает картинку размером 100x100 пикселей, до 200x200 пикселей, в результате чего картинка выглядит размыто и не четко:

давайте взглянем на оригинал:

Установлена картинка по центру

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

спрашивается, для кого мы оставили это пустое место? Может быть для Француза Жака?

В таких ситуациях следует:

- либо уменьшить картинку и пускай текст её обтекает
- либо увеличить картинку на всю ширину ячейки

Картинка не выравнена по сетке

Суть ошибки заключается в том, что автор блога устанавливает картинку, которая имеет чуть меньший размер, чем основной контейнер новостей:

Или ещё чего хуже, картинка прижата к одной из сторон ячейки новостей, но при этом противоположная сторона имеет пустое место:

Картинка выходящая за рамки

Когда картинка слишком большого размера выходит за рамки основного контейнера новостей:

Текст прижат в плотную к картинки

Самая распространённая ошибка которую можно встретить на различных блогах:

для тех кто не знает как прописать отступы между картинкой и текстом, я уже написал статью для решение данной задачи:

Разновидность данной ошибки можно разделить на два пункта:

1. слишком маленькие отступы в 3-5 пикселя
2. слишком большие отступы в 35-60 пикселей

старайтесь найти золотую середину, к примеру 15-30 пикселей, экспериментируйте.

Текст не обтекает картинку

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

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

Большой размер картинки

Не используйте картинки которые занимают 60% всей ширины основного контейнера, так как читать текст в таком случает будет не очень удобно:

Вам следует либо уменьшить размер картинки, либо увеличить его на всю ширину основного контейнера, как это было сделано выше.

Маленький размер картинки

Аналогичная ситуация и с маленькими картинками в новостях, не надо их мельчить, это вам не информер где основную роль играет заголовок новости, а картинка ему помогает:

Если не знаете какой размер картинки выбрать, то попробуйте поэкспериментировать и задать им следующие размеры, выбрав подходящий:

200x100, 200x200, 250x100, 300x100, 310x120 и т.д

Большой и маленький вес картинки

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

Когда вы размещаете картинки в блог, обратите внимание на их вес, так как вес 10-и картинок может составлять 1,2 мб, а после сжатие уже 300кб.

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

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

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

Попробуйте уменьшить вес картинки благодаря онлайн сервису TinyPNG.

Не уникальная картинка

Пожалуй это самая распространения ошибка во всём интернете, когда автор блога берёт со страниц Яндекс или Google Картинки нужное ему изображение и устанавливает его в новостях своего блога:

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

Кстати говоря, читайте статью 5 способов проверить картинку на уникальность

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