Просто о создании сайтов и баннеровИзображения · Код · WordPress

Сделайте.
Покажите.
Запустите.

WEB ARTICLE / WORKSHOP

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

Выберите задачу
Редакционная композиция: ноутбук, бумажные макеты и печатные изображения на рабочем столе
Редакционная иллюстрация, созданная с помощью ИИ.

Начните с одного файла

Все руководства ↗
4000 × 300012 000 000 px
1600 × 12001 920 000 px
01 / Изображения

Как уменьшить фото и сохранить детали

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

PhotoshopsrcsetWebP
Открыть инструкцию

Разобраться и сделать

01

Прозрачный фон без белой каймы

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

02

Растр или вектор: выбираем по задаче

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

03

Скриншот, который помогает решить проблему

Хороший снимок экрана показывает ошибку и её контекст, но не раскрывает пароли, переписку и платёжные данные. Выберите область, а затем проверьте файл перед отправкой.

04

Вместо Flash: ссылка, анимация и обычный HTML

Adobe прекратила поддержку Flash Player 31 декабря 2020 года. Инструкции по установке старого плагина не подходят для запуска современного сайта.

05

Защита WordPress: сначала восстановление, потом плагины

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

06

Читаемая статья: длина строки, ритм и контраст

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

THE WEB WORKBENCH

Меньше догадок. Больше проверки.

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

Открыть мастерскую