Возьмите изображение и нарежьте на полоски так чтоб у каждой части изображения можно было подрезать боковую
область прилегающую к тексту. Сократив ширину каждой части, разместите изображения на странице и назначьте стиль
img { float: left; clear: left; }. Естественно, это пример, и в
реальном коде HTML и CSS, вероятно, понадобится назначить подходящий класс или создать селектор. left
обозначает позиционирование по левому краю родительского контейнера.
Чем меньше будет высота полосок, тем более плавным будет обтекание, но делать высоту изображений меньше, чем шаг строк обтекающего текста, вряд ли разумно. Также, следует понимать, что поиск по изображениям в поисковых системах окажется бесполезным. Чрезмерно тонкая нарезка ступенчатого изображения, кроме прямых затрат на создание приведёт к повышению нагрузки на сервер и браузер посетителя, что увеличит вероятность ломки дизайна сайта.
Альтернативным решением может быть использование исходного изображения в качестве фона контейнера или слоя (z-index), а обтекание текстом реализовать, добавив плавающие блоки, как сделано на этой странице. Такой вариант будет более надёжным, лёгче для сервера и браузера, но некоторым придётся чуть глубже освоить CSS. Кроме этого, старые браузеры могут не поддерживать позиционирование фона, и лучше, в расчёте на аудиторию с подобными браузерами, использовать дизайн слоями.