SEO оптимизация изображений
После того, как вы оптимизировали размер и объем изображения и выбрали подходящий формат, назовите готовый файл так, чтобы было понятно, что изображено на картинке. Не называйте файл Untitled.jpeg, Без-названия.png или 01.webp.
Закачайте картинку на сайт и добавьте атрибуты Alt и Description. Эти теги говорят поисковым системам что изображено на картинках. Заполните как минимум поле Alt.
Добавьте атрибут Alt и Описание
Описания к картинкам индексируются поисковыми системами и вы можете получить больше переходов на свой сайт из раздела Картинки поисковых систем.
Трафик из раздела Картинки поисковых систем
Также эти теги помогают пользователям с нарушениями зрения, так как их программы чтения с экрана могут читать им теги Alt и Title.
Заключение
Оптимизировать изображения для публикации на сайте можно разными способами.
Фотошоп – самый гибкий инструмент для уменьшения размера изображений, с помощью настроек вы можете выбрать приемлемый уровень оптимизации и итоговый размер изображения, но придется каждую картинку оптимизировать вручную.
Если вы начинаете новый сайт, то оно того стоит.
После оптимизации в Фотошопе картинки имеют маленький размер, так что до-оптимизацию на сайте с помощью плагина можно не делать.
Хороший результат у плагинов TinyPNG и ShortPixel. EWWW Image Optimizer хороший плагин, но его сложнее настроить.
Оптимизированные картинки значительно ускоряют скорость сайта. Качество изображений немного уменьшится, но большинство посетителей этого не заметит.
Еще одна вещь, которую вы можете сделать для ускорения загрузки страниц – подключить сайт к сети CDN. После подключения страницы сайта будут доставляться посетителю из ближайшего сервера.
Как подключить Вордпресс к CDN Cloudflare
- Где брать бесплатные картинки в хорошем качестве для публикации на сайте без нарушения авторских прав
- SEO для Вордпресс. Подробная инструкция
- 12 советов для SEO оптимизации Блога
Полезные приёмы
Отразить изображение по вертикали можно с помощью горячих клавиш Shift + H. По горизонтали — Shift + V.
Скопировать SVG-иконку с любого сайта в Figma можно через браузер:
- Зайдите на сайт с нужной иконкой, нажмите правую кнопку и выберите «Посмотреть код». Справа откроется панель с HTML-кодом сайта.
- В окне с кодом на панели сверху нажмите на иконку и выберите нужную иконку на сайте.
- В HTML-коде выделится тег <path>, прямо над ним будет <svg> — нажмите на него и скопируйте с помощью сочетания Ctrl (⌘) + C на клавиатуре.
- Зайдите в Figma и нажмите Ctrl (⌘) + V — иконка встанет на макет.
Быстро вырезать объект поможет плагин Remove BG, который автоматически удаляет фон.
Как установить плагин Remove BG:
- Зайдите на страницу плагина и установите его, нажав Install.
- Зарегистрируйтесь на сайте remove.bg.
- На сайте нажмите на иконку профиля и зайдите в панель управления. В панели нажмите на «Ключ API», затем ― на кнопку «Показать» и скопируйте полученный код.
- Зайдите в Figma, нажмите на иконку , перейдите, затем в Remove BG, нажмите на Set API key. В появившееся окно вставьте ключ, который вы взяли с сайта, и нажмите OK.
- Добавьте на макет любую иллюстрацию, нажмите на неё правой кнопкой мыши, перейдите в Plugins → Remove BG → Run. Фон из иллюстрации удалится.
Учтите, что этот способ не подойдёт для финального удаления фона, так как плагин работает не идеально. Но если вам нужно просто показать идею, то Remove BG поможет сэкономить кучу времени.
Больше о Figma
- Как упростить работу в Figma
- Выравнивание в Figma: Auto Layout
- Что такое Figma Overlays и как его использовать при создании интерфейса
Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.
Плагины оптимизации изображений Вордпресс
Для оптимизации картинок на сайте существует несколько популярных плагинов. У всех плагинов из этого раздела есть бесплатная версия, которую можно скачать в официальном репозитории Вордпресс.
Обычно в бесплатной версии существует ограничение на количество изображений, которые можно оптимизировать в течение месяца, или на объем изображений в течение месяца.
Все плагины подключаются по API, поэтому изображения оптимизируются на серверах плагинов и не нагружают ваш сервер.
Smush Image Compression and Optimization
Smush — Lazy Load Images, Optimize & Compress Images
Author(s): WPMU DEV
Current Version: 3.12.4
Last Updated: 17.11.2022
Плагин создан разработчиком WPMU DEV, регулярно обновляется и имеет более миллиона установок. Оптимизирует jpeg, png и gif форматы. Изображения до 5 Мб оптимизируются бесплатно в любом количестве.
Оптимизирует до 50 изображений за один раз. Автоматически находит изображения, которые замедляют сайт. Плагин может откладывать загрузку изображений до того, как они не появятся в видимой части экрана (lazy load).
В настройках плагина вы можете указать максимальный размер изображения. Если на сайте найдутся изображения большего размера, они будут уменьшены до максимального. У плагина есть интеграция с блоками изображения Гутенберг, в которых показывается статистика оптимизации.
EWWW Image Optimizer
EWWW Image Optimizer
Author(s): Exactly WWW
Current Version: 6.9.2
Last Updated: 25.10.2022
Другой популярный плагин, регулярно обновляется, имеет более 900.000 установок. Плагин бесплатно оптимизирует изображения на вашем сервере или платно на своем сервере.
Работает с форматами jpg, png и pdf. После оптимизации выбирает наиболее подходящий формат для показа на сайте, – jpg, png или gif.
Плагин может автоматически конвертировать jpg и png изображения в формат webp.
ShortPixel
ShortPixel Image Optimizer
Author(s): ShortPixel
Current Version: 5.1.5
Last Updated: 29.11.2022
Относительно новый плагин, ставший популярным. Оптимизирует форматы jpeg, png, gif и pdf на своем облаке.
В бесплатной версии позволяет оптимизировать до 100 изображений в месяц. Если нужно оптимизировать больше изображений, нужно купить одну из платных версий. Можно купить подписку на месяц или сделать единоразовую оплату за 10.000, 30.000, 50.000 или 170.000 изображений.
По этой ссылке вы получите еще 100 бесплатных оптимизаций в месяц каждый месяц.
В настройках плагина вы можете указать дополнительные папки, кроме Медиа библиотеки, в которых вы хотите оптимизировать изображения.
TinyPng
TinyPNG — JPEG, PNG & WebP image compression
Author(s): TinyPNG
Current Version: 3.4.1
Last Updated: 17.11.2022
Простой и понятный плагин, регулярно обновляется, имеет более 200.000 установок. Подключается по API к серверу TinyPNG, на котором оптимизируются изображения.
В бесплатной версии предлагает 100 оптимизаций в месяц, если вам нужно оптимизировать больше изображений, придется купить одну из платных версий.
Плагин добавляет кнопку оптимизации в медиа библиотеку, с ее помощью вы можете сжать изображения в библиотеке.
Оптимизация изображений для сайта
Первый вопрос обычно звучит следующим образом: «А откуда вообще брать изображения для своего интернет-ресурса?».
Лично я на своем сайте стараюсь использовать уникальные изображения, полученные следующими способами:
- использование фотографий, сделанных собственноручно.
- скриншоты экрана монитора с последующим добавлением вспомогательных элементов и поясняющего текста:
- создание уникальных изображений в графическом редакторе (я использую Photoshop):
- редактирование (изменение либо добавление определенных деталей) с помощью графического редактора (опять же Photoshop) скаченных из интернета картинок:
Но создать изображение это лишь полдела, далее его нужно грамотно использовать, чтобы оно начало приносить пользу вашему ресурсу.
То есть полученные данными способами изображения нужно правильно оптимизировать.
Созданное изображение должно представлять из себя компромисс между качеством и размером (объемом занимаемой памяти).
Наиболее востребованными форматами изображений, используемых в WEB, являются следующие:
- JPG — целесообразно применять для фотографий и картинок с плавными переходами яркости и цвета. Сжатие изображения осуществляется с потерей качества;
- GIF — часто применяется для анимированных изображений, но может использоваться и для статичных. Поддерживает прозрачность. В формате не более 256 цветов сжатие осуществляется без потери качества;
- PNG — более совершенный формат, чем GIF, но без поддержки анимации. Также поддерживает прозрачность. Используется для изображений без оттенков и тонов. Сжатие осуществляется без потери качества.
Какой формат в каком случае использовать решать вам. Главное чтобы изображение получилось четким и занимало максимально малый объем памяти.
Для уменьшения размера файла изображения я использую графический редактор Photoshop, с помощью которого открываю созданное одним из перечисленных выше методов изображение, иду в меню Файл → Сохранить для Web:
И в появившемся окне определяю нужные параметры (можно изменить формат, качество, размер изображения):
Добиваемся результата, при котором изображение и выглядит приемлемо, и размер у него минимален. Сохраняем.
Также одним из способов уменьшения размера файла изображения является использование online сервиса под названием PunyPNG:
Чтобы с помощью данного сервиса уменьшить размер файла изображения, нажимаем кнопку UPLOAD IMAGES, загружаем файл, после чего происходит его сжатие и предоставляется возможность скачать полученный файл.
Далее необходимо присвоить полученному изображению правильное название. И тут есть одна тонкость — обязательно присваивайте название только латинскими буквами!
В самом начале ведения своего сайта я совершил существенную ошибку и называл файлы именами на кириллице. При вставке такого изображения в статью автоматически возникала битая ссылка.
Но тогда я не знал что это такое и как эти битые ссылки выявлять. Из-за этого, как я уже неоднократно писал в статьях на своем сайте, в последствии пришлось потратить уйму времени на исправление данной ошибки. Ни в коем случае не повторяйте ее!
Название файла изображения на латинском языке должно содержать в себе ключевые фразы, по которым продвигается статья, для которой данное изображение будет использоваться.
К примеру, изображение, используемое в качестве миниатюры для данной статьи называется вот так:
Также ключевые слова нужно прописывать в мета-тегах и в теге alt, содержимое которого будет отображаться при невозможности отобразить изображение.
Прописываем информацию следующим образом:
Готово! После этого можно вставлять полученное оптимизированное изображение в статью вашего сайта.
Соблюдая перечисленные в данной статье действия по оптимизации изображений, вы не только ускорите загрузку вашего интернет-ресурса, но и будете получать дополнительный поисковый трафик из поиска по картинкам поисковых систем.
Удачи вам и до встречи!
Оптимизируем размер изображения с программой Adobe Photoshop
Adobe Photoshop — программа, которая позволит вам легко оптимизировать любое изображение. Сделать это очень просто, не нужно возиться с настройками, достаточно лишь выбрать пункт в меню File — Save for Web&Devices.
Вам сразу предлагают четыре варианта изображения различного размера. Видно, что оригинал весит почти 12 мегабайт, что совершенно недопустимо для сайтов. Наименьший из предложенных вариантов весит 200 килобайт. На миниатюрах видно, что потери качества нет. На самом деле, качество ухудшается, но для обычного пользователя это будет совсем незаметно.
Также у вас есть возможность самостоятельно задать качество, использовав в правом верхнем углу настройку Quality. Остальные настройки не так важны, трогать их совсем не обязательно. 200 килобайт — уже значительно лучше, однако не стоит забывать о размере фотографии. В данном случае он равен 2500×1667 px. Очевидно, что для сайта такой размер не нужен. Сожмем его до 800 px по ширине.
Теперь фотография весит всего 24 килобайта, и это уже гораздо лучше, чем 200. Да, может показаться, что и 200 килобайт — это не много. Но это только тогда, когда вы используете в статье 1–2 изображения. А если их десятки? Это уже серьезно повлияет на скорость загрузки страниц. А если на вашем сайте планируется размещение большого количества фотографий, то в этом случае оптимизировать их размер стоит хотя бы из соображений экономии места на хостинге.
Adobe Photoshop — лучшая программа для оптимизации изображений. Главный ее минус в том, что она не слишком хорошо подходит для обработки очень большого количества изображений. В этом случае можно воспользоваться другой программой Adobe — Lightroom, которая является облегченной версией Photoshop и как раз создана для обработки большого количества изображений.
Цветовой профиль
Если ретушь производится в цветовом пространстве, отличном от sRGB, перед сохранением фотографии необходимо преобразовать цвета в стандартный цветовой профиль — sRGB IEC61966-2.1.
Сделать это можно, воспользовавшись командой Edit (Редактирование) → Convert to Profile (Преобразовать в профиль).
При этом выбираются следующие параметры: Engine (Движок) – Adobe, Intent (Алгоритм пересчета цветов) – Perceptual (Перцептуальный) или Relative Colorimetric (Относительная колориметрия), все галочки, которые возможно проставить — проставлены.
Важно
Подробнее о цветовых профилях Вы можете прочесть в соответствующем цикле статей:
Цветовой профиль изображения. Почему искажаются цвета
Цветовые пространства sRGB, Adobe RGB и ProPhoto RGB
Какое выбрать
Настройка и выбор цветового профиля. Практические вопросы
Общие рекомендации
Сохраняя файл для публикации на сайте, дайте ему осмысленное название, описывающее его содержание
Поисковые системы обращают на это внимание. Название нужно писать транслитом, пробелы — заменять дефисами
Все слова в названии — с маленькой буквы.
При уменьшении размеров фото используйте алгоритм с усилением резкости. Если умеете работать с алгоритмами усиления резкости — предварительно усиливайте её вручную, до того, как уменьшите размеры фото. Подробнее об усилении резкости и детальности смотрите здесь.
Не размещайте масштабированные изображения. Выясните у вебмастера, какой размер по ширине и высоте изображения нужен для сайта, и сохраняйте ваше фото для публикации именно в этом размере. CMS могут масштабировать изображение автоматически, но в результате страница будет весить намного больше, чем надо. Это плохо сказывается на быстродействии сайта, и как следствие — на его место в поисковой выдаче. Или, как вариант, CMS растянет картинку до нужного размера, смотрится это плохо.
Те самые «квадратики», артефакты алгоритма сжатия. Вам нравится такое качество?Не рекомендую автоматические «оптимизаторы» картинок по рекомендациям Google Speed Test. Да, они драматически уменьшат вес изображений, но пожалейте глаза своих посетителей. Да и собственный бизнес: качество визуального контента влияет на восприятие сайта и конверсию. Хуже восприятие — меньше денег в ваш карман. Лучше потратьте немного времени на подготовку полноценного контента, оно того стоит.
Как создать макет сайта онлайн или в программе
Подобрала для вас пять сервисов, в которых можно создать макет сайта онлайн, и одну удобную бесплатную программу для десктопа.
Wilda
Онлайн-конструктор Wilda для создания макета сайта
Русскоязычный онлайн-конструктор, где можно создать макет сайта, документа, буклета, баннера и так далее. Пользователь выбирает один из шаблонов (для сайтов их 16) или работает с нуля.
В сервисе очень простой редактор: макеты строятся всего из шести типов элементов. Здесь картинка, фоновый блок, фигура произвольной формы, логотип, текст, линия. К редактору подключен фотобанк с бесплатными изображениями, так что картинки можно загружать напрямую при создании макета.
Цена: макеты создаются бесплатно. Платить нужно за скачивание — от 150 рублей за одно скачивание, либо за публикацию в онлайн — 50 рублей. При покупке пакетного тарифа будет дешевле.
Mockflow
Mockflow — онлайн-сервис для прототипирования сайтов
Инструмент для быстрого прототипирования сайтов, предназначен для UI/UX дизайна. Макет сайта составляется из готовых блоков — например, хедера, карточки товара, баннера или блока «Эти товары недавно искали…». Эти блоки можно лишь изменять по размеру, отредактировать их цвет или содержимое не получится. Перед созданием макета нужно выбрать, для какого интерфейса вы будете составлять прототип, это повлияет на набор блоков.
Цена: есть бесплатный тариф на один проект объемом не более трех страниц. Далее от 15 долларов в месяц.
iPlotz
Конструктор iPlotz для создания макета сайта онлайн
Удобный, хотя и немного устаревший онлайн-конструктор макетов сайтов. Работает на Flash Player, поэтому может притормаживать, особенно на слабых компьютерах.
По смыслу похож на Mockflow — есть набор уже готовых элементов сайта, которые надо перетянуть на рабочую панель, меняется только их размер. Практически все элементы выполнены в градациях серого, цветных очень мало.
Здесь также есть два обширных набора иконок, растровый и векторный, и набор курсоров в виде «показывающих пальцев» — видимо, он предназначен для создания подсказок верстальщику и программисту, как должен нажиматься или двигаться определенный элемент.
Цена: бесплатно за один пятистраничный проект, далее от 15 долларов в месяц.
Moqups
Онлайн-конструктор макетов сайта Moqups
В этом онлайн-конструкторе макетов можно сделать сайт, диаграмму или график, подготовить бизнес-отчет.
Здесь 24 шаблона макетов сайтов и возможность создать макет с нуля. Пользователю предлагается собрать свой сайт из готовых блоков: текст, кнопка, ссылка, радиопереключатель, поле для ввода текста, прокрутка страницы, баннер и так далее. Все элементы можно настраивать: менять цвет, размер и текст на них. Если создаете проект из нескольких страниц, то можно линковать их между собой, чтобы сайт был более реалистичным.
Цена: бесплатно доступен один проект из максимум 200 элементов, далее от 16 долларов в месяц.
Marvel
Создание макета сайта онлайн в сервисе Marvel
Еще один сервис для создания макета сайта онлайн. Приятный современный интерфейс, инструментов немного, но достаточно для работы. Есть уже готовые элементы сайта с возможностью редактирования, фигуры — прямоугольник, эллипс, линия, и изображения со встроенным фотобанком.
А еще Marvel поможет сымитировать работающий сайт еще до верстки. Как это работает: вы загружаете готовые макеты страниц в сервис и настраиваете их связи — например, выделяете область кнопки на одной странице и выбираете другую страницу, куда нужно перейти по клику на эту кнопку. В итоге получаете симуляцию сайта или приложения, в которой можно «потыкать» и оценить удобство и логику связи страниц.
Цена: бесплатно для одного проекта без возможности скачивать созданные файлы. Далее от 12 долларов в месяц.
Justinmind
Бесплатная программа для макетирования сайтов
Десктопная программа с обширными возможностями. В начале работы пользователь выбирает, для какого интерфейса будет создавать дизайн: мобильного на Android или iPhone, десктопа, планшета. Затем миксует страницу из готовых компонентов, которые можно гибко настроить под себя: изменить цвет, размер, текст и картинки.
Программа выгодно отличается от схожих онлайн-сервисов количеством функций, даже на бесплатной версии. Можно посмотреть симуляцию того, как страница будет выглядеть на устройстве, и экспортировать результат в формате HTML. Интерфейс напоминает Photoshop — дизайнерам будет легко разобраться. Программа принимает на вход файлы из Photoshop, Sketch и Adobe XD.
Цена: неограниченная бесплатная версия. Платные начинаются от 19 долларов в месяц и отличаются возможностью командной работы, расширенными наборами элементов, усиленной поддержкой и прочими бонусами.
GIF и PNG-8
Разница между этими форматами — в лицензировании, и нашей темы это не касается. Кроме того, GIF умеет работать с анимацией, а PNG-8 — нет. Если ваше изображение содержит ограниченное количество цветов (от 1 до 256), а также области прозрачного — сохраняйте в одном из этих форматов.
Старинная гравюра содержит минимум цветов и построена на штрихах. оптимальный формат — GIF или PNG-8GIF использует сжатие без потерь в формате LZW и поддерживает анимацию.
Его основное ограничение — палитра в 256 цветов. В конце 80-х, когда формат был создан, это было оправдано. Тогдашние дисплеи больше цветов и не поддерживали. Однако с развитием технологий такая цветопередача оказалась недостаточной. GIF не справляется с градиентными переходами цветов.
Однако, если говорить об анимации, проблемы с цветопередачей отходят на задний план: в этом случае мы менее чувствительны к качеству картинки.
При сохранении GIF и PNG-8 «Фотошоп» предлагает несколько опций. Первая: выбрать количество цветов. Больше цветов — больше вес. Смотрите, чтобы не уходило качество и не терялась резкость, и ориентируйтесь на минимальную по размерам палитру.
Если изображению не нужна прозрачность — снимите соответствующую галочку.
В некоторых случаях в индексированное изображение надо подмешать немного «шума», чтобы скрыть артефакты. Это используется для сохранения GIF и PNG-8, создаваемых из фотографий и видео (если речь о GIF). «Фотошоп» предлагает несколько типов такого шума, выбирайте подходящий.
Напомню: GIF и PNG-8 не стоит масштабировать! Сохраняйте их в том размере, в каком они должны отображаться на мониторе.
Как вставить картинку в HTML: РАЗМЕРЫ ИЗОБРАЖЕНИЯ
Изображения, сохраняемые в папках сайта, должны обладать теми же самыми значениями высоты и ширины, что вы указали в коде страницы.
Например, если вы создали веб-страницу, которая включает изображение 150 пикселов в ширину и 300 в высоту, то вам нужно использовать изображение с размерами 150 х 300 пикселов. Для кадрирования или изменения размеров имеющегося изображения вы можете воспользоваться графическим редактором
При создании изображений для сайта очень важно понимать то, как можно изменять их размеры. Давайте представим, что вы создали веб-страницу, на которой нужно разместить изображение шириной 300 и высотой 150 пикселов
- УМЕНЬШЕНИЕ РАЗМЕРА ИЗОБРАЖЕНИЯ
Вы можете уменьшить размер исходного изображения для создания его миниатюры.
Пример. Если ширина вашего изображения 600 пикселов, а высота — 300, то вы можете уменьшить размер изображения на 50%.
Результат. Это приведет к созданию изображения, скорость загрузки которого выше, чем исходного.
- УВЕЛИЧЕНИЕ РАЗМЕРА ИЗОБРАЖЕНИЯ
Значительное увеличение размера фотографии без потери качества рисунка невозможно.
Пример. Увеличение размеров изображения 100 пикселов в ширину и 50 в высоту на 300% приведет к ухудшению его качества.
Результат. Изображение станет размытым или пикселизированным.
- КАДРИРОВАНИЕ ИЗОБРАЖЕНИЯ
Не все изображения можно кадрировать без потери важной графической информации. Пример
Если изображение представляет собой квадрат со стороной 300 пикселов, то вы можете обрезать какую-либо его часть, однако при этом вы рискуете потерять важную графическую информацию
Пример. Если изображение представляет собой квадрат со стороной 300 пикселов, то вы можете обрезать какую-либо его часть, однако при этом вы рискуете потерять важную графическую информацию.
Результат. Не все изображения можно кадрировать так, чтобы они не потеряли своей значимости.
Как подготовить размер картинки в photoshop
Главным параметром здесь является соотношение сторон и в программе выставить их проще всего.
Возьмем инструмент «Прямоугольная область», в стилях выставим «Заданные пропорции», затем укажем ширину – 3, высоту – 2 и готово.
Выделим изображение. Если вся картинка вмещается в выделенную область, то все хорошо, если нет, значить копируем выделенную область, создаем новый документ и вставляем в него скопированную картинку.
размер 1600х1067 px
Такие пропорции подойдут для большинства изображений, используемых на сайтах.
Следующим этапом устанавливаем необходимую ширину и высоту. Ставим ширину в 1600 px. При данном соотношении сторон высота подставится автоматически.
Осталось разобраться с весом изображения. Чаще всего я сохраняю с параметрами, указанными на рисунке.
Сохранить для web
Но, можно указать параметры немного ниже, если при этом не пострадает качество изображения.
Это и есть оптимальный размер изображения для сайта, а главное правильные пропорции.
Установка программы Google Web Designer на компьютер.
Установка доступна на компьютерах с операционной системой Mac OS, версия 10.7 и выше, Windows 7 и выше, а также Lunix.
В остальном системные требования щадящие, кроме оперативной памяти, объём которой должен быть не менее 2 Гб.
Процесс установки очень простой.
На главной странице нажмите на кнопку «Download Web Designer Beta».
У вас загрузится установочный файл.
Шаг 2. Установка программы.
Запускайте двойным кликом левой клавиши мышки установочный файл. После чего начнётся процесс установки и загрузки остальных файлов программ. По этому интернет в этот момент должен быть подключён.
Инструменты для оптимизации картинок
Итак подходим к основной части нашей статьи — как нужно правильно оптимизировать картинку для размещения на интернет сайте. Теория позади, переходим к практике.
Онлайн графические редакторы
Наберите в поисковой строке Яндекса «графический редактор онлайн», поисковая выдача покажет все популярные онлайн графические редакторы. В принципе каждый из них подойдет чтобы оптимизировать изображение для сайта. Рассмотрим наиболее популярные.
Photoshop Online — аналог стандартного Фотошопа, с помощью которого можно редактировать фотографии и картинки, накладывать различные эффекты и коллажи.
В редакторе можно открыть сохраненное на компьютер изображение, либо указать на него URL (ссылку).
Открытие файла в онлайн Фотошопе
Меню Изображение -> Размер изображения и выставляем нужное нам, обязательно оставляйте галочку сохранять пропорции. После это сохраняем готовый файл на компьютер. При сохранении выбираем формат JPEG и устанавливаем качество выше среднего (бегунок Качество на 60-80). Размер итогового файла должен получить до 100Kb, я считаю это оптимальным.
Сохраняем оптимизированное изображение
Другие популярные онлайн графические редакторы
- SUMO PAINT — бесплатный редактор изображений, имеет русский интерфейс, основан на Флэш-технологиях, похож на Фотошоп.
- FOTOFLEXER — бесплатный редактор, имеет русский язык, интерфейс отличается от Фотошоп (может это для кого-то является плюсом).
- FOTOR — простой и довольно мощный редактор, позволяющий редактировать изображения и делать коллаж. Имеет русский язык, правда встречаются огрехи перевода.
Графические редакторы для компьютера
Онлайн редакторы конечно хорошо, но они требуют подключения к интернету, хотя это наверное не является проблемой на сегодня. Но все же в большинстве случаев все пользуются десктопными программами, это и быстрее и более функционально.
XnView
Наверное наиболее распространенная бесплатная кроссплатформенная программа для просмотра и редактирования изображений. Поддерживает все известные форматы графических файлов (всего более 500). В ней можно весьма удобно и быстро обработать огромное количество фотографий в пакетном режиме, используя опцию «изменение размера».
Не имеет смысла описывать все возможности данной программы, коих великое множество, перейдем к нашей задаче — оптимизации изображения для сайта.
Открываем файл, далее меню Изображение -> Изменение размера. Я рекомендую использовать выпадающее меню Предустановленный размер, в котором можно выбрать любой стандартный размер изображения в пикселях, либо в процентном выражении, что очень удобно.
Изменение размера изображения в XnView
После этого идем в меню Файл -> Сохранить как… Тип файла выбираем JPG-JPEG / JFIF, далее нажимаем кнопку Опции. Выставляем бегунок качества на 60-80 и сохраняем оптимизированное изображение на компьютер.
Фотошоп (Adobe Photoshop)
Последний на сегодня способ как можно оптимизировать изображение для сайта. Для этого нужна установленная на Ваш компьютер программа Adobe Photoshop.
В меню Файл выбираем пункт Сохранить для Web… Далее все интуитивно понятно (см. скриншот)
Оптимизируем картинку в Фотошоп
Лично мне этот вариант кажется наиболее простым и при этом получаем более качественное оптимизированное изображение для сайта. Хотя я уверен, что многие со мной будут спорить. Знание и умение работать в программе Фотошоп во многом облегчит Вам жизнь в дальнейшем ведении Вашего блога.
Если Вы хотите научится работать в этой программе рекомендую бесплатные обучающие курсы по Photoshop от Накрошаева Олега.
С Уважением Дмитрий Леонов | leonov-do.ru
Подпишитесь на рассылку с блога
Вставляем видео и аудио с помощью HTML 5
В новой спецификации html5 появилось несколько новых тегов с помощью которых можно очень легко вставлять файлы мультимедиа. Это прежде всего касается видео и аудио.
Для вставки аудио HTML5 предоставляет парный тег AUDIO. Адрес файла, в котором хранится аудиоролик, указывается с помощью уже знакомого нам атрибута src:
Тег «audio» создает на странице блочный элемент. По умолчанию браузер не будет воспроизводит аудиоролик. Что бы он это сделал, в теге audio необходимо указать особый атрибут autoplay. Особый, потому что он не имеет значения. Достаточно одного присутствия этого атрибута в теге, чтобы он начал действовать.
По умолчанию аудиоролик никак не отображается на web-странице. Но если в теге «audio» поставить атрибут без значения controls, браузер выведет в том месте веб-страницы, где проставлен тег audio, элементы управления воспроизведением аудиоролика. Они включают кнопку запуска и приостановки воспроизведения, шкалу воспроизведения и регулятор громкости:
Для вставки видеоролика на веб-страницу предназначен парный тег video. С этим тегом все тоже самое, что и с тегом audio — адрес видеофайла указывается с помощью атрибута src, а с помощью атрибутов autoplay и controls можно запустить автовоспроизведение ролика и вывести элементы управления воспроизведения видеоролика.
Больше рассказывать о вставке картинок и мультимедиа на html страницы особо нечего. Надеюсь на вопрос «Как вставить изображение в html страницу?» я вам ответил. поэтому просто подведу итоги :
- для вставки изображений на html страницу пользуемся одиночным тегом img и указываем адрес файла с картинкой в атрибуте src;
- с помощью атрибута alt тега img можно задавать текст замены на случай если изображение не загрузится;
- с помощью атрибутов width и height можно задавать размеры изображения на веб-странице;
- для вставки аудио и видео в html5 есть парные теги audio и video соответственно.
5 причин подготовки изображений для WEB
Большой вес изображения. Если Вы например разместите у себя на сайте фото которое весит несколько мегабайтов, во-первых Вы перегружаете и нарушаете работу своего сервера, во-вторых у Вас очень долго будет грузится страница, где Вы разместили свою картинку. А это сильно влияет на посещаемость сайта. Запомните, люди не любят посещать сайты которые тормозят и долго грузятся.
Во время вёрстки веб-дизайна, все элементы макета будущего сайта (картинки в формате .png и .jpg) обязательно подготавливаются для интернета, без этого вёрстка невозможна.
Неправильные пропорции фотографии, которые приводят к искажению. Этот пункт я думаю не нуждается в разъяснение.
Высокая потеря качества изображения. Когда Вы загружаете свои новые фотоснимки например в социальные сети или на интернет аукционы, то наверняка Вы заметили, что они становятся не такие четкие, цветные, контрастные как были изначально. Дело в том, что когда вы загружаете свои изображений на
какие-либо интернет ресурсы, они автоматически сжимают и ухудшают качество ваших изображений.
В некоторых ситуациях требуется загрузка изображения определенного размера и формата. Например Вам нужно загрузить иконку 16×16 пикселей в формате .png для своего сайта. Все это легко и просто можно сделать в Фотошоп.
Со всеми этими задачами прекрасно справляется наша любимая программа Adobe Photoshop CC. Разработчиками Фотошоп был придуман очень полезный и нужный модуль с функцией сохранения изображений для интернета (Save for Web).Это мощный модуль управления процессами оптимизации и сохранения документов, который автоматически подбирает оптимальные настройки сохраняемого файла. Этот модуль поддерживает и работает с самыми распространенными форматами файлов для интернета .jpg, .gif, .png.
выбор нескольких режимов просмотра во время оптимизации изображения для web
выбор формата в котором изображение будет сохранено
выбор качества и размера сохраняемого изображения
выбор способа оптимизации, сжатия и просмотр веса оптимизированного изображения.
На этом вся теория заканчивается, переходим к практике. Для начала давайте откроем изображение или фотографию которую будем сохранять для интернета. Я буду работать с этим изображением:
Для того, чтобы перейти к сохранению для web, заходим в верхнее меню Файл/Сохранить для web или воспользуемся горячими клавишами Ctrl+Alt+Shift+S.
Перед нами должно открыться окошко с настройками как показано на скриншоте ниже. Не нужно бояться большого количества кнопочек и настроек, мы будем пользоваться лишь некоторой частью из них и чуть ниже подробно разберем для чего они нужны и как ими пользоваться.
Описание опций:
1. Четыре вкладки вариантов предварительного просмотра.
— Исходное — это когда Вы видите тока своё исходное изображение
— Оптимизация — это когда Вы видите в предварительном просмотре только оптимизированное изображение
— 2 Варианта — это когда Вы видите своё исходное изображение вверху, а оптимизированное внизу. Этом вариант самый удобный и больше всего мне нравится, именно поэтому я его и выбрал.
— 4 Варианта — это когда Вы видите в предварительном просмотре исходное изображение, изображение в качестве котором Вы выбрали, изображение в качестве 22 и изображение в качестве 11.
2. Формат сохраняемого файла. В нашем случае мы выбираем JPEG.
— PNG — формат файла для сохранения Веб-графики. Бывает двух видов, 8 bit -индексированые изображения, 24 bit — «все» цвета. Обычно в этом формате сохраняют клипарты и логотипы на прозрачном фоне.
— GIF — устаревший формат файла для сохранения Веб-графики. Чаще всего в этом формате сохраняют файлы с ограниченным количеством цветов, таблицы, схемы, логотипы, так же формат поддерживает анимацию и прозрачный фон. Этим форматом пользуются всё меньше и меньше, потому что появился более лучший формат PNG.
— JPEG — Самый популярный формат. Прекрасно подходит для сохранения фотографий и изображений со множеством цветов, оттенков, эффектов.
3. Значение качества. Мне нравится «Высокое».
— Низкое
— Среднее
— Высокое
— Очень высокое
— Наилучшее
4. Здесь ставим галочку в значение «Оптимизация«
Рассматривать и заострять внимание на опциях «Прогрессивный» и «Встроенный профиль«, мы не будем так как большинство веб-браузеров их не поддерживают
5. Ставим галочку для того чтобы включить опцию «Преобразовать в sRGB«. Это нужно для того чтобы, наше изображение корректно отображалось на веб-сайте и сохранилось в цветовом пространстве sRGB.
6. Выставляем нужный размер изображения. В моём случае это, ширина 500 — пикселей, высота — 281 пиксель.
7. Размер оригинального изображения.
8. Размер оптимизированного изображения для интернета.
