500 фото за раз на плохой связи: сайт, спроектированный под загрузку

Обычный сайт-портфолио проектируют вокруг того, как его смотрят. Этот пришлось проектировать вокруг того, как его наполняют, — и это оказалось интереснее.

Ограничение, которое определило всё

Фотожурналист снимает соревнования и выкладывает репортаж целиком: триста-пятьсот кадров за раз, до двенадцати тысяч в год. Заливает сам, с телефона, часто прямо с площадки, где связь плохая.

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

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

Загрузка, которая переживает обрыв

Обычная загрузка файла устроена просто: отправили — получили. Оборвалась связь на трёхсотом кадре из пятисот — начинай сначала.

Здесь загрузка сделана по протоколу с возобновлением: клиент и сервер договариваются, сколько байт уже принято, и после обрыва передача продолжается с этого места. Не с начала файла и не с начала пачки.

Проверял это не рассуждением, а сценарием: пятьдесят файлов, искусственный обрыв связи на двадцатом. Загрузка докачалась до конца, потерь ноль.

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

Обработка в очереди, а не в запросе

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

Делать это прямо во время загрузки нельзя — пользователь будет ждать, а при пятистах кадрах ожидание станет бесконечным. Поэтому обработка вынесена в фоновую очередь: файл принят, пользователь свободен, дальше система работает сама.

Отдельно про метаданные. Служебные поля вычищаются — там координаты съёмки и серийный номер камеры, которые публиковать не надо. Авторские поля, наоборот, сохраняются: имя автора, права, описание. Это то, по чему фотографию потом находят и по чему доказывают авторство.

Разницу между «удалить метаданные» и «почистить метаданные» большинство инструментов не делает, и вместе с координатами улетает подпись автора.

Галерея, которая раскладывается сама

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

Поэтому раскладка автоматическая, по пропорциям: система подбирает ритм строк так, чтобы ряд заполнялся целиком, и ни один кадр при этом не обрезался.

Последнее — принципиально. Самый простой способ сделать ровную сетку — обрезать всё в квадрат. Для фотографа это неприемлемо: кадрирование — часть авторской работы, и сайт не имеет права его менять.

Проверено программно: прошёл по всей галерее и убедился, что ни одно изображение не обрезано. Плюс ноль нарушений контраста в интерфейсе поверх фотографий — там, где подписи ложатся на снимок, это легко упустить.

Почему 326 тестов

Покрытие 91,9% для сайта-портфолио выглядит избыточным, пока не посмотреть, что именно покрыто.

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

Для проекта, где владелец заливает двенадцать тысяч кадров в год и не проверяет каждый, цена тихой ошибки высокая. Тесты здесь — не признак хорошего тона, а страховка архива.

Похожий подход к проверке разбирал в кейсе сайта для фотографа.

Прицел на поиск по изображениям

Главная цель сайта — быть найденным по фотографиям, и это отдельная задача, не совпадающая с обычным продвижением.

Поисковик не видит, что изображено на снимке, ровно так, как видит человек. Он опирается на окружение: заголовок страницы репортажа, подписи, имя файла, текст рядом, разметку. Поэтому страница репортажа устроена как документ о событии, а не как безымянная галерея.

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

И практический вывод для любого, кто публикует много фотографий: папка со случайными именами файлов в облаке не будет найдена никогда. Имя файла, подпись и страница вокруг снимка стоят дороже, чем кажется.

Водяной знак и здравый смысл

Знак на снимке — тема, где легко уйти в крайность в любую сторону.

Крупный знак поперёк кадра действительно мешает украсть фотографию и заодно мешает её смотреть. Для спортивной съёмки это особенно вредно: половина ценности кадра в моменте, и перечёркивать его надписью — значит обесценивать собственную работу.

Полное отсутствие знака тоже плохо, но по другой причине: снимок разойдётся по чатам и пабликам без всякой связи с автором, и найти его будет невозможно.

Рабочий компромисс — аккуратная подпись в углу плюс авторские метаданные внутри файла. Первое работает для человека, второе для машины и для доказательства авторства. Ни то, ни другое не защищает от воровства по-настоящему — защищает только то, что исходник высокого разрешения на сайт не выкладывается вовсе.

Частые вопросы

Почему не выложить фотографии в облако и не дать ссылку?

Потому что задача — попасть в поиск по фотографиям, а облачная папка туда не попадает. Плюс облако не даёт ни водяного знака, ни авторских метаданных, ни страницы репортажа, которую можно переслать.

Водяной знак не портит впечатление?

Портит, если он на пол-кадра. Задача знака — не защитить от воровства (это невозможно), а обозначить авторство при пересылке. Поэтому он аккуратный и не спорит с изображением.

Зачем современный формат изображений?

Он даёт примерно тот же вид при заметно меньшем весе. При галерее в несколько сотен кадров это разница между страницей, которая открывается, и страницей, которая грузится минуту.

Что дальше по проекту?

Админка, рубрики и разметка для поисковиков вместе с картой сайта. Демо-стенд с загрузкой и галереей уже работает — это тот фундамент, на котором остальное надстраивается.

Что происходит, если загрузка прервалась и человек закрыл вкладку?

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

Сколько места занимает такой архив?

Меньше, чем кажется: в отдаче участвуют сжатые версии и превью, а не исходники с камеры. Исходники — отдельный вопрос, и хранить их на том же сервере обычно не нужно.

Коротко о главном

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

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

Если вы снимаете много и публикуете пачками — расскажите, как выглядит ваш процесс от карты памяти до публикации. Покажу, где он тормозит. Напишите в Telegram, MAX или VK.