Содержание

9 бесплатных фотостоков для веб-дизайнеров

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

Специально для вас мы собрали 9 бесплатных фотостоков, на которых вы сможете найти фотографии высшего качества для ваших проектов.

Unsplash

Первым проектом выступает Unsplash: минималистичный дизайн сайта и крутые фотографии. Что еще нужно для счастья? 🙂

Проект позиционируется как «база неподошедших фото» — после фотосессии у фотографов всегда остаются непринятые или непонадобившиеся фотографии. Большинство опубликованных фото именно из таких проектов.

Авторы обещают публиковать 10 фотографий каждые 10 дней — пока им это удается.

Screen Shot 2015-01-04 at 13.45.45

Startup Stock Photos

Как несложно догадаться по названию, проект Startup Stock Photos — это бесплатная помощь стартапам.

Множество классных фотографий техники от Эпл, людей за работой и лофтов.

Screen Shot 2015-01-04 at 12.57.06

Raumrot

На сайте raumrot вы найдете множество панорамных и предметных фотографий.

Тематики от футбола до заправочных станций: точно найдете что-то подходящее.

Screen Shot 2015-01-04 at 13.10.58

Magdeleine

Бесплатные фотографии от проекта Magdeleine, которые подойдут для фото-фонов и для Hero Header’ов.

Доступен поиск по категориям, ключевым словам и преобладающим цветам на фотографии.

Screen Shot 2015-01-04 at 13.16.38

nos.twnsnd.co

На сайте nos.twnsnd.co собрано множество ретро фотографий, а также современных фотографий старых объектов.

Screen Shot 2015-01-04 at 13.21.17

Littlevisuals

Littlevisuals — очень похожий на Unsplash проект: 7 фотографий за 7 дней. Множество красивых фотографий от разных авторов со всей Земли.

Screen Shot 2015-01-04 at 13.23.35

Superfamous

Фотографии природы Superfamous из различных уголков нашей планеты. Если ваш проект о путешествиях или туризме — это лучший выбор.

Screen Shot 2015-01-04 at 13.25.16

Imcreator

Бесплатные фотографии проекта Imcreator, отсортированные по тематикам: люди, бизнес, технологии, еда, спорт, образование и 13 других.

Screen Shot 2015-01-04 at 13.29.42

Picjumbo

На фотостоке Picjumbo вы сможете найти множество фотографий в высоком качестве.

Проект постоянно пооплняется новыми снимками, приуроченными к знаменательным датам, поэтому заходите почаще, если ищете что-то определенное.

Screen Shot 2015-01-04 at 13.34.40

10 сайтов с бесплатными и качественными иллюстрациями — Дизайн на vc.ru

Если на иллюстратора бюджета нет, а картинки на слайде, сайте или в приложении все же нужны, не спешите идти на платные стоки. И на Pixabay, Unsplash, Pexels не идите, туда ходят все. Интернет полон бесплатных и очень даже неплохих иллюстраций.

Их можно использовать в личных и коммерческих проектах и править под свои нужды. Иногда нужно указывать авторство, иногда нет. Нельзя только продавать и перевыкладывать. На всякий случай я дал ссылки на лицензионные соглашения. Ну, поехали!

7 наборов в разных стилях. Бесплатно отдают в PNG. При использовании обязательна ссылка на сайт. Полный текст лицензии.

Несколько сотен трендовых иллюстраций от дизайнеров с Dribbble. Бесплатно отдают PNG. При использовании обязательна ссылка на сайт. Полный текст лицензии.

60 персонажей с уклоном в индийскую тему: сари, велосипеды, мопеды. Но есть и вполне нейтральные ребята. Форматы PNG, SVG, EPS. Можно использовать только для цифровых проектов. Полный текст лицензии.

30 бесплатных фотобанков. Где брать фото и картинки для сайта

Автор Илья Чигарев На чтение 9 мин. Просмотров 14.5k. Обновлено

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

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

Безлимитная графика для ваших проектов

envato elementsenvato elements

