Размеры картинок на сайте

Фотографии обрезаются по размеру дизайна на каждой странице отдельно.

Первое и очень важное!

Следует использовать файлы геометрическим размером не менее 1920 пикселей по ширине.

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

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

В момент загрузки фотографии в систему, сразу изготавливаются несколько копий разного размера и разных пропорций. Иногда до 30 штук разных файлов.

Обрезка производится от центра.  Именно поэтому необходимы файлы большого размера. Из большого всегда можно вырезать любой размер.

Вот список основных размеров на тестовом сайте. На вашем сайте список будет  другой. Это зависит напрямую от дизайна.

thumbnail — 150 x 150 (cropped)
medium — 300 x 300
medium_large — 768 x 9999
large — 1024 x 1024
1536×1536 — 1536 x 1536
2048×2048 — 2048 x 2048
bigpic — 2560х1920
large-rect-horizontal — 1390 x 782 (cropped)
small-square — 560 x 560 (cropped)
small-rect-horizontal — 560 x 420 (cropped)
small-rect-vertical — 560 x 747 (cropped)
medium-square — 900 x 900 (cropped)
medium-rect-horizontal — 900 x 675 (cropped)
medium-rect-vertical — 840 x 1120 (cropped)
fullscreen — 2560 x 2560

Вот как прописана картинка на странице новости. Одна единственная картинка.

<a href="https://abc.ru/611-pogoda-na-21-noyabrya"><div class="thumbnail-container animate-lazy size-715"><img loading="lazy" decoding="async" width="350" height="250" src="https://abc.ru/wp-content/uploads/2024/11/pap_2257-kopiya-350x250.jpg" class="attachment-jnews-350x250 size-jnews-350x250 wp-image-612 wp-post-image lazyautosizes lazyloaded " alt="Погода на 21 ноября" sizes="320px" data-mwl-img-id="612" data-src="https://abc.ru/wp-content/uploads/2024/11/pap_2257-kopiya-350x250.jpg" data-srcset="https://abc.ru/wp-content/uploads/2024/11/pap_2257-kopiya-350x250.jpg 350w, https://abc.ru/wp-content/uploads/2024/11/pap_2257-kopiya-120x86.jpg 120w, https://abc.ru/wp-content/uploads/2024/11/pap_2257-kopiya-750x536.jpg 750w, https://abc.ru/wp-content/uploads/2024/11/pap_2257-kopiya-1140x815.jpg 1140w" data-sizes="auto" data-expand="700" srcset="https://abc.ru/wp-content/uploads/2024/11/pap_2257-kopiya-350x250.jpg 350w, https://abc.ru/wp-content/uploads/2024/11/pap_2257-kopiya-120x86.jpg 120w, https://abc.ru/wp-content/uploads/2024/11/pap_2257-kopiya-750x536.jpg 750w, https://abc.ru/wp-content/uploads/2024/11/pap_2257-kopiya-1140x815.jpg 1140w"></div></a>

 

Проще говоря, изображения надо подбирать так, чтобы при любой обрезке они не теряли привлекательности. Иногда, подбирать специально.

+79226378080
Выделено памяти сервера: 20.17MB | MySQL запросов в базу: 120 | Страница создана за 0,294 sec.