Графика — итоги
Кратко — что стоит унести из раздела "Графика". Если пункт кажется туманным — откройте указанную главу или оглавление.
FAQ — Часто задаваемые вопросы
Типичные проблемы с картинками и экспортом — и поисковые запросы (JPEG, PNG, SVG, Photoshop). Краткий ответ здесь; термины — в чек-листе.
Вопрос. Загрузил фото на сайт — на телефоне чётко, на мониторе размыто.
Ответ. Мало пикселей для ширины блока или нет @2x / srcset. Увеличьте исходное разрешение или отдайте WebP/AVIF в двух размерах. Подробнее здесь — растровые форматы, сравнение форматов.
Вопрос. PNG-логотип 5 МБ — "оптимизатор" не помогает.
Ответ. Логотип с текстом лучше в SVG; PNG сжимайте (pngquant, oxipng) или уменьшите размер холста. Подробнее здесь — векторные форматы.
Вопрос. Сохранил иконку как JPEG — вокруг белые углы на тёмном фоне сайта.
Ответ. JPEG не поддерживает прозрачность. Нужен PNG/WebP с альфа или SVG. Подробнее здесь — растровые форматы.
Вопрос. SVG в браузере есть, в Photoshop "не открывается как слои".
Ответ. Photoshop растрирует SVG при импорте; для правки вектора — Inkscape, Illustrator, Figma. Подробнее здесь — вектор и растр.
Вопрос. Скриншот интерфейса в JPEG — мелкий текст нечитаем.
Ответ. Lossy JPEG размывает резкие границы текста. Скриншоты — PNG или WebP lossless. Подробнее — как PNG сжимает, сравнение форматов.
Вопрос. Картинку "увеличил" в редакторе — качество пропало.
Ответ. Растр при upscale интерполирует пиксели, детали не появляются. Нужен исходник большего размера или вектор. Подробнее здесь — вектор и растр.
Вопрос. Цвета на мониторе и после печати сильно отличаются.
Ответ. sRGB vs CMYK, профили, не калиброванный монитор. Для печати — отдельный экспорт и soft proof. Подробнее здесь — графический дизайн.
Вопрос. GIF для презентации — файл огромный и 256 цветов "полосит".
Ответ. GIF устарел для фото; короткая анимация — WebP/APNG или MP4 loop. Подробнее здесь — растровые форматы.
Вопрос. Figma макет "идеальный", на Android кнопки съехали.
Ответ. Экспорт @1x/@2x, constraints, dp vs px. Проверьте на реальном устройстве, не только в preview. Подробнее здесь — графический дизайн.
Вопрос. Photoshop "завис" на 400 МБ PSD — ноутбук греется.
Ответ. Много слоев, smart objects, history states. Flatten для финала, увеличьте scratch disk, закройте лишние документы. Подробнее здесь — Photoshop.
Вопрос. Paint.NET "достаточно", но учитель просит слои как в Photoshop.
Ответ. Paint.NET поддерживает слои базово; для сложного монтажа — GIMP/Krita или учебная версия Photoshop. Подробнее здесь — Paint.NET.
Вопрос. 3D-модель в Blender не видна в viewport — только камера пустая.
Ответ. Объект вне clip range камеры, скрыт коллекцией, масштаб 0.001. Home для frame all, проверьте outliner. Подробнее здесь — 3ds Max / 3D, геометрия.
Вопрос. Экспорт PNG из 3D — фон должен быть прозрачным, а он белый.
Ответ. Включите alpha в render settings, формат PNG RGBA, не JPEG. Подробнее здесь — графические данные.
Вопрос. Карта в GeoJSON "улетела" в океан — координаты перепутаны?
Ответ. GeoJSON — порядок [longitude, latitude], не lat/lon как в Google Maps UI. Подробнее здесь — геометрия.
Вопрос. Иконка 16×16 пикселей — на Retina экране "мыльная".
Ответ. Нужен набор размеров или SVG; ICO может содержать несколько resolutions. Подробнее здесь — сравнение форматов.
Вопрос. WebP "не открывается" в старом просмотрщике Windows 7.
Ответ. Старые системы без кодека WebP; держите запасной JPEG/PNG для совместимости. Подробнее здесь — растровые форматы.
Вопрос. Обрезал фото "по центру лица" — в соцсети кроп другой.
Ответ. Платформы применяют свои aspect ratio (1:1, 4:5). Экспортируйте под целевой формат с safe zone. Подробнее здесь — графический дизайн.
Вопрос. "Удалил фон" онлайн-сервисом — по краям белый ореол.
Ответ. Полуавтоматическая маска; доработайте feather и refine edge в редакторе. Для серии фото — единый workflow. Подробнее здесь — Photoshop.
Вопрос. В игре текстуры "плывут" при движении камеры.
Ответ. Mipmapping, filtering, anisotropic; низкое разрешение текстур на больших полигонах. Подробнее здесь — графические данные.
Вопрос. Turtle-графика: черепаха "рисует не туда" — ось Y вверх?
Ответ. В turtle Y вверх, на экране UI — часто вниз. Угол поворота и starting heading задают траекторию. Подробнее здесь — геометрия.
Вопрос. Экспорт SVG из Illustrator — файл 2 МБ для простой иконки.
Ответ. Лишние метаданные, неупрощённые кривые. "Save optimized SVG", svgo в pipeline. Подробнее здесь — векторные форматы.
Вопрос. HEIC с iPhone — Windows не открывает без доп. программы.
Ответ. Установите HEIF extension из Store или конвертируйте в JPEG при экспорте на телефоне. Подробнее здесь — растровые форматы.
Вопрос. Два монитора — картинка на втором темнее.
Ответ. Разные панели и яркость; калибровка или профили ICC per display. Для дизайна критично. Подробнее здесь — графический дизайн.
Вопрос. Visio/DWG открыли как "каша" в бесплатном viewer.
Ответ. Специализированные форматы требуют родного или совместимого редактора; экспорт в PDF/SVG для просмотра. Подробнее здесь — графические данные.
Вопрос. AI "улучшил" фото — лица выглядят пластиково.
Ответ. Генеративный upscale добавляет "выдуманные" детали. Для документов и портретов — умеренность или отказ. Подробнее здесь — Photoshop, графический дизайн.
Вопрос. Нужна одна картинка "на всё" — сайт, печать, презентация.
Ответ. Храните мастер в максимальном качестве (PSD/RAW), экспортируйте отдельно под веб (sRGB, сжатие) и печать (CMYK/300 DPI). Подробнее здесь — итоги форматов.
Вопрос. Скачал стоковую картинку — водяной знак на превью, на полной версии нет. Можно в отчёт?
Ответ. Только при лицензии (часто платной). Preview без покупки — нарушение. Используйте CC0/Unsplash с указанием авторства если требуется. Подробнее здесь — графический дизайн.
Вопрос. Чем JPEG отличается от PNG?
Ответ. JPEG — сжатие с потерями для фото; PNG — без потерь, прозрачность, скриншоты. Как JPEG сжимает · как PNG · сравнение.
Вопрос. WebP или JPEG для сайта — что лучше?
Ответ. WebP/AVIF меньше при том же качестве; JPEG — запасной для старых клиентов. Подробнее здесь — растровые форматы.
Вопрос. SVG — что это такое простыми словами?
Ответ. Векторный формат: описание линий и фигур, масштабируется без "мыла". Подробнее здесь — векторные форматы.
Вопрос. Как уменьшить размер JPEG для сайта?
Ответ. Экспорт с качеством 75–85%, ресайз по ширине блока, WebP как альтернатива. Подробнее здесь — сравнение форматов.
Вопрос. PNG или JPG для скриншота с текстом?
Ответ. PNG (или lossless WebP) — JPEG размывает мелкий текст. Подробнее здесь — сравнение.
Вопрос. DPI и PPI — в чём разница?
Ответ. PPI — плотность пикселей экрана; DPI — точек печати. Для веба важнее размер в пикселях и DPR. Подробнее здесь — графические данные.
Вопрос. Как сделать прозрачный фон у картинки?
Ответ. PNG/WebP с альфа или SVG; в редакторе удалите фон слоем/маской. Подробнее здесь — растровые форматы.
Вопрос. GIMP бесплатно — как обрезать и сохранить фото?
Ответ. Инструмент обрезки, "Экспорт как" JPEG/PNG. Исходник сложных работ — в XCF. Подробнее здесь — графический дизайн.
Вопрос. Figma бесплатно — можно ли для учёбы?
Ответ. Бесплатный тариф для личных и учебных макетов UI; экспорт PNG/SVG. Подробнее здесь — графический дизайн.
Вопрос. Растр или вектор — что выбрать для логотипа?
Ответ. Вектор (SVG, AI) для логотипа и иконок; растр — для фото. Подробнее здесь — вектор и растр.
Вопрос. Retina @2x — что значит для картинок на сайте?
Ответ. Удвоенное разрешение для чёткости на HiDPI; srcset или вектор. Подробнее здесь — сравнение.
Вопрос. HEIC в JPEG — как конвертировать с iPhone?
Ответ. Настройки камеры "Наиболее совместимые" или конвертер на ПК. Подробнее здесь — растровые форматы.
Вопрос. ICO файл — как сделать favicon для сайта?
Ответ. Квадрат 16×16, 32×32 в одном .ico или PNG + <link rel="icon">. Подробнее здесь — вектор и растр.
Вопрос. GIF или MP4 для анимации на сайте?
Ответ. Короткая loop-анимация — MP4/WebM легче; GIF — простота, но тяжёлый и 256 цветов. Подробнее здесь — растровые форматы.
Вопрос. Paint.NET или GIMP — что проще для новичка?
Ответ. Paint.NET легче для обрезки и фильтров; GIMP мощнее для слоёв. Подробнее здесь — Paint.NET.
Вопрос. Какой формат для печати фото дома?
Ответ. JPEG высокого качества или TIFF; разрешение под размер отпечатка (300 DPI для печати). Подробнее здесь — графический дизайн.
Вопрос. AVIF формат — поддерживают ли браузеры?
Ответ. Современные Chrome/Firefox/Safari — да; держите JPEG/PNG fallback. Подробнее здесь — растровые форматы.
Вопрос. Как конвертировать PNG в SVG?
Ответ. Автотрассировка (Inkscape) даёт грубый вектор; логотип лучше рисовать в векторе с нуля. Подробнее здесь — векторные форматы.
Вопрос. Photoshop бесплатно — есть ли легальная альтернатива?
Ответ. GIMP, Photopea (браузер), Krita — по задаче. Подробнее здесь — Photoshop.
Вопрос. GeoJSON — что это и зачем на картах?
Ответ. Текстовый формат геометрии (точки, линии, полигоны) для GIS и веб-карт. Подробнее здесь — геометрия.
Вопрос. Что такое альфа-канал в PNG?
Ответ. Канал прозрачности пикселя — фон не белый, а "дырка" для наложения. Подробнее здесь — растровые форматы.
Вопрос. 2D и 3D графика — в чём разница для игр?
Ответ. 2D — спрайты на плоскости; 3D — сцена, камера, меши. На экране оба — растр. Подробнее здесь — графические данные.
Что запомнить
Основные категории
- Растровые изображения — сетка пикселей (JPEG, PNG, WebP, AVIF, GIF, TIFF…).
- Векторные описания — примитивы и кривые (SVG, иконки в UI, CAD/DXF).
- Географические данные — координаты и атрибуты (GeoJSON, Shapefile, GeoPackage, KML).
- Специализированные — рабочие и отраслевые (PSD, Visio, DWG, ICO).
Три правила на практике
- Формат под задачу: иконка → SVG; фото на сайте → WebP/AVIF + запасной JPEG; скриншот с текстом → PNG, не JPEG.
- Качество и вес: lossy для фото, lossless для UI; учитывайте DPR (
@2x) или вектор на Retina. - Исходники — макеты храните в редактируемом виде (PSD, Figma, SVG), в продукт отдавайте оптимизированный экспорт.
Три опорных понятия
- Растр фиксирует пиксели; вектор хранит инструкции — на экране оба становятся растром при отображении.
- 2D — плоскость UI и спрайтов; 3D — сцена с камерой и проекцией на кадр.
- Координаты зависят от контекста — экран (Y вниз), turtle (Y вверх), GeoJSON (долгота, широта).
Детали — в статьях раздела; шпаргалка форматов — в таблице сравнения.
Куда идти дальше
| Тема | Раздел |
|---|---|
| Текст | Текст |
| Аудио и видео | Аудио и видео |
Проверьте себя: Чек-лист самопроверки.