Для создания крутого дизайна для сайта, полиграфии, фотографии и прочего, как не крути, вам нужны будут качественные материалы. Это и фотографии, шаблоны, мокапы, иконки, пресеты, кисти и т.д. Все это есть в одном месте и качать можно неограниченно. Сервис ENVATO ELEMENTS с тонной материалов, готовых к скачиванию. Цена подписки от 16,50 $/мес. Переходите по ссылке и посмотрите что вы можете использовать для своего бизнеса и проектов. Подробности вы можете узнать в статье-обзоре.

ПОСМОТРЕТЬ СЕРВИС ENVATO ELEMENTS

envato elementsenvato elements

Для создания крутого дизайна для сайта, полиграфии, фотографии и прочего, как не крути, вам нужны будут качественные материалы. Это и фотографии, шаблоны, мокапы, иконки, пресеты, кисти и т.д. Все это есть в одном месте и качать можно неограниченно. Сервис ENVATO ELEMENTS с тонной материалов, готовых к скачиванию. Цена подписки от 16,50 $/мес. Переходите по ссылке и посмотрите что вы можете использовать для своего бизнеса и проектов. Подробности вы можете узнать в статье-обзоре.

Обзор 30-ти фотостоков с бесплатными фотографиями, векторными картинками и видео

1. allthefreestock.com — объединяет многие стоки

Проект seo консультанта Сэйджо Джордж. С помощью iframe Allthefreestock транслирует контент популярных фотобанков и других сайтов с контентом. Таким образом ссылки на иллюстрации, мокапы, шрифты, паттерны оказываются доступны в одном месте. Сервис позволяет ускорить поиск нужного контента, сузив список подходящих веб-ресурсов.

30 бесплатных фотобанков. Где брать фото и картинки для сайта30 бесплатных фотобанков. Где брать фото и картинки для сайтаfreephoto.cc

2. pexels.com

Бесплатный фотобанк, вместивший в себя 40 000 иллюстраций в высоком разрешении. Все фото лицензированы Creative Commons Zero, а значит их можно копировать, распространять, редактировать и даже использовать на коммерческих сайтах.

pexels.compexels.compexels.com

3. pixabay.com

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

pixabay.compixabay.compixabay.com

4. pikwizard.com

Бесплатный фотобанк с довольно качественными фотографиями. На сайте более 100 000 абсолютно бесплатных изображений, более 20 000 из которых являются эксклюзивными. Ежедневно библиотека пополняется новыми изображениями, ближайшая цель разработчиков — получить более 1 миллиона изображений.

Хотите научиться делать сайты?
Чтобы сэкономить на разработке или зарабатывать деньги создавая сайты для других? Недавно я записал новый курс «Идеальный сайт на WordPress» и «Лендинг в Elementor», где рассказал пошаговый план как создавать крутые сайты. Разработкой занимаюсь более 7-ми лет, на сайтах зарабатываю более 50 тысяч в месяц и в курсе я выложил всю технологию как делать такие сайты. Курс новый — 2020 года. Берите пока свежий. Подробнее читайте по ссылке.

30 бесплатных фотобанков. Где брать фото и картинки для сайта30 бесплатных фотобанков. Где брать фото и картинки для сайта

pikwizard.com

5. picjumbo.com

Портал с бесплатными изображения, созданный фотографом и дизайнером. Стоки отвергали сделанные им фото, называя причиной недостаточно высокое разрешение снимков. За 2 года существования проекта пользователи скачали с сайта более 2,5 млн фото. По нескольким тарифам платной подписки доступен премиум контент портала.

picjumbo.compicjumbo.compicjumbo.com

6. everypixel.com

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

everypixel.comeverypixel.comeverypixel.com

7. lifeofpix.com

Фотобанк с видео и изображениями HD качества, свободными для использования. Лозунг портала — «Подари жизнь своим снимкам!» Сервис регулярно принимает фото от пользователей и присваивает звание «Фотограф недели». На сайте можно создать профиль с портфолио и подписаться на других фотографов.

lifeofpix.comlifeofpix.comlifeofpix.com

8. stokpic.com

