Работа с изображениями, видео и другими медиа

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

Существует огромная разница между разными графическими форматами, поэтому уделите внимание тому, когда какой использовать. Помните, обычно приходится подбирать оптимальное соотношение размера и качества изображения (однако, иногда также приходится учитывать анимацию или прозрачный фон), поэтому поймите разницу между gif, jpg, bmp, png и svg.

Пункты для размышления

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

Задание:

  1. Прочитайте про изображения и медиа (включая CSS) от Шея Хау (Shay Howe)
  2. Прочитайте про разницу между графическими форматами файлов (смотрите первый ответ) от SO, чтобы проверить, не пропустили ли вы чего-нибудь.
  3. Посмотрите YouTube видео о том, как добавить видео на страницу
  4. Просмотрите простое объяснение разницы между растровыми и векторными изображениями от YouTheDesigner.com. Не беспокойтесь о том, чтобы усвоить все это - у вас будет время вернуться к этому позже.
  5. Прочитайте про изображения на htmlbook на русском

Дополнительные ресурсы

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

Поделиться уроком: