РАЗМЕР ФОТОГРАФИЙ НА САЙТЕ

Когда я только собирался сделать на своем первом сайте раздел фотографий, я стал думать о том, какого же размера фото размещать на сайте? С одной стороны, они должны быть хорошо видны, с другой - не быть большого размера и веса (интернет тогда был совсем медленным), да и не хотелось бесплатно ставить в сеть большие хорошие картинки...

Кроме того, я делал сайт на чистом html, там не было никаких плагинов, скриптов, галерей и т.д., а значит, миниатюры надо было размещать отдельно и тоже думать, какого они будут размера.

Тогда было принято использовать красивые фото в качестве фона рабочего стола на компьютерах, а мобильного интернета почти не было. Учитывая, что самое распространенное разрешение экранов тогда было 1024x768, я именно этот размер и сделал основным для горизонтальных фотографий. Для вертикальных было сложнее, но обычно я ставил размер по вертикали 800, а по горизонтали - как получится. Потом стал ставить меньшие размеры (высота 800 выходила за предел экрана). В общем, единства не было и была каша.

Так продолжалось долго, почти до сего времени (2018 год). С тех времен интернет изменился, появилась мода на просмотр фото в виде слайдов, появились мобильники с крошечными экранами, пропала мода на обои на рабочем столе. Увеличились размеры экранов, да и вариаций этих размеров стало множество.

Посетители с десктопов стали сетовать на маленькие изображения, а посетители с мобильников - на неудобство просмотра. Конечно, я давно сделал возможность просмотра слайд-шоу из фотографий, но размер их оставался прежним. Что было еще плохо - это то, что масштабирование фотографий было не подобным самому себе, то есть горизонтальные и вертикальные фотографии не имели единого стандарта и невозможно было корректно делать коллажи (пусть не часто, но иногда хотелось).

В общем, я давно думал о смене размера. Сами экраны сейчас имеют уже не прежнее соотношение сторон "4:3", а множество иных вариантов: "16:9", "16:10" и т.д. Фотоаппараты же снимают обычно в размерах "4:3" или "3:2", который соответствует кадрам пленки "36:24", хотя такой размер никогда не соответствовал размерам фотобумаги ("3x4", "5x6", "9x12", "13x18" и т.д.).

Так вот, было соблазнительно в качестве формата выбрать формат бумаги "А", тем более, что сейчас фото зачастую печатаются обычными принтерами именно на бумаге такого формата. Но какие конкретно размеры выбрать?

Прежде всего, какой сделать базовый размер фотографий на самом сайте? Я решил, что отталкиваться надо от ширины в 1200 пикселей. Но что конкретно? Вопрос не праздный. Ведь как я готовлю фотографии для сайта? Чаще всего я их кадрирую в фотошопе, а потом им же уменьшаю до публикуемого на сайте размера. Кадрирую я уменьшенные в масштабе фото, чтобы видеть весь кадр сразу. Да и редактор их так открывает. Чем меньше кнопок нажимать - тем быстрее работа. А на уменьшенных фотографиях шаг рамки всегда фиксированный и кратен или 2, или 4, или 6 (от масштаба зависит).

Поэтому я решил, что размеры моих фотографий на сайте должны быть кратны 12, чтобы кадрирование на любом масштабе было удобным. И при этом, напомню, соотношение сторон должно было, как на формате "А", быть равно квадратному корню из 2. То есть, числу иррациональному, которое невозможно выразить обычной дробью. То есть, будет погрешность в соотношении для любого варианта ширины и высоты фотографии. Что делать? Минимизировать эту погрешность! То есть, подобрать такое соотношение, которое ближе всего к корню из двух. И чтобы числа эти делились на 12.

Поскольку я собрался отталкиваться от ширины 1200, я разделил 1200 на 12 и решил, что буду проверять все соотношения для чисел от 1 до 100. Разумеется, не вручную: я ведь программист... Итак, программа нашла два варианта соотношений сторон фото: почти идеальный по погрешности "99:70" и менее хороший, но вполне точный - "41:29". Все остальные варианты никуда не годились.

