Рубрики

Оптимизация изображений в WordPress: 2 шага для повышения вовлеченности и ускорения загрузки

optim

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

Но у изображений есть темная сторона — проблема скорости загрузки страницы. Хотя существует множество советов, касающихся скорости загрузки, которая фокусируется на кэшировании, эффективном кодировании и т. Д., Размер ваших изображений может оказывать большее влияние, чем все остальные функции вместе взятые. Проще говоря, если вы можете уменьшить размер файла изображения, то люди с большей вероятностью будут зависать на вашем сайте.

Хотя использование динамичных и ярких изображений на вашем сайте в большинстве случаев является необходимостью, это не освобождает вас от использования изображений огромных размеров. В действительности, вы можете получить лучшее из обоих миров (великолепные изображения и быструю скорость загрузки страницы), выполнив всего два простых шага, когда дело доходит до использования изображений на вашем сайте. В этой статье я хочу сосредоточиться на этих шагах и предложить вам простые решения для всех ваших потребностей в оптимизации изображений.

1. Форматы и размеры файлов изображений

Для 99% из вас есть два формата файлов изображений, которые следует учитывать при загрузке в Интернет: JPEG и PNG. В двух словах (и для простоты), JPEG должны использоваться для фотографий и других изображений, которые имеют большое разнообразие цветов, и PNG должны использоваться для более простых изображений (таких как скриншоты и некоторая компьютерная графика).

JPG / PNG СравнениеJPEG — это сжатый формат файла, что означает, что качество несколько снижается, чтобы обеспечить гораздо меньший размер файла. PNG, с другой стороны, несжатый, что означает, что качество лучше, но размер файла больше. В идеальном мире вы всегда использовали бы PNG, но это не всегда практично из-за проблем с размером файла.

После того, как вы определились с форматом файла для изображения, следующее, что нужно сделать, это убедиться, что это подходящий размер. Вы должны загружать изображение в WordPress только в тех размерах, которые будут использоваться на вашем сайте - все, что больше, — это просто потраченное впустую пространство. Бесплатные приложения, такие как MS Paint для Windows и Preview для Mac OSX, позволяют легко изменять размеры изображений.

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

Если у вас есть изображение правильного размера в правильном формате, вы готовы перейти к следующему шагу!

2. Оптимизация изображения

Я уже упоминал, что JPEG — это сжатый тип файла, что означает, что вы получаете изображение, которое все еще имеет относительно высокое качество, но гораздо меньше. Тем не менее, вы не должны просто останавливаться на выборе определенного типа файлов, когда речь идет об оптимизации изображений — на самом деле вы можете сделать больше.

Когда дело доходит до сжатия изображений, я рекомендую использовать плагин, такой как WP Smush.it. Несмотря на то, что будущее этого плагина сомневалось еще пару месяцев назад, с тех пор его взяла на себя замечательная команда WPMU DEV,  что означает, что мы сможем пользоваться плагином высшего качества в течение долгого времени.

WP Smush.it — ​​это плагин для оптимизации изображений JPEG для вашего сайта WordPress — после установки он без потерь оптимизирует любое изображение, которое вы загружаете на свой сайт . Оптимизация без потерь — это именно то, на что это похоже — размер файла изображения уменьшается без какого-либо негативного влияния на его качество. Это делается с помощью различных методов, таких как удаление метаданных, удаление неиспользуемых цветов и оптимизация методов сжатия. Посетители вашего сайта не будут знать, что изображение было оптимизировано, но оно будет меньше и, следовательно, будет загружаться быстрее.

Плагин выполнит работу за вас автоматически — т.е. проведет оптимизацию по мере загрузки изображений. Но как насчет PNG? Они, в конце концов, самые здоровенные файлы и поэтому могут получить наибольшую выгоду от оптимизации. Ну, недавно я наткнулся на онлайн-инструмент, который выполняет звездную работу по сжатию PNG-изображений без потерь с результатами, незаметными для человеческого глаза. Рассмотрим, например, следующие два изображения:

Оптимизация PNG

Этот инструмент называется TinyPNG, и я использую его безостановочно, так как я обнаружил это. Фактически, это сделало использование JPG практически ненужным для меня, так как почти любой PNG может быть уменьшен до управляемого размера файла и при этом выглядеть фантастически. Я надеюсь, что разработчики этого инструмента создадут плагин WordPress, который позволяет автоматически оптимизировать загруженные PNG, но в то же время его действительно легко использовать вручную — просто загрузите изображения для оптимизации, а затем загрузите (в мигать) когда это будет сделано!

Записка А.Дж. Кларка ...

Для тех, кто использует Mac, мне очень нравится приложение «ImageOptim», оно позволит вам перетаскивать папки с отверстиями и быстро оптимизировать несколько изображений. Я нахожу это намного проще и лучше, чем с помощью инструмента онлайн-браузера.

ImageOptim

Великолепные изображения для вашего сайта WordPress за небольшую плату

Когда дело доходит до использования изображений на вашем сайте WordPress, ключом, в конечном счете, является предоставление поразительных результатов при низкой стоимости (с точки зрения размера файла изображения). Выполнение двух простых шагов выше позволит вам сделать это.

Определение размера (с точки зрения размеров) изображения перед загрузкой означает, что оно не больше, чем нужно, и использование подобных WP Smush.it и Tiny PNG для уменьшения размера изображения (в килобайтах) далее означает, что все изображения, которые вы используете на своем сайте, вероятно, будут иметь размер не более 100 КБ.

Тем не менее, вы не обязательно хотите останавливаться на достигнутом . На самом деле, у вас вполне могут быть свои советы и рекомендации по оптимизации изображений в WordPress и максимально эффективному использованию визуальной стороны вашего сайта. Например, мы даже не говорили об идеальных размерах изображения, размещении, тегах заголовков, заголовках и так далее. Мы также не обсуждали, как  найти лучшие изображения через такие сайты, как Compfight,  stock.xchng.

Короче говоря, в WordPress есть много возможностей для оптимизации изображений — конечно, больше, чем я описал в этом посте. Поэтому я хотел бы прочитать ваши мысли и вопросы, касающиеся оптимизации изображений. Пожалуйста, не стесняйтесь поделиться своими комментариями ниже!

Также читают

Понравилась статья? Поделись с другом!!!

Оставить комментарий

 ;-)  :|  :x  :twisted:  :smile:  :shock:  :sad:  :roll:  :razz:  :oops:  :o  :lol:  :idea:  :grin:  :evil:  :cry:  :cool:  :???:

7 + тринадцать =