Где хранить фотографии для сайта? [дубликат]
Делаю статический сайт-галерею с размещением на гитхабе, недавно (сегодня собсна) узнал печальную весть, что репозитории содержат ограничения, такие как 100мб на один загружаемый файл, а общий размер репозитория не должен быть больше гигабайта. Для кода оно достаточно, пары картинок и svg для сайта — вполне.
Но что делать, если картинок (в качестве основного контента) будет тысяча или уже больше? Сайт для личного использования, на то он и статический, так что миллиард картинок не будет, но в общем обхвате вес иметь будут. Как в таком случае их хранить, и где — самое главное? Если на облаках (и в каких), не сменятся ли там юрлки? Это будет печально, если 1000 картинок поменяют юрл, а ты потом сиди и в _data файле все юрл заного прописывай. Так что такой вопрос стоит сейчас.
Отслеживать
51.4k 87 87 золотых знаков 267 267 серебряных знаков 508 508 бронзовых знаков
задан 22 янв 2017 в 20:14
1,284 13 13 серебряных знаков 32 32 бронзовых знака
Как хранить картинки для сайта?
Веб-странички хранятся в BLOB . Стоит ли хранить картинки прямо в них как base64 , или лучше как файлы в папке на сервере? В чем преимущества и недостатки таких способов?
Отслеживать
12.5k 7 7 золотых знаков 19 19 серебряных знаков 48 48 бронзовых знаков
задан 28 дек 2020 в 11:40
65 8 8 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Лучше всего не совершать дополнительных действий с сущностями и хранить их как есть. Т.е. файлы оставлять файлами. Если вдруг вам однажды захочется заняться оптимизацией, например сделать уменьшение размеров загружаемых страниц, то в первую очередь большой выигрыш можно будет получить ужав картинки. Если картинки будут в файлах, то задача их ужатия будет проста — выполнение одного несложного скрипта. Если же они будут в Base64 храниться внутри HTML кода, то задача будет радикально сложнее. Ну и так вы ещё и размер БД сократите, что положительно скажется на размерах и скорости бэкапов БД.
Из минусов — картинки надо хранить в папках, заморачиваться с их подключением в HTML, но это не слишком сложно.
Отслеживать
ответ дан 28 дек 2020 в 11:53
69.8k 9 9 золотых знаков 67 67 серебряных знаков 124 124 бронзовых знака
Меня беспокоит, ухудшит ли хранение HTML вмести с base64 в атрибутах src взаимодействие клиент-сервер?
28 дек 2020 в 11:55
Взаимодействие клиент-сервер это, на определённом уровне абстракции — просто обмен строчками между 2 компами. Что именно находится в строках этих — не имеет никакого значения. Проблема с Base64 в HTML может возникнуть только на этапе отрисовки HTML — но это будет уже проблема в браузере, его движке, что, по факту никак не пересекается с тем что и как вы храните в БД. По идее браузеры должны уметь отрисовывать картинки в HTML в Base64 формате.
28 дек 2020 в 12:09
Да, ухудшит. Дело в том, что картинки кэшируються, а base64 в атрибутах src — вряд ли.
28 дек 2020 в 18:58
@Stefanov.sm Т.е. в base64 безопасней, так они не попадут в кэш вошедшего пользователя? И наверно сложнее их украсть.
28 дек 2020 в 19:04
С этой точки зрения, на компе пользователя — кажеться да. Все таки base64 в атрибутах src «best practice» не являеться если для этого нет вязкая прчина. Обмен данных с сервером при перезагрузки — больше.
Загрузка и хранение фотографий в Web приложениях
На современных web сайтах объем картинок может составлять от 30% до 70% всего размера страницы. Например, объем изображений на Хабре обычно составляет несколько мегабайт.
Большинство изображений в Web’e — это фотографии. Профильные фото в соц. сетях, альбом с телефона, профессиональные снимки и т.п. Правильная стратегия и инструменты для работы с фотографиями позволят сделать сайт быстрым для посетителей.
Формат для фотографий
Основной формат для хранения фотографий в Web’e — это JPEG. Однако иногда следует использовать и другие форматы.
JPEG
Хорошо подходит для сложных изображений, т.е. как раз для фотографий. Основной принцип сжатия в этом формате — это уменьшение качества путем уменьшения детализации изображения.
Подбор показателя сжатия может уменьшить размер исходного файла в несколько раз без заметного ухудшения качества. Логика такая: чем ниже качество — тем легче файл. Обычно используют показатель качества от 80 до 90.
Webp
Это формат, разработанный специально для обслуживания изображений в Web’e. Может уменьшить размер файла в несколько раз без потери качества. Значительно лучше сжимает фотки, чем JPEG. Однако поддерживается еще не всеми браузерами.
PNG и GIF
Эти форматы не подходят для фотографий. PNG изображения сохраняются без потери качества и лучше всего подойдут для иконок и графики. Формат GIF имеет ограниченную палитру, однако поддерживает анимацию.
Загрузка фотографий на сервер
Если на вашем проекте существует необходимость загружать пользовательские фотографии, сначала необходимо выбрать принцип их хранения на сервере.
Если вы собираетесь работать с сотнями файлов, стоит выбрать древовидную структуру:
Это позволит избежать ситуации с тысячами файлов в одной папке (это тормозит работу файловой системы и вашу собственную). Лучше всего использовать вложенную структуру из папок длинной в два символа:
$photo = $_FILES['image']['tmp_name']; $name = md5($photo) . '.jpg'; $dir = substr(md5(microtime()), mt_rand(0, 30), 2) . '/' . substr(md5(microtime()), mt_rand(0, 30), 2); $path = $dir . '/' . $name; # по этому пути сохраняем фотку Инструменты
После загрузки фотографий на сервер, их следует обработать:
- Уменьшить размер до приемлемого. Нет смысла хранить и показывать оригинал фотографии размером 4000х3000 на сервере.
- Удалить все метаданные. Иногда объем такой инфы может составлять больше половины веса самого изображения.
- Провести оптимизацию для уменьшения размера файлов. Это ускорит загрузку у посетителя.
Для этого существует ряд инструментов.
ImageMagick
Сразу после загрузки фотографии на сервер, имеет смысл удалить все метаданные и изменить размер до 1000х1000:
# 90 - уровень сжатия в итоговом JPEG файле convert input.jpg -strip -resize 1000x1000 -quality 90 output.jpg GraphicsMagick
То же самое с помощью более производительного GraphicsMagick:
# изменение размера до 600х500 с уровнем качества в 90 gm convert input.jpg -strip -resize 600x500 -quality 90 output.jpg Jpegtran
Этот инструмент уменьшает размер JPEG файлов без потери качества.
jpegtran -copy none -optimize -outfile min.image.jpg image.jpg cwebp
Утилита позволяет преобразовать изображение в формат Webp.
cwebp -q 85 input.jpg -o output.webp Отдача клиенту
Фотографии лучше всего отдавать Nginx’ом. Обязательно нужно настроить Cache-control и Keepalive для повышения скорости загрузки страниц:
http < . keepalive_timeout 75s; server < listen 80; location ~ .\.jpg$ < expires max; >> > Превью (thumbnails)
Часто нужно иметь возможность показывать небольшие версии фотографий (например, миниатюра профильной фотки).
Для этого необходимо генерировать нужные размеры при загрузке:
convert file.jpg -resize 50x50 file.s.jpg convert file.jpg -resize 250x250 file.m.jpg Тогда у каждого изображения будет соответствующая миниатюра.
Более удобный подход — генерировать превью на лету с помощью, например, Nginx image_filter модуля.
Поддержка Webp
Webp не поддерживается всеми браузерами, однако постепенно набирает популярность. Для того, чтобы извлечь пользу из этого формата, можно отдавать разные версии фотографий в зависимости от браузера посетителя.
Для каждой фотографии нужно сгенерировать webp версию:
cwebp file.jpg -o file.jpg.webp Теперь необходимо отдать соответствующую версию картинки в зависимости от поддержки этого формата браузером:
server < . location ~* ^/.+\.(jpg|jpeg)$ < if ($http_accept ~* "webp") < rewrite (.+) $1.webp; >> . > Облака
Облачные технологии развиваются и дешевеют. Если у вас нет специфических задач по обработке фоток, лучше присмотреться к варианту использования внешнего сервиса для их хранения и отдачи.
Amazon s3
Это облачное хранилище с которым не придется думать о масштабировании. Храните терабайты и не парьтесь. Пример реализации загрузки фотографий на S3 в PHP:
$path = 'photo_name.jpg'; $s3 = new S3('ключ', 'секрет'); $s3->putObjectFile($_FILES['image']['tmp_name'], 'букет', $path, S3::ACL_PUBLIC_READ, []); После этого можно показывать фотку прямо с Амазона:
. 
. Cloudinary
Мощный сервис для работы с фотографиями в облаке. Ресайз, кроп, распознавание лиц, разные форматы, онлайн редактор и другие функции.
i.onthe.io
Мега простой сервис, распознает возможности браузера и подбирает оптимальный формат отдачи. Поддерживает URL API для ресайза и кропа.
Конспект
- Правильный формат и сжатие фоток могут сэкономить до 70% объема страницы.
- Используйте только JPEG для фотографий.
- При возможности включайте поддержку Webp.
- Imagemagick, Graphicsmagick и Jpegtran для манипуляций и оптимизации фоток.
- Рассматривайте облачные решения для хранения фоток — это быстро и удобно.
Где брать картинки для сайта?
“Где же брать картинки для сайта?” — такой вопрос однозначно возникал в вашей голове. Ведь на сайте размещаются не только товары или услуги, но и блоговые статьи. туда столько фотографий нужно.
- Как понять, какие иллюстрации должны быть на сайте?
- Чем опасно использование авторских изображений на сайте?
- Бесплатные фотостоки
- Платные фотостоки
- Чем пользуемся в компании?
Конечно, вы можете использовать собственные фотографии (если у вас их достаточное количество на каждый случай), но можно воспользоваться стоками. Они бывают бесплатными и платными. В статье мы расскажем, какие стоки существуют, а какими мы пользуемся сами.
Кстати, в конце мы расскажем о простом способе создания уникального изображения.
Как понять, какие иллюстрации должны быть на сайте?
Мы предлагаем разделить все изображения на две большие категории: документальные и художественные.
Документальное изображение
Это картинки, которые доказывают, что вы занимаетесь тем, о чем заявляете на сайте. То есть у вас агентство по организации детских праздников, значит на сайте фотографии счастливых детей с аниматорами, декораций, родителей с детьми и так далее.
Художественное изображение
И вот на вашем сайте появляется блоговый сегмент. Вам необходимо как-то привлечь внимание читателей к статье на тему “Как понять, что вы обратились к непрофессионалам?”. Вместо своих фотографий нужно что-то “говорящее”, что передает эмоцию. Вы берете изображение, намекающее на печальную эмоцию, то есть что-то метафоричное.
Художественное изображение передает настроение, эмоцию, но не весь смысл текста. Это нужно учитывать. Перед тем как добавлять картинки в материал нужно решить, какие изображения будут в конкретной публикации. Смешивать документальные и художественные иллюстрации не стоит, так как это нелогично.
Классно, когда у вас есть собственные изображения на любой случай, но фотостоки — это хорошая, а главное простая альтернатива личным фотографиям и изображениям.
Чем опасно использование авторских изображений на сайте?
Вы скачиваете обычную картинку с Интернета, когда горят сроки или нет средств на дизайнера? Это опасно. Нужно понимать, что существуют авторские изображения, и за их неправомерное использование можно получить судебные иски. Например, судебный иск за нарушение авторских прав, штраф от 10 тысяч рублей и до несколько миллионов рублей.
Бесплатные фотостоки
Чтобы судебные иски обходили стороной, предлагаем список бесплатных фотобанков.
Нужна регистрация. Но после нее в вашем доступе — более миллиона видео и изображений для любых целей.
Весь контент бесплатен, а фотографии можно скачивать даже без регистрации. Обратите внимание, что этот фотобанк полностью на английском языке, поэтому искать изображения придется на нем же.
Также нет русскоязычной версии. НО! Здесь вы найдете множество крутых изображений в хорошем качестве. Можно подписываться на понравившихся фотографов.
Здесь находится большая коллекция снимков. За скачивание в высоком разрешении придется заплатить, а вот в обычном — всё бесплатно. На сайте необходима регистрация.
Фотосток ориентирован на digital. Изображения отлично подойдут для размещения контента про офис, сотрудников, новый кейс и так далее.
В этом фотобанке — более 350 тысяч снимков, которые можно использовать при указании авторства. Кстати, у сервиса есть собственное приложение.
Да-да! Здесь можно легально качать и использовать картинки для своего сайта. Необходимо уточнить поиск в “Инструментах поиска” и выбрать в разделе “Права на использование” лицензию на бесплатное использование изображений.
Картинки с этого фотобанка можно беспрепятственно скачивать. Каждые десять дней на сайте появляются 10 новых фотоснимков.
Платные фотостоки
Если вы не нашли нужную картинку на бесплатных стоках, то обратите внимание на платные варианты. Купить изображение не так дорого (1-2$), а использовать его вы сможете постоянно.
Вот небольшой список платных фотостоков:
Чем пользуемся в компании?
Иконки для сайтов:
Простой способ создать свою картинку:
Заходите на сайт или скачивайте приложение. В разделе Графика находите картинки под нужную тематику. А дальше — творчество. Выбирайте доступные элементы и преображайте картинку. Получается уникальное изображение.
Важное перед выводом
У всех фотобанков есть справочная информация. Читайте ее внимательно, чтобы не попасть в неудобную ситуацию.
Вместо вывода
Самый лучший способ использования изображения на странице сайта — это разместить свое, с фотосессии. Но это не всегда возможно, поэтому пользуйтесь фотостоками, которых, как мы уже выяснили, большое количество.