Как работает загрузка изображений

Привет, дорогие Пикукерсы!

Новое обновление вызвало некоторое недопонимание, поэтому давайте я вам объясню подробно, как работает хранение ваших изображений на сайте. 

Начнем с базовых принципов:

Графика много весит

Обычная фотка с телефона весит почти три мегабайта

Хранение графики стоит денег

Этот диск у нас сейчас забит графикой почти полностью

Тяжелые картинки медленно скачиваются

1 мегабайт = 8 мегабит. Ваша картинка на 3 мегабайта будет загружаться средним пользователем 1 секунду. А если в вашем турнире 256 вариантов?

Поисковики понижают сайт в выдаче, если картинки на нем не сжаты

Кроме того, они любят формат WebP, который режет качество

* * *

И вот у нас есть 3 кита, благодаря которым сжатие графики НЕОБХОДИМО. Поэтому мы всегда сжимали загружаемую вами графику.

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

Шаг первый: картинка загружена на сайт

Например, мы создали новый вариант для нашего турнира.

Мы взяли нашу картинку на 3 мегабайта и загрузили её на сайт. И сайт сразу сжал её до 600 пикселей! 

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

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

Шаг второй: открываем наш инструмент

Красивые горы

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

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

У такого подхода есть единственное техническое ограничение: оригинал хранится только в ту сессию работы с редактором, в которой вы её загрузили. Стоит вам уйти со страницы - браузер её забывает и теперь у вас в распоряжении только сжатая картинка с сервера из автосохранения. 

Поэтому картинки стоит редактировать сразу после их заливки.

Шаг третий: режем!

Выбираем область и жмем "Применить"

И вот, после обрезки, наш функционал берет только ту область, что вы выбрали и уже её сжимает по той-же формуле, отправляя на сервер:

Изначально залитая на сервер картинка при этом удаляется, чтобы не занимать место на сервере

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

* * *

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

Надеюсь, теперь вы лучше понимаете как это работает. Проектирование всего этого алгоритма отняло у нас много сил и я надеюсь, вы оцените его по достоинству.