Хороший фотосток, создателем которого является фотограф, захотевший делиться своими работами с другими. Единственное действие, запрещенное stokpic лицензией — перепродажа фото в неизменном виде. Подписавшись на новостную рассылку, можно каждые 2 недели получать по 10 изображений категории «Премиум».

stokpic.comstokpic.comstokpic.com

9. isorepublic.com

База бесплатных фото, ориентированная на людей творческих специальностей. С момента запуска сайт опубликовал 3000 изображений под CC0 лицензией, при этом база продолжает пополняться еженедельно. Став email подписчиками сайта, участники сообщества получают рассылку свежих фото.

Бизнес темы для вордпресс

isorepublic.comisorepublic.comisorepublic.com

10. freephotos.cc/ru

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

freephotos.ccfreephotos.ccfreephotos.cc

11. burst.shopify.com

Бесплатный фотобанк, работающий на платформе Shopify. Цель проекта — поддержать дизайнеров, разработчиков, предпринимателей и блогеров в создании качественных сайтов и маркетинговых кампаний. 

shopify.comshopify.comshopify.com

Андеграунд

12. unsplash.com

Фотобанк, в арсенале которого свыше 300 тысяч free photos, щедро подаренных сообществом фотографов. Специалисты портала ежедневно составляют подборку фото, также на сайте есть поиск по конкретным запросам. Можно отлеживать работы фотографов, подписавшись на них.

unsplash.comunsplash.comunsplash.com

13. picography.co

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

picography.copicography.copicography.co

14. magdeleine.co

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

magdeleine.comagdeleine.comagdeleine.co

15. splitshire.com/topbestphotos

Популярный фотобанк с красивыми фото и видео, основной контент которого бесплатен. На главной странице сайта размещена подборка топ фото. Сервис предлагает скачать фото по отдельности бесплатно или помочь проекту, оплатив скачивание архива из 500+ фото.

splitshire.comsplitshire.comsplitshire.com

16. gratisography.com

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

gratisography.comgratisography.comgratisography.com

17. cupcake.nilssonlee.se

Бесплатный фотосток в формате блога, его автор — шведский фотограф Jonas Wimmerström. Размещенные в блоге снимки HD качества образуют объемное портфолио, поделенное на категории.

nilssonlee.senilssonlee.senilssonlee.se

18. publicdomainarchive.com

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

publicdomainarchive.compublicdomainarchive.compublicdomainarchive.com

Фотобанки по категориям:

19. travelcoffeebook.com — путешествия

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

travelcoffeebook.comtravelcoffeebook.comtravelcoffeebook.com

20. photos.bucketlistly.com — выбор по стране

Коллекция из 5000+ фото из путешествий, отмеченных гео-тегами. Таким образом на сайте доступен поиск фото по странам, в которых они были сняты. При входе на сайт срабатывает автоопределение местонахождения, и пользователь видит подборку фотоснимков, сделанных в его стране.

bucketlistly.combucketlistly.combucketlistly.com

21. foodiesfeed.com — фото еды

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

foodiesfeed.comfoodiesfeed.comfoodiesfeed.com

22. scatterjar.com — фото еды

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

scatterjar.comscatterjar.comscatterjar.com

23. superfamous.com/Images — природа

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

superfamous.comsuperfamous.comsuperfamous.com

24. freenaturestock.com — еще природа

Блог, посвященный жизни и работе, включающий в себя галерею с HD фото на природе. Основатель блога — американский фотограф, дизайнер и разработчик Adrian Pelletier. В рамках CC0 лицензии он делится отснятыми им фото.

freenaturestock.comfreenaturestock.comfreenaturestock.com

25. nos.twnsnd.co — старые снимки

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

twnsnd.cotwnsnd.cotwnsnd.co

Бесплатные векторные картинки (vector):

26. vectorstock.com

Объемный royalty free фотобанк векторной графики, накопивший более 8 миллионов изображений. Стартовая страница сервиса демонстрирует картинки по актуальной тематике, к примеру, «Новый год». Ежедневно на сайт добавляются тысячи картинок.

vectorstock.comvectorstock.comvectorstock.com

