Чем мы можем тебе помочь?

Всё о графике для вашего сайта

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

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

Бесплатные фотографии

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


Использование ваших собственных фотографий

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

Онлайн-инструменты для редактирования изображений

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

  • PicMonkey: простой фоторедактор для редактирования и ретуши фотографий, с помощью которого вы также можете делать коллажи.
  • Pixlr: бесплатный онлайн-редактор для простой обработки изображений, включает в себя также эффекты и фильтры. 
  • TinyPNG: этот бесплатный редактор умеет оптимизировать картинки в формате .PNG, после чего они становятся "легче" и быстрее грузятся.

Оптимизация изображений

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

Используйте правильный тип файлов: JPG или PNG

Существует множество различных типов графических файлов, но в большинстве случаев для сайтов используются файлы типов JPEG (также JPG) или PNG. У каждого из них существуют свои достоинства и недостатки, но в основном стоит помнить лишь следующее:

  • Фотографии следует сохранять в формате JPG. Это оптимальный тип файлов для сохранения изображений со множеством цветов и оттенков. При этом итоговый файл будет достаточно небольшим. 
  • Web-графику стоит сохранять в формате PNG. Это относится к таким файлам, как элементы оформления, инфографика, изображения с большим количеством текста и логотипы. PNG-файлы в общем и целом позволяют сохранять изображения с более высоким качеством, чем JPG, что особо заметно, когда на цветной области должен быть расположен чёткий текст. PNG также поддерживает прозрачный фон, который бывает очень полезен при оформлении логотипа. Если у вас есть выбор, мы советуем сохранять PNG со значением "24 bit", а не "8 bit", так как первый будет обладать лучшим качеством и большим количеством цветов при вполне сравнимом "весе" файла.

Вы можете открыть PNG в графическом редакторе и сохранить его как JPG и наоборот, но при сохранении JPG как PNG файл качественнее не станет.

Правильный размер

В Интернете высота и ширина изображения считается в пикселях. Эти значения для любой картинки вы можете определить следующим образом: на PC кликните по иконке файла правой кнопкой мыши, в выпадающем списке выберите "Properties", а затем - вкладку "Summary". На Макинтоше достаточно кликнуть по иконке файла с одновременно нажатой кнопкой "Ctrl" и выбрать опцию "Get Info".

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

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

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

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

Альтернативный текст

Многие забывают заполнять поле "Альтернативный текст" в настройках загружаемых изображений, но это очень важная для SEO-продвижения процедура.

Альтернативный текст (также известный как "alt text" или "alt tags") поможет поисковикам понять, что именно изображено на ваших фотографиях. Вписывая альтернативный текст для картинки в системе Jimdo, вы этим также задаёте название самого файла. Именно поэтому заполнение данного поля можно и нужно ввести в привычку, в общих чертах описывая в нём содержимое каждого конкретного изображения.

Для того, чтобы заполнить поле альтернативного текста в модулях "Изображение", "Изображение в тексте" и "Галерея", нужно нажать иконку "Название и описание картинки".


Иконки, инфографика и так далее

Конечно же ваш выбор графики для сайта не ограничен только лишь фотографиями. Возможность загрузки в модуль "Изображение" любого графического файла (.JPG, .PNG, or .GIF) также делает возможным использование любой графики, в том числе иконок, логотипов, бейджей и так далее.

Бесплатные иконки

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

 

Пример набора иконок с Flaticon.com.
Пример набора иконок с Flaticon.com.

Инфографика, цитаты и графика для соцмедиа

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

  • Canva: инструмент, в котором вы простым методом перетаскивания можете создавать отличные изображения с использованием как фотографий, так и иллюстраций, шрифтов и иконок. 
  • infogr.am: сервис для составления инфографики, а также красивых графиков и чартов. 
  • Piktochart: свыше 400 шаблонов для создания инфографики. 
  • Recite: с помощью этого сайта вы сможете концептуально и стильно оформить любую любимую цитату.
Пример изображения с Canva.
Пример изображения с Canva.

Логотипы

На большинстве шаблонов Jimdo есть специальная область для загрузки логотипа. Если вам нужен собственный уникальный логотип, мы рекомендуем вам обратиться к профессионалам, например, с сайта 99designs

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