Как вставить картинку внутрь текста

Эта заметка - ответ на вопрос читателя: как заставить текст обтекать картинку, чтобы получилось так же, как у меня в анонсах.

Пример ↓

Этим оформлением анонсов я пользуюсь постоянно.

Рецепт.
Первое, это само изображение. Чтобы оно смотрелось нестандартно и современно, его следует слегка повернуть (заимствован опыт у зарубежных коллег). Сделать это можно в любом графическом редакторе, типа Photoshop или Gimp.

По старой привычке я работаю только с форматом png, чтобы не задумываться о разного рода артефактах после компрессии изображения, которые присуще jpg'ам. Дело в том, что при импорте картинок в блог (точнее в Picasa), движок Blogger'а создаёт thumbnails, маленькие картинки предпросмотра, которые зачастую выглядят не лучшим образом после сильного сжатия. Если изображение было ещё до этого сильно сжато компрессором jpg'а, то эти эти картинки предпросмотра после вмешательства блоггера, который их при создании тоже жмёт, становятся ещё хуже. Отсюда вывод - оригинал должен быть хорошего качества.

Второе - это режим написания поста "Изменить HTML". Я пользуюсь только им, потому что графический режим порой провоцирует кучу ошибок внутри поста и предназначен для лентяев. Если мне надо сменить цвет текста и т.д., я лучше открою новый пост, там всё сделаю мышкой, а в статью скопирую готовый html-результат. Так я могу контролировать правильность кода внутри поста.

Чтобы добиться обтекания текстом изображения, как на скриншоте, нужно в контейнер этой картинки добавить правило стиля: float:left; text-align:left.

То есть если вы умолчанию вставляете изображение "по центру", то получаете в html представлении такой код:

Который нужно привести к такому виду:

Остальное, включая атрибуты (alt, title) и пропорции, настраиваются по вкусу.
Конечно картинку расположить в тексте можно и "руками" в режиме "Создать", передвигая её на нужное место мышью. Но то, что получатся - очень часто, мягко говоря, не соответствует ожиданиям :).