Если построить ряд изображений на первом варианте, то получатся минимальное соотношение для размещения на сайте "1188x840" (99*12 и 70*12) и последующие - "1680x1188", "2376x1680", "3360x2376", "4752x3360" для кадрирования в соответствии с принципом формата "А". Увы! Если минимальное было идеальным для сайта, то последующие не вписывались в размеры изображений моих фотоаппаратов и давали слишком мало возможностей.

Тогда я выбрал второе соотношение. Для него минимальный размер картинки вышел 492х348 (41*12 и 29*12), что для сайта никак не годилось. Но ряд можно продолжать! "492x348", "696x492", "984x696", "1392x984"... Стоп! Именно этот вариант - "1392x984" - и был выбран в качестве размера фотографий для сайта. Конечно, ширина почти 1400 пикселей - это многовато. Но с другой стороны - экраны растут, требования к качеству тоже...

А дальше нужно было найти размеры для кадрирования, причем чем больше вариантов - тем лучше! Во-первых, для разных фотоаппаратов, во-вторых, для разных кадров, чтобы вырезать то, что нужно, сохраняя соотношения сторон и кратность 12.

Не буду утомлять подробностями, но применяя кратные увеличения "базовой ставки" 492х348 в 3, 5, 7 и 9 раз с последующими постороениями форматного ряда по корню из 2, я получил такой ряд чисел:

 492 x 348		(*1)
 696 x 492		(*1)
 984 x 696		(*1)
1392 x 984	ORG	(*1)
1476 x 1044			(*3)
1968 x 1392		(*1)
2088 x 1476	GT5610		(*3)
2460 x 1740	(5610)			(*5)
2784 x 1968	SP500	(*1)
2952 x 2088			(*3)
3444 x 2436					(*7)
3480 x 2460	A800			(*5)
3936 x 2784		(*1)
4176 x 2952	SX60		(*3)
4428 x 3132	(SX60)					(*9)

Размер 1392х984 ставится на сайте, а буквами обозначены основные размеры кадрирования для имеющихся у меня фотоаппаратов. При выборе этих размеров кадрирования последующее сжатие изображений фотошопом происходит автоматически. В скобках указаны значения, которые можно выбирать для соответствующих аппаратов, но в этом случае фотошоп дает погрешность размеров и приходится их вручную корректировать, убрав галочку "сохранять пропорцию".

Все прочие размеры я стараюсь не использовать, но вам они могут пригодиться. Хотя они тоже будут давать погрешность (думаю, элементарных знаний математики хватит для понимания причин).

Что касается ряда размеров для вертикальных фотографий, то на сайте размещается вариант 696х984. А для кадрирования используются такие соотношения:

1044 x 1476	любой	(*1.5)
1392 x 1968	любой	(*2)
1740 x 2460	SP+GT	(*2.5)
2088 x 2952	A800	(*3)
2436 x 3444	(A800)	(*3.5)
2784 x 3936	SX60	(*4)
2952 x 4176
3132 x 4428	(SX60)	(*4.5)

Естественно, лучше выбирать не дробные варианты, а целые, но и дробные масштабируются нормально. Разумеется, при желании и необходимости вы сможете продолжить этот ряд применительно к имеющейся у вас фототехнике. А мне такой вариант размещения фотографий на сайте кажется оптимальным.

Первым разделом, полностью оформленным по новым стандартам, стал раздел "Фотографии Тбилиси". Но и фотографии во всех прочих разделах сайта теперь будут выполнены по данному стандарту.

Да, а что же миниатюры? Раньше я использовал для горизонтальных размер "180х135", а для вертикальных - "101х135". Теперь размеры стали "174х123" и "87х123" соответственно. Для глаза разница почти незаметна, а для автоматического создания миниатюр удобно, поскольку их размеры ровно в 8 раз меньше размещаемых больших фото.

Так что - смотрите фотографии! Их на сайте уже несколько тысяч, и это число постоянно растет...


Никнейм ErichWare зарегистрирован!