Азы сайтостроения - иллюстрации
Пришло очередное письмо с вопросом на электронную почту, хотя я настоятельно и рекомендую задавать их на нашем Форуме. Итак, Ильяс Хусаинов из Астаны ставит такой вопрос: "Я на сайт регулярно добавляю статьи, сайт автомобильной тематики и здесь необходимы фотографии, как минимум 2-3-4. И вот с этим у меня проблемы. Фотографии все делаю сам и обрабатываю их в редакторе. Но как быть с размерами? С одной стороны хочется донести читателям максимум информации и тут большие и четкие фото лучше, но с другой из-за этого страницы открываются медленно: большие фото = большой размер... Какой компромисс здесь есть? Читал информацию в интернете - мнения самые разные, да еще SEO-господа очень любят злоупотреблять специальными терминами и жаргоном, который понятен им одним... ИИ тоже дает разные и противоречивые советы... Мне нравятся статьи на вашем сайте - все понятно, максимальный охват проблемы и нормальный язык, понятный человеку. Помогите!"
Ответ WASP.kz - важность фото
Не будем повторять то, о чем уже не раз сказано: иллюстрации на сайте сегодня крайне важны! Причем не абы-кабы, а по делу и оригинальные (авторские). Помимо того, что статья резко повышается в ценности, полезности для реального человека-читателя, это хорошо и для SEO - "поиск / переход по фото" очень мощный инструмент!
Размер фото - камень преткновения
И правильно заметил Ильяс, здесь мы натыкаемся на противоречивые требования: с одной стороны большое и качественное фото, схема, чертеж, рисунок - безусловный плюс и эксклюзив. Но с другой стороны такие иллюстрации весят прилично, порою до мегабайта, а то и больше... и это становится проблемой - скорость загрузки страницы очень важна, особенно для мобильных девайсов. Wi-Fi далек от идеала и современные реалии могут преподнести вам сюрприз - страница с такими изображениями долго или бесконечно открывается... растут число отказов...
Старые уловки не работают
Эта проблема известна с самых дальних времен, когда еще был медленный коммутируемый интернет-доступ, он же Dialup. И создатели самых первых веб-сайтов прибегали к простому, 100% эффективному и на тот момент изящному решению: на странице размещалось маленькое фото (превью), кликнув по которому открывалось оригинальное большое изображение. Статья быстро грузилась, а далеко не всем нужны огромные фотографии.
Этот прием используется и по сей день. Он работает в принципе точно так же, но... увы, поисковики со своими алгоритмами, со своим искусственным интеллектом, сегодня тупят - они не понимают, что у вас на сайте большие и качественные фото, что может быть реальной ценностью. Они видят маленькие пережатые картинки, порядка 400х400 пикселей и весом по 30 Кб... и потому в картинках вам место будет в последних рядах. Ваши уникальные картинки никто не увидит.
Они и раньше тупили, но раньше люди и на текст обращали внимание, можно сказать - это приметы последнего времени, к сожалению... читателей нет, сегодня текст не доходит (читать могут, но понять написанное нет) и не запоминается он для них, люди предпочитают "смотреть картинки" - взрослые серьезные люди, уровня дошколят (помните, были такие книжки в серии "книжка-картинка")... Сегодня картинки реально ценятся выше, а видео и подавно!
Современная практика - грамотная и безграмотная
Многие современные движки сайтов уже имеют встроенные плагины работы с такими изображениями: вы вставляете фото, а он клонирует их с разными размерами, которые "на лету" подгружаются на сайт, в зависимости от размеров монитора / дисплея / экрана. И вроде бы хорошо, не так ли? Одна только эта фишка принесла тому же самому WordPress весомую долю популярности. Но - нет, стоп! Это безграмотность и результат даже хуже, чем грузить вообще не обработанные фото на сайт.
Просто скачайте копию своего сайта и посмотрите, сколько весят теперь эти ваши фото. Вы тщательно обрабатывали эти изображения в программе Фотошоп... добивались "золотой серединки" - максимум качества при минимально возможном весе... А этот "чертов плагин" пережал, исковеркал всё: отличное фото в 100 Кб теперь стало весить 500 Кб... да что там, маленькие превьюшки 200х200 весят столько же!
Когда я такое обнаружил на одном моем сайте, на нем уже было около 500 статей, а значит несколько тысяч изображений. Переделывать все это вручную - каторга!
И это стало одной из причин, почему я отказался от WordPress.
Какой же подход можно считать грамотным? Лично я на данный момент использую неудобную (для меня), но приемлемую схему, данные рекомендации опытным путем я вывел для сайтов технической тематики:
- Иллюстрации в статье, детальное фото, отдельные узлы, элементы, скриншоты ~ 1200 х 800 пикселей, весом до 150 Кб, максимум 250-300 Кб. Если изображение важное, то под ним ссылка: Щелкните, чтобы открыть полноформатное изображение (в скобках размеры и вес) - ссылка откроется в новом окне.
- Чертежи или сложные качественные схемы, разрешение 1600-2000 пикселей, открываются в отдельном окне. По весу здесь тоже лучше не превышать 350-400 Кб.
- Уходим от JPG/JPEG и GIF/PNG, используем современные форматы: WebP - качество как у jpeg + прозрачность, но изображение на 30% легче. Или AVIF - сжимает картинку на 50% эффективнее jpeg, сохраняя качество. Взамен gif и png используйте SVG - чертежи, схемы, графики, иконки. Формат TIFF используем по-прежнему, но не в браузере, а как исходник, типа - "Скачайте".
В статье я часто делаю примечание: "Все представленные здесь фото есть у Автора в исходном файле - большой размер и высокое качество. Если вам это изображение нужно, напишите в комментариях, в ЛС или по форме обратной связи - я их выложу". Так вы повышаете, и ценность статьи и получаете доверие читателей, экономите место на хостинге, сайт не перегружен и можете получать дополнительные данные по аналитике - что интересует читателей и что востребовано.
Современные требования и рекомендации 2026-2027 гг. Поисковики и разные авторитетные мнения говорят нам, что сегодня просто необходимо развивать адаптивность: генерация копий одного изображения под разные размеры экранов. Но, как и говорил, в примере с WordPress, подобное есть и на других движках, здесь надо все смотреть и порою самостоятельно править: пережимать самому эти сгенерированные копии, и закидывать их через FTP на сайт.
Еще есть такое - Отложенная загрузка или Lazy Loading, изображения подгружаются по мере прокрутки страницы сайта. Интересная, но тоже не однозначная фича.
Как итог - выбираем компромисс
Да, многие фото можно по-прежнему выкладывать на сайт в старых форматах jpg/jpeg или gif/png - потому как это и привычнее и проще - все редакторы под рукой. Но это если изображений в статье немного и они небольшого размера. Большие фото или чертежи лучше все же конвертировать в современные форматы.
Если необходимо очень большое изображение, то лучше его загружать отдельным файлом и правильно оформлять гиперссылку - с околоссылочным текстом и тегом title, чтобы поисковики правильно оценили этот файл.
Чтобы ваш трафик "не утекал", не делайте ссылки на изображения расположенные на сторонних ресурсах.
Михаил Дмитриенко
специально для WASP.kz
05.10.2026 |