27. vecteezy.com

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

vecteezy.comvecteezy.comvecteezy.com

Бесплатные видео для сайтов и видеофона:

28. mazwai.com

Стоковый портал, на котором доступны для скачивания бесплатные видеоролики HD. Лицензия CC BY 3.0 разрешает применять их в коммерческих проектах. Скачивая видео, вы получаете zip файл, содержащий видео в .mp4 и .webm форматах. Видеобанк принимает запросы на добавление видео по определенной тематике.

mazwai.commazwai.commazwai.com

29. splashbase.co

Библиотека фотографий и видеороликов, добавленных фотографами и операторами-энтузиастами. Система использует интеграцию с twitter аккаунтом, чтобы предоставить возможность добавления видео в избранное и репостинга в соцсети. Пользователи возвращаются на сайт, чтобы позаимствовать бесплатные видео для оформления своего проекта.

splashbase.cosplashbase.cosplashbase.co

30. splitshire.com/category/video-2

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

splitshire.comsplitshire.com

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

Можете уделить еще 5 минут на самообразование? Советую прочитать статью про Envato Elements — доступ к безлимитной премиум графике и шаблона за подписку

Заказать сайтЗаказать сайт

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

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

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

Compfight

Compfight – отличная поисковая система для изображений. Вы можете использовать её, чтобы быстро раздобыть нужную картинку. Просто впишите тему в строку и нажмите «поиск».

Life Of Pix

Life Of Pix предлагает бесплатные изображения в высоком разрешении без авторского права. Каждую неделю фотобанк пополняется новыми фотографиями.

Superfamous

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

IM Creator Free

IM Free – новая функция от IM Creator. Это куратор коллекции бесплатных ресурсов для коммерческого использования. Внимательно читайте лицензию к каждому изображению, для некоторых фотографий может потребоваться указание авторства.

Getrefe

Если вы ищете фотографии, отличающиеся полем зрения, воспользуйтесь Getrefe. Здесь вы найдёте бесплатные фото для личного и коммерческого использования.

Snapographic

Все изображения на веб-сайте Snapographic сняты Томасом Мюлем. Они свободны от авторского права и бесплатны в использовании. Вы можете искать то, что вам нужно с помощью категорий, расположенных в нижней части страницы.

Lock & Stock Photos

Все изображения, которые вы видите на Lock & Stock Photos, это работы AJ Montpetit. Он делится своими фотографиями в соответствии с лицензией Creative Commons ShareAlike 4.0.

Snapwire Snaps

Это блог на Tumblr с бесплатными фото от Snapwire.

Snapwire – это местом, в котором мобильные фотографы могут представить свои фотографии в ответ на различные запросы, сделанные другими. Snapwire Snaps предлагает 7 новых фотографий каждую неделю.

New Old Stock

New Old Stock – это сайт, куратор и создатель которого Коул Таунсенд. Идея проекта в публикации старых ретро фотографий из государственных архивов, которые свободны от авторских прав. Если вы ищете для своего проекта ретро фото, то вам сюда.

Jeshoots

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

Cupcake

Все изображения, которые вы найдете на Cupcake, снял Йонас Нильсон Ли. Возможно, их не так много по сравнению с другими ресурсами, но здесь можно выбрать из категорий: декорации, пейзажи, предметы и животные.

Kaboompics

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

Foodies Feed

Безусловно, этот сайт создали для гурманов. На Foodies Feed вы найдёте восхитительные снимки продуктов питания. Чтобы просмотреть бесплатные фото, зайдите в раздел «скачать бесплатно» в боковом меню.

Jay Mantri

Jay Mantri – прекрасный портал от фотографа и путешественника Джея Мантри. Каждый четверг он загружает 7 новых фотографий, так что есть из чего выбрать.

DesignersPics.Com

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

Raumrot

Raumrot – сайт с подборкой фотографий, которые специально подобраны для вашего удобства. Выбор представлен множеством разных снимков, но убедитесь в том, что нет необходимости в указании авторства.

Magdeleine

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

Public Domain Archive

