На что смотреть в списке
- Всё, что заметно шире места показа. Фотография в 4000 px в колонке шириной 600 px скачивает примерно впятеро больше данных, чем нужно.
- Разные соотношения в наборе, который должен быть одинаковым. Миниатюры 4:3 и 16:9 в одной сетке без обрезки не выровняются никогда.
- Мегапиксели, а не вес файла, когда что-то тормозит. Размер в памяти — четыре байта на пиксель, и он никак не связан с тем, насколько хорошо файл сжался.
Соотношения, которые стоит узнавать
| Соотношение | Откуда оно | | --- | --- | | 16:9 | Видео, большинство экранов, обложки YouTube | | 4:3 | Старые камеры, многие сенсоры телефонов, слайды | | 3:2 | Плёнка 35 мм и большинство камер со сменной оптикой | | 1:1 | Аватары, сетки товаров, Instagram | | 1,91:1 | Карточки Open Graph и Twitter |
Ничего не загружается
Каждый файл декодирует ваш браузер, чтобы прочитать заголовок. Это вся операция — без выгрузки, без сервера, и она работает офлайн.
Вопросы
Почему соотношение показано как 16:9, а не 1,78?+
Потому что именно так его задают — в брифе, в требованиях площадки, в правиле CSS aspect-ratio. Дробь сокращается до целых, где это возможно; после 40:40 сокращённая форма перестаёт читаться, и выводится десятичная.
Можно проверить целую папку?+
В пределах лимита пакета на зоне загрузки: один файл без аккаунта, сорок — с бесплатным. В этом и смысл: заметить единственную картинку шириной 6000 px гораздо проще в списке, чем открывая по одной.
Учитывается ли ориентация из EXIF?+
Размеры берутся такими, какими их декодировал браузер, а он уже учёл флаг ориентации. Это и есть то, что браузер отрисует, — значит, именно эти числа важны для вёрстки.
Зачем нужны мегапиксели?+
Они предсказывают расход памяти и стоимость обработки лучше, чем любая из сторон. Браузер держит декодированное изображение по четыре байта на пиксель, поэтому фотография на 24 МП занимает около 96 МБ оперативной памяти независимо от того, насколько мал был JPEG.