banner_nika_hozyaike      banner_pos_bekker     banner_specpredl_roznica_2

Оптимизация изображений для более быстрой загрузки веб-страниц и преимуществ SEO

  1. JPG, GIF и PNG (растровые) изображения
  2. Изображения SVG (Vector)
  3. Заключение

Каждый, кто приезжает в Crow и Raven, хочет иметь высокоэффективный веб-сайт, который одновременно удобен для пользователей и занимает высокие позиции в поисковых системах. Они хотят, чтобы мы распространили некоторую магию SEO в их домене, чтобы они заняли более высокие позиции в результатах поиска Google и исправили их невероятно высокий показатель отказов. В то время как мы можем сделать все это, большинство клиентов с удивлением узнают, что у них есть возможность делать огромные улучшения без (удушья!) Полного перепроектирования. «Низко висящий плод» SEO и улучшенное удобство использования - это просто оптимизация изображения .

В соответствии с опросы, проведенные Akamai и Gomez.com почти половина веб-пользователей ожидают, что сайт загрузится через 2 секунды или меньше, и они склонны отказаться от сайта, который не загружается в течение 3 секунд. 79% веб-покупателей, испытывающих проблемы с производительностью веб-сайта, заявляют, что не вернутся на сайт, чтобы совершить повторную покупку, и около 44% из них скажут другу, если у них плохой опыт покупок в Интернете.

Нил Патель

Давайте поговорим о вашей проблеме с изображением.

Есть много способов улучшить скорость сайта. Вы можете нанять кого-нибудь, чтобы помочь вам кэшировать контент, минимизировать код, перемещать блокирующие скрипты, улучшать время отклика сервера и несколько десятков других известных технических подходов к сокращению времени загрузки страницы. Тем не менее, неоптимизированные изображения, скорее всего, ваш самый большой преступник. Изображения обычно составляют большую часть загружаемых байтов на любой данной веб-странице. На многих сайтах 60-80% накладных расходов приходится на изображения, которые нужно загружать и отображать.

Взгляните на себя. Google PageSpeed ​​Insights а также Инструменты Pingdom два отличных инструмента, чтобы получить общее представление о производительности вашего сайта. Если вы не набрали 85 баллов, вы должны увидеть, что вы можете сделать, чтобы изменить это. Вы, вероятно, обнаружите, что исправление неоптимизированных изображений приведет вас далеко.

Хорошая новость в том, что это легко исправить.

Хорошая новость в том, что это легко исправить

JPG, GIF и PNG (растровые) изображения

Эти типы изображений обычно составляют большую часть визуального контента вашего сайта. Ну, в идеале, вы могли бы заменить некоторые из них на чистый CSS, но это другой пост. А пока, давайте предположим, что у вас есть несколько снимков с головы ваших сотрудников, несколько изображений продуктов, несколько значков и великолепное изображение «героя», которое отображается в верхней части вашей страницы. Скорее всего, они будут в формате JPG или PNG.

Возможно, у вас был графический дизайнер для создания изображений или, возможно, вы скачали несколько фотографий. В любом случае, есть большая вероятность, что изображение, которое вы загружаете на свой веб-сайт, слишком велико (размер пикселя и размер файла). Это дополнительное «качество» не используется браузером. Таким образом, это просто приводит к снижению скорости загрузки вашей страницы. Мы не будем углубляться в разрешение экрана в сравнении с разрешением печати. Вы можете углубиться в эту тему в этой статье. , Тем не менее, основная идея состоит в том, чтобы по существу удалить ненужный раздув из вашего файла изображения.

С растровыми изображениями общий размер пикселя - хорошее место для начала. Допустим, вы загрузили стоковую фотографию с веб-сайта, и общие размеры изображения составляют 5000 x 3000 пикселей. Это довольно большое изображение. Часто изображения со стоковых сайтов имеют сверхвысокое разрешение, потому что они часто используются в печатных целях. Тем не менее, размещение изображения на вашем сайте составляет всего 800 пикселей в ширину. Это 4200 пикселей (дополнительной ширины), вам не нужно. Итак, откройте ваш любимый графический редактор и измените размер изображения так, чтобы оно было ближе к тому, что вам действительно нужно - не забудьте сохранить соотношение сторон при кадрировании или изменении размера. Если у вас нет графического дизайнера или Photoshop, вы можете легко использовать один из многочисленных онлайн-инструментов для редактирования фотографий. Pixlr это тот, который мы рекомендуем клиентам все время, и он действительно прост в использовании.

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

В Crow and Raven мы пользователи Mac. Итак ImageOptim загружаемое приложение - наш инструмент для оптимизации растровых изображений. Однако, если вы работаете в Windows, вы можете использовать такой инструмент, как FileOptimizer ,

Однако, если вы работаете в Windows, вы можете использовать такой инструмент, как   FileOptimizer   ,

Существует также много онлайн-инструментов, которые помогут вам оптимизировать файлы изображений. Это не полный список, но стоит обратить внимание на несколько Compressor.io , TinyPNG , Optimizilla , Kracken.io , а также ImageRecycle ,

Наконец, если вы запустили свою страницу с помощью инструмента Google PageSpeed ​​Insights, вы можете загрузить оптимизированные изображения непосредственно для отчета.

Изображения SVG (Vector)

Масштабируемая векторная графика, или SVG, представляет собой векторный формат изображения. При правильном использовании SVG может обеспечить невероятное качество в очень маленькой упаковке. Мы не будем рассказывать, как и когда использовать изображения SVG в этом посте. В этой статье мы предполагаем, что вы уже приобрели изображение SVG у своего графического дизайнера или, возможно, вы создали изображение с помощью инструмента, такого как Adobe Illustrator. Теперь, прежде чем загрузить это изображение на свой сайт, вы захотите оптимизировать его. К счастью, есть несколько способов сделать это с помощью бесплатных онлайн-инструментов.

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

Если вы чувствуете себя техническим Luddite и SVGOMG чувствует себя слишком для вас, попробуйте сайт https://www.svgminify.com/ для самого безумного пользовательского интерфейса, который вы можете себе представить. Загрузите свой файл и загрузите оптимизированную версию.

Заключение

Таким образом, оптимизация изображения может значительно улучшить пользовательский опыт и дать вам некоторые дополнительные возможности SEO ... и все это без особых усилий. Стоит также отметить, что оптимизация изображений не должна быть зарезервирована только для редизайнов сайта. Вы должны поделиться этой статьей со своими контент-менеджерами и графическими дизайнерами. Затем они могут поддерживать сайт обновленным с оптимизированным контентом.

Наш магазин

Сезонные товары

Icon    Доставка в течение дня
Icon    Работаем с 09:00 до 18:00 кроме выходных
Icon    Возврат в течении 14 дней
Icon    Гарантия на все товары