Public Domain Archive – это не бесплатный фотосток, но на сайте есть обширная коллекция фотографии без авторских прав. Новые загрузки здесь проводят еженедельно, среди них вы непременно найдёте то, что захватит ваше воображение.

Startup Stock Photos

Startup Stock Photos – это блог на Tumblr с выбором высококачественных фотографий для личного и коммерческого использования. Как следует из названия, он станет особенно полезен для стартапов. И да, фотографии бесплатны.

Photo Pin

Photo Pin – коллекция фотографий по лицензии Creative Commons из Flickr. Просто введите в поисковую строку то, что вы ищете и выбирайте из результатов. Вы даже можете сортировать ответы по «последним», «актуальным» и «интересным».

Оптимизация изображений для web / Хабр


В интернете достаточно статей и проектов для ресайза изображений. Почему же нужна еще одна? В этой статье я расскажу почему нас не удовлетворили текущие решения и пришлось пилить собственное.

Проблема


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

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

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

В качестве примера, как делать не нужно можно посмотреть на главную страницу такого известного сайта, как github.com. При весе страницы 2 Мб, 1.2 из них занимают бесполезные картинки, которые можно оптимизировать и не загружать.

Второй пример — наш Хабр. Скриншот приводить не буду, что бы не растягивать статью, результаты по ссылке. На хабре картинкам изменяют разрешение на нужное, но не оптимизируют их. Это позволило бы сократить их размер на 650 Кб (50%).

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

Распространенные решения


Все, что будет сказано далее относится к JPEG и PNG изображениям, т.к. это наиболее популярные форматы в интернете.

Вбив в google что-то вроде «image resize backend» вы увидите, что в половине случаев предлагается использовать Nginx, другая часть— это различные самописные сервисы, чаще всего Node.js.

Из nginx, а точнее из libgd, которая используется в модуле nginx’а мы смогли выжать на тестовой картинке 63 RPS, что неплохо, но хотелось бы быстрее и больше гибкости. Graphicsmagick тоже не подходит, т.к. его скорость работы слишком низкая. К тому же оба эти решения выдают не оптимизированные изображения. Большинство других решений, например на Node предлагают использовать Sharp для ресайза, MozJPEG для оптимизации JPEG изображений и pngquant для оптимизации PNG.

Мы и сами достаточно долгое время пользовались самописной связкой из Nod’ы, Libvips и MozJPEG c pngquant, но в один из дней задались вопросом— «А можно ли сделать ресайз быстрее и менее требовательным к ресурсам?».

Спойлер: можно. 😉

Теперь хорошо бы выяснить, как можно ускорить наше приложение. Изучив код приложения мы выяснили, что imagemin, который использовался для оптимизации, а в частности его плагины MozJPEG и pngquant при работе дергают одноименные утилиты через os.Exec. Будем это дело однозначно выпиливать и использовать только биндинги к Cи’шным либам. Для ресайза использовался модуль Sharp, который представляет собой биндинг к С библиотеке Libvips.

Наша реализация


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

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

Быстро написали прототип, протестировали и поняли, что несмотря на большее, чем в Sharp, количество внутренних крутилок, Libvips по-прежнему выдает на выход не оптимизированные изображения. С этим надо что-то делать. Опять обращаемся ко всемогущему гуглу и узнаем, что лучший вариант это по-прежнему MozJPEG. Тут начинают закрадываться сомнения, что мы сейчас напишем то же самое, что было на Node, только на Go. Но внимательно почитав описание MoZJPEG узнаем, что она является форком libjpeg-turbo и совместима с ней.

Выглядит очень многообещающе. Дело за малым — собрать свою версию Libvips, в которой jpeg-turbo заменен на версию от Mozila. Для сборки мы выбрали Alpine Linux, т.к. приложение все равно планировалось публиковать с помощью Докера и Alpine имеет очень приятный формат конфига пакета, очень похожий на используемый в Arch Linux.

Оптимизация картинки уменьшила ее размер в 4 раза без видимой потери качества.
Оригинальный JPEG
351×527
79 Кб
Оптимизированный
351×527
17 Кб

