Улучшение восприятия производительности: изменение размера изображения по требованию

Нам нужно сделать метод getUploadsDirectory в FileManager общедоступным, так как он в настоящее время FileManager :

 public function getUploadsDirectory() { return $this->path; } 

Наконец, давайте serveImageAction метод serveImageAction в ImageController, чтобы он выглядел следующим образом:

 /** * @Route("/image/{id}/raw", name="image.serve") */ public function serveImageAction(Request $request, $id, GlideServer $glide) { $idFragments = explode('--', $id); $id = $idFragments[0]; $size = $idFragments[1] ?? null; $image = $this->em->getRepository(Image::class)->find($id); if (empty($image)) { throw new NotFoundHttpException('Image not found'); } $fullPath = $this->fileManager->getFilePath($image->getFilename()); if ($size) { $info = pathinfo($fullPath); $file = $info['filename'] . '.' . $info['extension']; $newfile = $info['filename'] . '-' . $size . '.' . $info['extension']; $fullPathNew = str_replace($file, $newfile, $fullPath); if (file_exists($fullPath) && ! file_exists($fullPathNew)) { $fullPath = $fullPathNew; $img = $glide->getGlide()->getImageAsBase64($file, ['w' => $size]); $ifp = fopen($fullPath, 'wb'); $data = explode(',', $img); fwrite($ifp, base64_decode($data[1])); fclose($ifp); } } $response = new BinaryFileResponse($fullPath); $response->headers->set('Content-type', mime_content_type($fullPath)); $response->headers->set('Content-Disposition', 'attachment; filename="' . $image->getOriginalFilename() . '";'); return $response; } 

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

В демонстрационных целях мы идем дальше и создаем файлы вручную, добавляя к ним размер и сохраняя их в папке uploads . Следует отметить, что вы также можете использовать метод outputImage из Glide для непосредственного вывода изображения, и оно будет подано прямо из подпапки cache , не сохраняя его с суффиксом в основной папке upload . Вы также можете использовать метод makeImage чтобы просто создать изображение и позволить старой логике получения изображения вступить во владение. Это подход, который мы выбрали ниже:

 /** * @Route("/image/{id}/raw", name="image.serve") */ public function serveImageAction(Request $request, $id, GlideServer $glide) { $idFragments = explode('--', $id); $id = $idFragments[0]; $size = $idFragments[1] ?? null; $image = $this->em->getRepository(Image::class)->find($id); if (empty($image)) { throw new NotFoundHttpException('Image not found'); } $fullPath = $this->fileManager->getFilePath($image->getFilename()); if ($size) { $info = pathinfo($fullPath); $file = $info['filename'] . '.' . $info['extension']; $cachePath = $glide->getGlide()->makeImage($file, ['w' => $size]); $fullPath = str_replace($file, '/cache/' . $cachePath, $fullPath); } $response = new BinaryFileResponse($fullPath); $response->headers->set('Content-type', mime_content_type($fullPath)); $response->headers->set('Content-Disposition', 'attachment; filename="' . $image->getOriginalFilename() . '";'); return $response; } 

Наш бизнес по изменению размера изображения по требованию работает. Теперь все, что нам нужно сделать, это проверить вещи.

тестирование

Как только мы обновим домашнюю страницу, которая будет немного медленнее, изображения начнут генерироваться в папке var/uploads . Давайте проверим это, не прокручивая до второй страницы.

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

Да, наше изображение получено из оригинала.

Но как насчет мобильного? В современных браузерах достаточно легко включить мобильный режим. Давайте попробуем открыть изображение галереи в мобильном представлении и потом проверить папку с изображениями.

Что если мы изменим ориентацию и проверим папку?

Успех, мобильный размер нашего изображения был успешно сгенерирован, а полноэкранное изображение использовалось повторно, потому что именно такой размер экрана у нашего «мобильного» в альбомном режиме. srcset требованию был успешно реализован!

Приложение с этими обновлениями было помечено как этот выпуск .

Вывод

В этом посте мы рассмотрели процесс оптимизации изображений для доставки на фото-ориентированном сайте. Мы сохранили миниатюры фиксированного размера для достижения наилучших результатов, и с полноэкранными изображениями мы сосредоточились на внедрении srcset — простого дополнения к любому современному веб-сайту — в паре с Glide, пакетом изменения размера изображений по требованию, который может сделать тяжелую работу для нас.

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