Какой тип файла изображения использовать для WordPress
И снова здравствуйте!
Изображения. Что вы думаете об изображениях? Какие типы изображений вы используете на своем сайте WordPress? У вас есть свои предпочтения?
Вот я сегодня и решил написать небольшую статью про изображения. Какие типы бывают, почему вы должны выбрать правильный тип для своего сайта и лучшие практики использования изображений в WordPress.
Если вы работали с сайтом WordPress некоторое время, вы, вероятно, задаетесь вопросом, какой тип файла изображения лучше всего подходит для вашего сайта. Вы должны использовать JPG или PNG? Возможно, вы хотите использовать другой тип файла изображения, например WebP, но не знаете, что делать. Если это не так, возможно, вы хотите загрузить изображение PSD, AI или INDD и застряли.
Независимо от того, почему вы здесь, сегодняшняя публикация поможет вам выбрать правильный тип файла изображения для вашего сайта WordPress. Почему необходим правильный тип файла изображения? Я также расскажу об этом в посте. Вдобавок ко всему, я выделю принятые типы файлов изображений, как добавить другие типы файлов и коснусь нескольких лучших практик WordPress для изображений.
Если это звучит здорово, давайте поднимем якорь и отправимся в плавание, так как есть чему поучиться.
Почему важно выбрать правильный тип файла изображения?
Выбор идеального типа файла изображения сложнее, чем вы думали, и я это понял. Но вы должны обратить пристальное внимание на тип файла, который вы используете, поскольку он коррелирует с эффективностью вашего сайта. Итак, почему важно учитывать тип файла изображения, который вы выбираете?
- Скорость и производительность — некоторые типы файлов изображений занимают больше места, чем другие. Если вы используете большие графические форматы, вы замедляете свой веб-сайт и увеличиваете расходы на сервер. Переходите к легким изображениям, которые гарантируют лучшую скорость страницы и производительность для оптимального пользовательского интерфейса (UX).
- СЕО-оценка — знаете ли вы что, скорость страницы является прямым сигналом ранжирования СЕО? Если вы используете изображения высокого или низкого качества на своем веб-сайте, вы упускаете лучшие UX и связанные с ним преимущества СЕО. Выбирая высококачественные и СЕО-готовые изображения, вы можете улучшить качество своих страниц.
- Эстетика. Некоторые форматы изображений сохраняют детали лучше, чем другие, даже после сжатия. Вы хотите, чтобы формат изображения выглядел великолепно для этого отточенного, высококачественного и профессионального вида. Каждый формат изображения идеально подходит для конкретного использования, поэтому выбирайте с умом.
- Адаптивный дизайн. В настоящее время пользователи посещают ваш веб-сайт с различных устройств и с различных браузеров и размерами экрана. Вам нужно выбрать адаптивные типы файлов изображений, которые поддерживаются в большинстве браузеров. Кроме того, вам нужны изображения, которые выглядят потрясающе на разных экранах. Подробнее об этом позже.
- Согласованность. Для обеспечения согласованности я рекомендую придерживаться одного основного типа файлов для ваших изображений. Вы можете использовать другие форматы файлов по запросу или в зависимости от ваших потребностей, но одного или двух форматов должно быть достаточно.
Помимо этого, давайте поговорим о доступных типах файлов изображений.
Доступные типы файлов изображений
От многих новичков скрыт тот факт, что существует целый мир графических форматов. Да, есть сотни типов файлов изображений, которые нам понадобятся и чтобы охватить их все скорее всего нужна будет отдельная электронная книга, рассказывающая о всех этих типах. Однако не волнуйтесь, мы сосредоточимся только на графических форматах, которые идеально подходят для сайтов WordPress.
Форматы изображений подразделяются на две широкие категории: растровые и векторные изображения.
Растровые изображения состоят из серии пикселей для формирования изображения. По этой причине растровые изображения обычно теряют свое разрешение при сжатии или растяжении. Три популярных формата изображения — JPG, PNG и GIF — являются растровыми изображениями, которые составляют большую часть всех фотографий, которые вы видите в интернете.
Векторные изображения, с другой стороны, создаются с использованием математических формул, а не пикселей, что означает, что они более гибки в плане частого изменения размера. Популярные типы векторных изображений включают в себя, среди прочего, формат Adobe EPS (Encapsulated PostScript), SVG (масштабируемая векторная графика), PDF, WEBP и Adobe Illustrator.
Для регулярного использования сайта, перейдите на растровые изображения. В то же время вы можете создавать векторные изображения ваших логотипов и других изображений, которые требуют частого редактирования и изменения размера. В идеале вы должны конвертировать все векторные изображения в растровые изображения, прежде чем использовать их на своем сайте WordPress.
Почему?
Поскольку растровые изображения легче и поддерживаются всеми браузерами, вы должны выбрать JPG или PNG. Если вам нужны анимации, у вас есть формат GIF. Теперь у нас осталось всего три из сотен форматов изображений.
Возникает вопрос: а какие типы файлов изображений поддерживает WordPress?
Принятые типы файлов изображений
Согласно Кодексу, WordPress по умолчанию принимает форматы изображений JPG, JPEG, PNG, ICO и GIF. Если вы не уверены, JPEG — это просто JPG, а ICO — это формат изображения, который вы используете для иконок. На веб-сайте WordPress для вашего фавикон (favicon) обычно используется значок, а не изображения в ваших сообщениях или страницах.
По умолчанию вы можете загружать только JPG и PNG на свои страницы и сообщения. Если вы хотите добавить другие типы файлов изображений по какой-либо причине, вы можете использовать плагин, такой как WP Extra File Types. Если вам не нравятся плагины, вы можете добавить следующий код в ваш файл wp-config.php:
define ('ALLOW_UNFILTERED_UPLOADS', true);Для альтернативного метода добавьте следующий код в ваш файл functions.php:
<? php add_filter ('upload_mimes', 'my_myme_types', 1, 1); function my_myme_types ($ mime_types) { $ mime_types ['svg'] = 'image / svg + xml'; // Добавление расширения .svg $ mime_types ['json'] = 'application / json'; // Добавление расширения .json unset ($ mime_types ['xls']); // Удалить расширение .xls unset ($ mime_types ['xlsx']); // Удалить расширение .xlsx return $ mime_types; } Приведенный выше код добавит поддержку расширений SVG и JSON. Если вы хотите добавить расширения для других форматов изображений, отредактируйте вышеуказанный код соответствующим образом.
Если вы сталкиваетесь с проблемами при добавлении новых типов файлов, сначала свяжитесь с вашим хостинг-провайдером, так как они могут иметь ограничения. Кроме того, какой формат файла изображения лучше всего использовать?
Какой тип файла изображения лучше всего использовать?
В следующем разделе мы рассмотрим три самых популярных графических формата для веб-сайтов. Мы рассмотрим JPG, PNG и GIF, выделив лучший формат для различных целей. Начнем с JPG.
JPG
JPG (также известный как JPEG) обозначает «Joint Photographic Experts Group» (объединенная группа экспертов по фотографии). Изображения JPG хорошо подходят для высоких уровней сжатия и могут отображать миллионы цветов, что делает их идеальными для фотографий и изображений с яркими цветами.
Этот формат изображения поддерживает сжатие с потерями, что приводит к небольшому снижению качества изображения после оптимизации. Однако вы можете контролировать уровень сжатия, чтобы обеспечить наилучшее качество и производительность. Изображения JPG не поддерживают прозрачный фон.
PNG
PNG — это сокращение от «Portable Network Graphics» (переносимая сетевая графика), формат изображений, который изначально был разработан для передачи изображений через интернет. Изображения PNG отображают миллионы цветов, но они могут быть тяжелее, чем JPG. Они отлично подходят для скриншотов, логотипов, инфографики и графики основного заголовка, который идентифицирует бренд.
PNG поддерживает сжатие без потерь, что означает, что во время оптимизации данные не теряются. Таким образом, изображения PNG после сжатия становятся более четкими и резкими, чем изображения JPG. Кроме того, тип файла изображения PNG поддерживает прозрачный фон.
GIF
GIF является аббревиатурой от «Graphics Interchange Format» (формат графического обмена). Это формат изображения, который поддерживает анимированные и статические изображения. Большинство анимаций, которые вы видите в социальных сетях, представляют собой изображения в формате GIF. В отличие от JPEG и PNG, тип файла изображения GIF поддерживает только 256 цветов, что делает его непригодным для цветных фотографий и других иллюстраций с цветными градиентами.
GIF использует сжатие без потерь, чтобы уменьшить размер файла без потери качества изображения. Кроме того, GIF поддерживает текстовые метки и прозрачный фон, что делает формат идеальным для простых анимаций и видео с низким разрешением.
Итак, какой из трех вы должны использовать? Все зависит от ваших потребностей. PNG идеально подходит для логотипов, скриншотов, диаграмм, инфографики и высококачественных изображений брендов. JPEG отлично подходит для небольших изображений на вашем сайте, а также фотографий, которые имеют яркие цвета. GIF отлично подходит для анимации и простых видео.
Но выбора типа файла изображения недостаточно, если вы в конечном итоге используете изображения небрежно. В следующем разделе мы познакомимся с несколькими рекомендациями и советами по созданию изображений WordPress.
Лучшие практики использования изображений WordPress
Следуйте приведенным ниже рекомендациям и советам, чтобы максимально использовать ваши изображения. Мы с вами кратко рассмотрим такие области, как размер изображения, максимальный размер загружаемого файла, СЕО, оптимизация и способы использования Google Analytics для информирования о стратегии WordPress для изображений.
Размер изображения
Мы уже установили, что размер изображений, которые вы используете, может влиять на скорость вашего сайта. Таким образом, вы должны стремиться к использованию светлых изображений. В то же время, не пытайтесь создавать визуальное качество при создании светлых изображений, а это означает, что вы должны быть осторожны со сжатием.
Кроме того, не изменяйте размеры изображений, используя HTML или CSS. Если вам нужно изображение размером 300 на 300 пикселей, не используйте изображение размером 400 на 400 пикселей. Кроме того, выберите качественный хостинг WordPress, внедрите кеширование и CDN, чтобы ускорить ваш сайт.
Максимальный размер загрузки
Иногда вам может понадобиться использовать большой файл изображения по той или иной причине. Но у вас могут возникнуть проблемы с загрузкой файла, поскольку WordPress поставляется с размером загрузки по умолчанию 2МБ. Не беспокойтесь, так как вы можете быстро увеличить максимальный размер загрузки.
Во многих случаях хостинг-провайдеры предлагают встроенную настройку, которую вы можете изменить, чтобы увеличить размер загружаемого файла самостоятельно. Например, в Cloudways вам просто необходимо войти в свою учетную запись, перейти к управлению сервером и выбрать раздел «Настройки и пакеты» (как показано выше). Отсюда вы можете вручную увеличить ограничение размера загружаемого файла, отредактировав разрешенный размер МБ.
Но это может и зависеть от хоста. GoDaddy использует опцию в своей C-Panel, Media Temple, вы должны изменить файлы php.ini, а с WP Engine вам нужно связаться с их службой поддержки, чтобы запросить увеличение.
СЕО для изображений
Помимо передачи сообщения и создания хорошего внешнего вида вашего сайта, знаете ли вы, что вы можете использовать изображения для повышения своих результатов СЕО? Это верно — вы можете использовать СЕО для изображений, чтобы привлечь больше трафика на ваш сайт. Но как это сделать? Для начала назовите свои изображения соответствующим образом. Например, вместо «image001.png» использовать «что-такое-сео-изображения.png», и так далее. Кроме того, добавьте alt-тексты ко всем вашим изображениям после загрузки. Благодаря текстам alt, поисковые системы и программы чтения с экрана могут «видеть» ваши изображения.
Полезные плагины WordPress для оптимизации изображений
WordPress — довольно простая в использовании CMS благодаря плагинам. Несмотря на то, что перед загрузкой полезно оптимизировать изображения с помощью программного обеспечения для работы с изображениями (например, Photoshop), вы можете использовать плагины для оптимизации изображений после загрузки.
Известные плагины для оптимизации изображений WordPress включают Smush, EWWW Image Optimizer и Imagify и другие. Выберите плагин, который идеально подходит для ваших нужд, поскольку каждый из них обладает уникальным набором функций.
Используйте Google Analytics
Когда все сказанное сделано, вы хотите обеспечить максимальное удобство для пользователя. Для этого вы должны знать своих посетителей и устройства, которые они используют для доступа к вашему сайту. Таким образом, вы можете выбрать идеальные форматы и размеры изображений. Например, если большинство ваших посетителей используют браузер Apple Safari, вам потребуется дополнительная поддержка для использования файлов изображений WEBP в WordPress.
Подведем итог
Выбор идеального типа графического файла для вашего сайта WordPress жизненно важен с точки зрения скорости, UX, производительности сайта, СЕО и согласованности.
Вы не можете позволить себе оставить эту область без присмотра, поскольку вы выиграете, когда разработаете хорошую имиджевую стратегию. Ваше руководство по стилю должно содержать директивы с изображениями для всех пользователей.
Наконец, сжимайте и оптимизируйте ваши изображения для достижения идеального баланса между качеством и производительностью.
На этом буду заканчивать — до скорых встреч!
Согласен с вами
Действительно, alt не раз подтверждали свою роль в нахождении сайта при поиске. Убеждался не однократно. Когда в запросе оказываются одни только фразы из alt, тогда и это понимаешь. Частенько это игнорируется владельцами ресурсов.