Собрали, протестировали. Теперь Libvips сразу при ресайзе выдает оптимизированную версию. То есть в Node версии версии мы сначала делали ресайз, а потом еще раз пропускали картинку через decoder-encoder. Теперь мы только делаем ресайз.

С JPEG разобрались, а что делать с png. Для решения этой задачи была найдена библиотека libpngquant. Она не очень популярная, несмотря на то, что консольная утилита pngquant, которая базируется на ней, используется во многих решениях. Так же к ней был найден биндинг на Go, немного заброшенный и с утечкой памяти, пришлось его форкнуть починить, дополнить документацией и всем остальным, что подобает приличному проекту. Libpngquant мы тоже собрали в виде Alpine пакета для простой установки.

Благодаря тому, что теперь изображение не требуется сохранять в файл для обработки c помощью pngquant мы можем немного оптимизировать процесс. Например не сжимать картинку при ресайзе в Libvips, а только после обработки в pngquant. Это позволит сохранить немного драгоценного процессорного времени. Надо ли говорить, что мы так же очень экономим благодаря тому, что вызов C библиотеки гораздо быстрее запуска консольной утилиты.

Разница в размере в 3 раза, но возможно появление артефактов (зависит от картинки).
Оригинальный PNG
450×300
200 Кб
Оптимизированный
450×300
61 Кб

Пример не очень удачной картинки, на которой появляются артефакты при сжатии.
Оригинальный PNG
351×527
270 Кб
Оптимизированный
351×527
40 Кб

После того, как прототип был написан, протестирован на моем пк и выдавал приличные 25 RPS на мобильном двух ядерном проце, сжирая весь CPU, захотелось увидеть сколько можно выжать из него на нормальном железе. Запускаем код на шести ядерной машине, натравливаем Jmeter и WTF??? Получаем 30 RPS. Пробуем разобраться что за фигня.

Libvips сам реализует многопоточность, то есть нам нужно только инициализировать библиотеку и в дальнейшем мы можем безопасно обращаться к ней из любого потока. Но у нас почему-то Libvips работает в 1 поток, что ограничивает нас одним ядром. Еще 1 ядро занимает pngquant. Итого получается, что наша супер быстрая ресайзилка отлично работает только на ноутбуке разработчика, а на остальных машинах не может утилизировать все ресурсы. 😉

Смотрим исходники биндинга к Libvips и видим, что там CONCURRENCY по умолчанию выставляется в 1 из-за возникавших в Libvips гонок данных. Но судя по баг трекеру эти проблемы давно исправлены. Выставили CONCURRENCY обратно, тестируем. Ничего не поменялось, Libvips по-прежнему отказывался ресайзить изображения многопоточно. Все попытки побороть эту проблему потерпели неудачу и сказать по правде, я запарился ее решать и решил обойти проблему на другом уровне.

Все более или менее современные ядра Linux (3.9+ и 2.6.32-417+ в CentOS 6) поддерживают опцию SO_REUSE, которая позволяет использовать один порт нескольким экземплярам приложения. Данный подход удобнее, чем балансировка средствами стороннего ПО, такого как HAProxy, т.к. не требует конфигурации и позволяет быстро добавлять и убирать инстансы.
Поэтому мы использовали SO_REUSE и опцию «—scale» в Docker compose, которая позволяет указать количество запускаемых экземпляров.

Время мерить


Пришло время оценить результат наших трудов.

Конфигурация:

  • CPU: Intel Xeon E5-1650 v3 @ 3.50GHz 6 cores (12 vCPU)
  • RAM: 64 Gb (используется около 1-2 Gb)
  • Кол-во воркеров: 12

Результаты:

Больше бенчмарков (правда без сравнения с Node версией) на wiki странице.
Как видно переделывали ресайз мы не напрасно, увеличение скорости составило от 30 до 400% (в некоторых случаях). Если требуется ресайзить еще быстрее, то можно покрутить ручки «speed» и «quality» в libimagequant. Они позволят дополнительно сократить размер или увеличить скорость кодирования ценой потери качества изображения.

Код проекта на GitHub.
Биндинг Go к libimagequant так же на GitHub.

| HTML | WebReference

Представляет собой контейнер для хранения нескольких элементов , которые содержат элемент . Это позволяет указывать разные изображения с учётом изображения экрана, пикселей, формата и других параметров. Вот несколько областей применения <картинка> (от англ. картинка — картинка, изображение):

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

Синтаксис

  <рисунок>
  <источник>
  
  

Внутри содержится ноль или несколько элементов , которые идут перед одним элементом .

Закрывающий тег

Пример

изображение <картинка> HTML5

В данном примере используется два изображения: одно в формате SVG, второе в привычном PNG. Браузеры, которые, таблица элемент , отображят картинку в векторном виде (рис. 1). Браузер IE покажет изображение в формате PNG (рис. 2). Для наглядности логотип размером 128х128 пикселей и увеличен до 256х256.

Рис. 1. Картинка в формате SVG

Рис.2. Картинка в формате PNG

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Рекомендация (Рекомендация) — спецификация W3C и одобана как стандарт.
  • Кандидат в рекомендации (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Предлагаемая рекомендация (Предлагаемая рекомендация) — на этом этапе представлен на рассмотрении Консультативного совета W3C для окончательного утверждения.
  • Рабочий проект (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Черновик редакции (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Проект (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

В таблице браузеров используются следующие обозначения.

  • — элемент полностью браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок.

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

.

Аниме картинки и обои

Анни
16:55:57
Ворт, переименован
сталкер
16: 6: 16
Законченный.
сталкер
14:33:49
Мы переедем на новый сервер.
Ворт
9: 1: 59
Пожалуйста, переименуйте тег «lumine (genshin impact) (genshin impact)» на «lumine (genshin impact)».
Анни
13:10:18
xxAMRxx, я добавил новый pixiv id, спасибо
Ми
8:22:29
xxAMRxx, попробуйте уменьшить масштаб страницы в веб-браузере (ctrl + колесико мыши вниз) или откройте картинку рядом (или на другом устройстве) и поработайте с самим окном тегов
xxAMRxx
16:57:35
и у этого исполнителя «foxyrain» новый идентификатор pixiv https: // www.pixiv.net/en/users/57824462 старый кажется приостановленным
xxAMRxx
16:26:43
такая функция, как кнопка для временного закрытия «подписанных тегов», была бы действительно крутой, если это возможно, теги с подпиской подталкивают раздел тегов очень низко, если у вас есть некоторые неотмеченные подписанные теги. которые усложняют теги
7ник
22:58:36
Seи0r, ага, когда такого тега нет, он ищет по тегам, которые включают этот текст
https: // anime-pictures.net / pictures / view_all_tags / 0? search_text = vtuber & tag_desc = & lang = ru.
Seи0r
21:26:14
@ 7nik, да, это правда, у меня плохо. Похоже, это не тег, а часть тега с возможностью поиска?
https://anime-pictures.net/pictures/view_posts/0?search_tag=vtuber
Холодное преступление
18:41:48
Извините, если я напишу это, но
Jon, я был бы рад, если вы проверите больше фотографий вместо того, чтобы загружать свои фотографии.

И если у вас есть время пометить мои фотографии
, тогда вы можете пометить фотографии от пользователей.

7ник
9: 32: 1
Seи0r, как я вижу, у нас нет тега vtuber.
Сеир
12:10:24
В чем разница между тегами vtuber и virtual youtuber и почему они не являются псевдонимами?
Маюмэ
14: 3: 45
meu deus q tristeza
Алесс
1:25:10
Здравствуй
Иррадий
0:27:26
Всем привет, я ищу реалистичные изображения девушки, медитирующей.Если бы кто-то мог написать мне в личку, если у вас есть что-то, я был бы очень признателен. Спасибо и хорошего дня
vsukarieh
19:57:35
привет
Луна_Луна
15:19:51
Здравствуй
noobtee
21: 9: 12
sry nvm
Луна_Луна
18: 2: 32
Привет
.
Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *