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

Содержание

Оптимизация изображений для сайта без потери качества в фотошопе

Для работы нам потребуется программа Adobe Photoshop (любой версии) и минут 10 свободного времени. На то, чтобы разобраться в тонкостях. Дальше процесс со временем ускорится в разы. И будет достаточно пары минут и пары кликов. Давайте начнем.

Исходное изображение

Для наглядности возьмем большую красивую картинку. В оригинале она имеет размер 5760х3840 пикселей и весит аж 6,26 Мб.

Предположим, что мы делаем сайт и хотим разместить её там фоновой подложкой. Если мы поставим именно это изображение, то пользователи нам спасибо не скажут) Только представьте, сколько нужно времени и трафика, чтобы с телефона загрузить 6,26 Мб! А ведь это будет на каждой странице. Кроме того, при определенных настройках эта картинка должна будет грузиться снова и снова при каждом обновлении. Ужас! С нашего сайта все разбегутся в момент!

Но у нас есть фотошоп и сейчас мы решим эту проблему, чтобы всем стало хорошо.

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

Под оптимизацией понимается уменьшение веса. Прежде всего. Если мы говорим о сайте, то страницы должны грузиться как можно быстрее, а это значит, что мы не можем себе позволить сделать фоном картинку размером 6 Мб. И даже 1 Мб — это много! К какому весу стремиться, каждый решает для себя сам.

Как осуществляется оптимизация

Открыв изображение в Adobe Photoshop, мы идем в раздел меню Файл — Сохранить для Web и устройств. Также можно воспользоваться сочетанием горячих клавиш, одновременно нажав комбинацию Alt+Ctrl+Shift+S. По-началу это может вызвать трудности, так что можете открыть из меню.

Если у вас очень большое исходное изображение, фотошоп выдаст предупреждение.

Мы не обращаем на него особого внимания, и нажимаем Ок.

Дальше появляется такое окно.

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

Сверху в данном окне имеется 4 вкладки: исходное, оптимизация, 2 варианта и 4 варианта. Сейчас вам нужно проследить за тем, чтобы было активно окно Оптимизация.

Затем нужно выбрать формат, в котором мы сохраним файл. Правила следующие: если есть прозрачные области, то выбираем PNG, если это просто картинка, тогда JPEG. Вы можете выбрать любой, который понравится, но это может в дальнейшем сказаться на размере изображения и на его качестве. Поэтому советую изначально усвоить, какой формат для чего предназначен.

Затем выставляем параметр Качество. Можете погонять ползунок вправо-влево и посмотреть, как изменяется результат. Как правило, можно смело выставлять значение из диапазона 50-70%. Это позволяет существенно уменьшить вес изображения и оставляет качество на хорошем уровне.

Изменение размеров изображения

Как вы помните, изначально я взял картинку размером 5760х3840 пикселей. Максимальное расширение монитора сейчас где-то 2560х1600 пикселей. И то, это далеко не у всех. Скорее всего, такими могут пользоваться либо дизайнеры и верстальщики, либо геймеры. Ведь по-сути это 30 дюймовый экран.

Ну, да это и не важно. В рамках данного примера давайте ограничимся размером более распространенным 1920х1200 пикселей.

Чтобы уменьшить исходное изображение до нужного нам результата, всё в том же окне Оптимизация в правом нижнем углу находим блок Размер изображения и выставляем там ширину в 1920 пикселей. При этом мы видим, что размер полученного изображения (отображается в левом нижнем углу, прямо под картинкой) вместо начальных 6 Мб уменьшился до 369,3 Кб!

Теперь осталось лишь нажать кнопку Сохранить и файл готов к загрузке на сайт!

Как быть, если нужен точный размер изображения

Если вы проделаете всё вышеописанное, то увидите, что на последнем шаге у нас получается файл, который по ширине нас полностью устраивает (1920 px), а по высоте значение может плясать вверх-вниз в зависимости от исходника. И хорошо, если вместо 1200 нам выдает 1260, а если меньше? Тогда в случае загрузки на сайт у нас могут возникнуть проблемы, которые придется докручивать стилями.

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

Первый этап. Подготовка изображения.

Для этого мы вновь открываем исходное изображение. Идем в меню, там выбираем Изображение — Размер изображения (Ctrl+Alt+I) и проверяем, какой результат мы получим после трансформации, выставив один из размеров. Я советую не снимать галочку Сохранять пропорции. Иначе картинка может поехать и будет некрасиво.

Дальше все индивидуально: если речь идет о фоне сайта, обоях или о какой-то подложке, то нужно добиться того, чтобы один из размеров был равен требуемому, а второй был больше. Например, мне нужно получить картинку размером 1920 на 1200. Я выставляю ширину 1920 и получаю высоту 1276 — это хороший результат. Если бы я получил 1100, тогда нужно выставить нужную высоту (при этом увеличится ширина — это нормально). После этого нужно нажать Ок, чтобы изображение уменьшилось.

Если речь идет о карточке товара или о какой-то картинке для сайта, и вам нужно вписать изображение в определенный размер, то нужно поступить иначе: вы просто изменяете наибольший размер исходного изображения до требуемого. К примеру, если у вас картинка размером 1350х856px, а вписать её нужно в квадрат размером 120х120, открыв исходное изображение, вы нажимаете Alt+Ctrl+I и выставляете высоту 120px. И жмёте Ок. Картинка уменьшилась.

Второй этап. Получение требуемого размера изображения.

Теперь, не закрывая предыдущий файл, создаем новый (Ctrl+N). Выставляем необходимый размер. Раз я делаю обои, я ставлю значения 1920х1200 и жмём кнопку Ок.

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

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

Если вы создаете изображения для карточек товара, то вам необходимо будет создать файл с тем размером, который используется у вас на сайте. Узнать его можно у вашего веб-мастера. Либо, если вы сами всем занимаетесь, посмотрите размер изображения карточки товара в DOM, используя файл таблицы стилей CSS или с помощью панели веб-мастера. Далее вам нужно выбрать фон (его также можно посмотреть в стилях) и в этот файл поочередно подгружать свои товары и сохранять их. Не забывайте перед сохранением оптимизировать размер изображения.

Оцените, насколько понравился материал статьи:

Бесплатные инструменты сжатия изображений для ускорения работы сайта

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



По данным HTTP Archive, средний размер веб-страницы — 2,4 Mb и 64% приходится на изображения. Вы все правильно поняли: средний размер изображений на веб-странице — 1,5 Mb.

Какой размер страниц на вашем сайте?

Если на вашем сайте много изображений или на них приходится значительная доля объема страницы, необходимо их оптимизировать для уменьшения размера. С уменьшением изображений связаны следующие преимущества:

  • уменьшение общего размера страницы;
  • экономия трафика;
  • сокращение времени загрузки страницы и повышение SEO рейтинга.

Есть целый ряд способов оптимизировать изображения, но лучше это делать без ущерба для качества. В статье речь пойдет о трех видах инструментов.
  1. Самостоятельные инструменты: На сайте ничего устанавливать не нужно. Просто зайдите на страницу сервиса, загрузите изображения и получите оптимизированные изображения.
  2. Плагин WordPress: Установите плагин на ваш сайт на WordPress и, в зависимости от выбранных настроек, размер изображения будет сокращаться при загрузке на сайт.
  3. Расширение для Joomla: Установите расширение на ваш сайт на Joomla и изображения будут оптимизированы на вашем сервере с Joomla.

Вы готовы ускорить свой сайт?

Список инструментов


Самостоятельные инструменты:
  1. Tiny PNG
  2. Compressor
  3. Puny PNG
  4. Compress Now
  5. Kraken
  6. Optimi Zilla
  7. JPEG Mini
  8. Imagify

Плагины WordPress:
  1. EWWW Image Optimizer
  2. WP Smush
  3. Optimus
  4. TinyPNG
  5. Short Pixel

Расширения для Joomla:
  1. Imgen
  2. Image Recycle
  3. EIR
  4. Prizm Image

Самостоятельные инструменты


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

1. Tiny PNG


Для уменьшения размера файлов PNG или JPG на TinyPNG используются методы сжатия с потерями. Можно загружать до 20 изображений, размер каждого из которых не может превышать 5 Mb.

2. Compressor


Compressor позволяет сжать изображения с уменьшением объема до 90% и при этом сохранить высокое разрешение. Он работает с JPEG, PNG, GIF и SVG-файлами. Ограничение по размеру — 10 Mb.

3. Puny PNG


PunyPNG подходит для дизайнеров и разработчиков. Не годится для работы, если размеры ваших изображений исчисляются мегабайтами: ограничение по размеру — 500 KB, по количеству файлов — 20 штук. Возможно сжатие JPG, GIF и PNG-файлов.

4. Compress Now


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

5. Kraken


При оптимизации Kraken позволяет вам выбирать между сжатием с потерями, без потерь и с возможностью самостоятельной настройки. Файл можно загрузить с компьютера, Dropbox, Google drive или Box.

6. Optimi Zilla


Загрузите до 20 JPEG или PNG-файлов на OptimiZilla. Если вы загружаете несколько файлов, то скачать их все можно одним архивом.

7. JPEG Mini


Избавьтесь от лишних килобайт с помощью JPEG Mini. Возможна обработка исключительно файлов JPG.

8. Imagify


Здесь можно выбрать из нескольких уровней сжатия: нормальным, агрессивным и ультра-сжатием. Файлы хранятся до 24 часов на Imagify, так что их можно скачать позже, если захотите.

Вышеуказанные самостоятельные инструменты помогут вам в уменьшении размера файлов. А теперь давайте рассмотрим плагины для WordPress.

Плагины WordPress:


Следующие плагины можно установить на WordPress, и, когда вам потребуется загрузить изображения, произойдет их оптимизация.

1. EWWW Image Optimizer


EWWW Image Optimizer — один из лучших плагинов для оптимизации. Он позволяет уменьшать размер изображений, а также выбирать файлы, для которых оптимизация производиться не будет. Это очень полезно, если ваш сайт имеет отношение к фотографии, и вы не хотите ухудшать качество определенных снимков.

2. WP Smush


Этот замечательный плагин от wpmudev установлен более 400 тысяч раз. Он позволяет сжимать изображения партиями или в момент загрузки на сайт. В бесплатной версии WP Smush позволяет обрабатывать до 50 изображений подряд. Плагин обрабатывает файлы в форматах JPEG, PNG и GIF.

3. Optimus


Optimus от KeyCDN помогает уменьшить изображения до 70%, но есть ограничение по размеру — 100 kB.
  • оптимизация исходных изображений;
  • оптимизация во время загрузки.

4. TinyPNG


Выполните сжатие файлов в формате JPEG и PNG с помощью TinyPNG. Именно этим инструментом пользуюсь я, и он меня всем устраивает.

5. Short Pixel


Short Pixel сжимает не только изображения, но и PDF. Инструмент совместим с WooCommerce и обрабатывает GIF, PNG, JPG и PDF-файлы.

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

Расширения для Joomla


Следующие расширения бесплатны, так что попробуйте и решите, что подходит именно вам.

1. Imgen


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

2. Image Recycle


Image Recycle — популярное расширение для Joomla, помогающее оптимизировать изображения и PDF-файлы. Можно настроить автоматическое сжатие новых изображений или уменьшить размер уже существующих. Также существует возможность задать уровень оптимизации для отдельных типов файлов.

3. EIR


Easy Image Resizer меняет разрешение загруженных изображений с помощью медиа-менеджера. EIR осуществляет сжатие на базе Optimus.io.

4. Prizm Image


Prize Image помогает удалить метаданные из JPEG, конвертировать прогрессивные JPEG в последовательные и наоборот, оптимизировать PNG и GIF без ущерба для качества. Для сжатия плагин использует Prizm Image API.

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

На HOSTING.cafe всегда можно сравнить предложения виртуальных серверов и хостинга.

Adobe Photoshop и Image Optimizer — Примеры

Содержание.

  1. Программа Adobe Photoshop.
  • Программа Image Optimizer.
  • Программа Blogger.
  • Сколько картинок проиндексировано?
  • Уникальность картинок для поисковых систем.
  • Программа Adobe Photoshop.

    Для того, чтобы ускорить загрузку блога, рекомендуется оптимизировать изображение, то есть при минимальном объёме файла, получить максимально качественную картинку. Лидером рынка в области редактирования web-изображений является редактор Adobe Photoshop (Фотошоп). Скачать последнею версию можно с сайта разработчика или воспользоваться услугами таких программ, как MediaGet. Я выбрала последнее. Вот скаченный мной файл Adobe_Photoshop_CS5_En-Ru-Ukr. При обозначении настроек принято использовать английский язык, поскольку перевод (русификация программы) может варьироваться. Я же буду указывать обозначения, задействованные в данной версии программы.

    Общие настройки сжатия изображения.

    После предварительной обработки фотографии, выбираем пункт «Файл»-«Сохранить для Web и устройств». Не стоит сохранять оптимизированные картинки поверх оригинала, исходные изображения лучше держать под рукой. При сохранении, имя файла присваиваем латинскими буквами без пробелов, используя в качестве разделителя слов тире, формат — «Только изображения».

    Открыть меню для оптимизации изображения Photoshop.

    Определяемся с удобным способом предварительного просмотра результата оптимизации изо в сравнении с оригиналом:

    • Исходное,
    • Оптимизация,
    • 2 варианта,
    • 4 варианта.

    Можно выбрать уже готовый вариант установок сжатия рисунка в поле «Набор». Для того, чтобы добавить свои часто применяемые параметры сжатия, нужно, после задания их значений, вызвать всплывающее меню и нажать на «Сохранить настройки». В том же меню есть возможность оптимизировать рисунок, задав лишь желаемое значение размера файла. Но для лучшего результата всё же следует использовать ручные настройки.

    Сохранить настройки сжатия в Photoshop.

    От показа метаданных я отказываюсь. Они увеличивают объём файла картинки.


    При необходимости можно изменить размер изображения. Нежелательный эффект: изменение пикселей в картинке ухудшает чёткость рисунка. Я для манипуляций размера использую программу Image Resize Guide Lite (скачать с сайта разработчика). На мой взгляд, итоговая картинка получается чётче, чем в Фотошопе. А скриншот, по-возможности, стараюсь сразу получить нужного размера, либо предварительно уменьшив размер программы (см, рис. ниже), либо изменив масштаб в браузере: «Вид»-«Масштаб».
    Image Resize Guide Lite.

    Оптимизация изображения в формате PNG-8.

    Оптимальным вариантом для скриншотов является формат PNG-8 (вариация формата PNG). Данный формат предназначен для графических изображений и позволяет получить наилучшее сжатие, степень которого в наибольшей мере определяется количеством цветов и алгоритмом сокращения цветов:

    1. Перцепционная — за основу берутся текущие цвета скриншота, сохраняется целостность цвета, особое внимание уделяется восприятию цветовой палитры человеком.
    2. Селективная — предпочтение отдаётся Web-безопасным цветам (количество: 216), которые во всех браузерах выглядят одинаково.
    3. #000000#000033#000066#000099#0000CC#0000FF
      #003300#003333#003366#003399#0033CC#0033FF
      #006600#006633#006666#006699#0066CC#0066FF
      #009900#009933#009966#009999#0099CC#0099FF
      #00CC00#00CC33#00CC66#00CC99#00CCCC#00CCFF
      #00FF00#00FF33#00FF66#00FF99#00FFCC#00FFFF
      #330000#330033#330066#330099#3300CC#3300FF
      #333300#333333#333366#333399#3333CC#3333FF
      #336600#336633#336666#336699#3366CC#3366FF
      #339900#339933#339966#339999#3399CC#3399FF
      #33CC00#33CC33#33CC66#33CC99#33CCCC#33CCFF
      #33FF00#33FF33#33FF66#33FF99#33FFCC#33FFFF
      #660000#660033#660066#660099#6600CC#6600FF
      #663300#663333#663366#663399#6633CC#6633FF
      #666600#666633#666666#666699#6666CC#6666FF
      #669900#669933#669966#669999#6699CC#6699FF
      #66CC00#66CC33#66CC66#66CC99#66CCCC#66CCFF
      #66FF00#66FF33#66FF66#66FF99#66FFCC#66FFFF
      #990000#990033#990066#990099#9900CC#9900FF
      #993300#993333#993366#993399#9933CC#9933FF
      #996600#996633#996666#996699#9966CC#9966FF
      #999900#999933#999966#999999#9999CC#9999FF
      #99CC00#99CC33#99CC66#99CC99#99CCCC#99CCFF
      #99FF00#99FF33#99FF66#99FF99#99FFCC#99FFFF
      #CC0000#CC0033#CC0066#CC0099#CC00CC#CC00FF
      #CC3300#CC3333#CC3366#CC3399#CC33CC#CC33FF
      #CC6600#CC6633#CC6666#CC6699#CC66CC#CC66FF
      #CC9900#CC9933#CC9966#CC9999#CC99CC#CC99FF
      #CCCC00#CCCC33#CCCC66#CCCC99#CCCCCC#CCCCFF
      #CCFF00#CCFF33#CCFF66#CCFF99#CCFFCC#CCFFFF
      #FF0000#FF0033#FF0066#FF0099#FF00CC#FF00FF
      #FF3300#FF3333#FF3366#FF3399#FF33CC#FF33FF
      #FF6600#FF6633#FF6666#FF6699#FF66CC#FF66FF
      #FF9900#FF9933#FF9966#FF9999#FF99CC#FF99FF
      #FFCC00#FFCC33#FFCC66#FFCC99#FFCCCC#FFCCFF
      #FFFF00#FFFF33#FFFF66#FFFF99#FFFFCC#FFFFFF
    4. Адаптивная — цветовая таблица состоит из наиболее часто встречающихся цветов в исходном изо.
    Остальные варианты приводят к значительным искажениям картинки.
    Photoshop. Формат PNG-8.

    Web-цвета — допуск, с которым цвета преобразуются в ближайшие Web-цвета: чем выше значение, тем меньше вес файла и менее привлекательно изображение. Подобрать золотую середину не сложно.

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

    Прозрачность позволяет создать непрямоугольные изображения, что достигается присутствием прозрачных участков рисунка, через которые можно видеть фон блога. Для прозрачности лучше подходит формат PNG-24. При постоянном однородном фоне целесообразнее использовать поле «Матовый», задав цвет, соответствующий фону.

    Всегда использую галочку «Чересстрочно», т.е. постепенного увеличения чёткости картинки по мере его загрузки. Чтобы посетитель имел возможность сразу увидеть скриншот.

    Оптимизация изображения в формате PNG-24.

    Этот формат применяется для полноцветных изображений, использует более 16 миллионов цветов в файле, сохраняет чёткие детали рисунка, поддерживает многоуровневую прозрачность, в результате чего конечный объём графического файла получается наибольшим. Оптимизация проводится лишь в двух направлениях: присутствием прозрачности и наличием режима «Чересстрочно».

    Photoshop. Формат PNG-24.

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

    Формат GIF поддерживает по кадровую смену изображений. Широко используется при создании баннеров и анимационной графики.

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

    Для цифровых фотографий и картин с плавными переходами яркости и цвета применяется формат JPEG. Он не подходит для многоразового сжатия, поскольку каждый раз будут происходить искажения фото. Если изображение уже было оптимизировано в JPEG, то при дальнейшем его сжатии не рекомендуется использовать другие форматы.

    Перед осуществлением оптимизации фоторгафии, предварительно применяем команду «Фильтр»-«Шум»-«Уменьшить шум».

    Степень сжатия определяется:

    Photoshop. Формат JPEG.
    1. Значением поля «Качество» (при использовании очень мелких контрастных деталей, не стоит выставлять качество ниже 51),
    2. Желательным наличием режима «Прогрессивный» (постепенная загрузка изображения),
    3. Значением поля «Размытие»,
    4. Не обязательным присутствием галочки «Встроенный профиль» (большинство браузеров не могут читать ICC-профиль).

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

    Программа Image Optimizer.

    Для быстрой оптимизации изображений без потери качества в формате PNG и JPEG можно воспользоваться программой Image Optimizer (ссылка компьютерного портала RU-BOARD). После использования Фотошопа, я применяю также эту программу, что позволяет ещё уменьшить размер объёма файла. Для JPEG практикую цифру 2 (Прогрессивный), а для PNG — 3 (Чересстрочно). При Xtreme происходит наилучшее сжатие.

    Программа Blogger.

    В первую очередь замечу, что поскольку блогпост не позволяет размещать у себя на сервере файлы, в Blogger интегрирован один из сервисов Google — веб-альбом Picasa. Автоматически в нём изображения закрыты для индексации поисковыми системами. Для разрешения поисковикам сканировать ваши изо, нужно сделать Picasa общедоступным.

    При включении картинки в блог, Blogger автоматически размещает ссылку на её оригинальный размер и место расположения (левый/правый край, по центру). Код при этом выглядит следующим образом (для работы с кодом нужно при редактировании/создании сообщения выбрать вкладку «Изменить HTML»):

    <div>
    <a href="http://3.bp.blogspot.com/_ebKrCj8TLPk/TKT7q7GVJkI/AAAAAAAAAoM/Kbm08McseMk/s1600/tigr.jpg" imageanchor="1"><img border="0" src="http://3.bp.blogspot.com/_ebKrCj8TLPk/TKT7q7GVJkI/AAAAAAAAAoM/Kbm08McseMk/s320/tigr.jpg" width="320" /></a></div>
    
    Обратите внимание на часть адреса /s1600/ — он определяет размер изо. Оно может варьироваться по вашему усмотрению, а не только (маленький, средний, крупный, очень крупный, исходный). В данном случаем установлен «средний размер». Но, если выбрать «исходный размер», изображение уместится в ширину сообщения блога. То есть, можно безболезненно удалить ссылку, поскольку она не увеличивает рисунок и не улучшает качество просмотра. Я стараюсь уменьшить ненужную и неэффективную ссылочную массу, поэтому располагаю большую часть картинок в их исходном виде без использования тега .
    При выборе варианта размещения рисунка «Исходный размер», нет таких важных параметров, как alt, width, height. В остальных случаях задаётся фиксированное значение width и соответствующее ему height. Более подробно про значения размеров изображений можете прочитать здесь.
    Также мы видим тег , который определяет место расположения изображения. При большом рисунке, чтобы его границы были в рамках сообщения, или малом изображении, например, кнопки, в тексте, я удаляю этот элемент. Бесполезен данный код и при использовании возможности «Добавить подпись» к рисунку. В общих чертах:
    <table><tbody>
    <tr><td><img/></td></tr>
    <tr><td>Тигры</td></tr>
    </tbody></table>
    <div>
    <a></a></div>
    
    Как видите, в тег заключён только тег </a>, у которого нет анкора, т.е. ваша картинка не будет увеличиваться. А место размещения рисунка определяется атрибутом class тега .

    Конечный код оптимизированного изо будет иметь вид:

    <table align="center" cellpadding="0" cellspacing="0"><tbody>
    <tr><td><img alt="Тигры" border="0" height="255" src="http://3.bp.blogspot.com/_ebKrCj8TLPk/TKT7q7GVJkI/AAAAAAAAAoM/Kbm08McseMk/s1600/tigr.jpg" width="340" /></td></tr>
    <tr><td>Тигры</td></tr>
    </tbody></table>
    
    А это его отображение:
    Тигры

    Сколько картинок проиндексировано?

    Чтобы увидеть какие изображения вашего блога проиндексированы:
    1. Расширенный поиск Яндекс.Картинки.
      В графу «Находятся на сайте:» задаём URL(адрес, например, http://shpargalkablog.ru/).
    2. Поиск Google (результат: Картинки).
      В поле поиска задаём site:ваш_блог (например, site:shpargalkablog.ru).
      Здесь же можно загрузить фото через свой компьютер по нажатию на кнопку и робот покажет его аналоги.

    Уникальность картинок для поисковых систем.

    И последнее, стараемся размещать свои оригинальные изображения. Поисковые системы имеют свои алгоритмы распознавания дублей, такие, например, как у онлайн-сервиса TinEye. Потренировавшись на нём, у меня получилось, что уникальной картинку можно сделать лишь путём зеркального отражения либо поворотом изображения, скажем на 15 градусов. Способ довольно известный и широко используемый. Больше всего меня удивил скриншот программы Image Resize Guide Lite (см. выше). TinEye без труда выдал несколько копий с изображением тигров. Ни уменьшение, ни обрезка, ни… результата не дали.

    Яндекс и Гугл могут определять похожие изображения. Для этого в поиске по картинкам рядом с изображением нужно щёлкнуть ссылку «Другие размеры» (в Яндексе ссылка под фото имеет вид «800×600 … 1600×1200»).

    Похожие статьи:

    1. Фотошоп с нуля.
    2. Программа для снятия скриншота ScreenHunter 5.1 Free.
    3. Как сделать анимированный баннер в Photoshop.

    Оптимизация изображений для сайта — программа Фотошоп и онлайн-сервисы

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

    В этой статье я поговорю об оптимизации изображений для сайта. Это все достаточно просто, но вопросов по теме возникает много. Сперва разберем важные моменты, которые стоит отнести к часто задаваемым вопросам.

    Заполняем атрибуты alt и title

    При вставке картинок обязательно заполнять alt, заполнение title не обязательное. Alt — это текстовое описание изображения, которое говорит поисковой системе о том, что есть на фотографии. Не стоит добавлять в alt больше 60 символов. Title — название изображение, которое будет видно, если пользователь наведет на него мышкой. Его заполнение не обязательно в тех случаях, когда в окружающем тексте идет речь о том, что на картинке.

    Alt и title не должны быть одинаковыми. Вот фотография федеральной трассы Р-21 «Кола»:

    В данном случае в alt можно написать ключевые слова «дорога», «небо», «федеральная трасса Р-21 «Кола», «ремонт дороги», а в title — «трасса Р-21 «Кола».

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

    Формат изображения

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

    Соответственно, если картинка заполнена изображением на 100% своей площади, то формат PNG лучше не использовать. Кроме того, изображения в формате PNG слишком много весят (по сравнению с JPG) и, что самое важное, при сжатии они очень сильно теряют в качестве.

    Оптимизируем размер изображения с программой Adobe Photoshop

    Adobe Photoshop — программа, которая позволит вам легко оптимизировать любое изображение.  Сделать это очень просто, не нужно возиться с настройками, достаточно лишь выбрать пункт в меню File — Save for Web&Devices.

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

    Также у вас есть возможность самостоятельно задать качество, использовав в правом верхнем углу настройку Quality. Остальные настройки не так важны, трогать их совсем не обязательно. 200 килобайт — уже значительно лучше, однако не стоит забывать о размере фотографии. В данном случае он равен 2500×1667 px. Очевидно, что для сайта такой размер не нужен. Сожмем его до 800 px по ширине.

    Теперь фотография весит всего 24 килобайта, и это уже гораздо лучше, чем 200. Да, может показаться, что и 200 килобайт — это не много. Но это только тогда, когда вы используете в статье 1–2 изображения. А если их десятки? Это уже серьезно повлияет на скорость загрузки страниц. А если на вашем сайте планируется размещение большого количества фотографий, то в этом случае оптимизировать их размер стоит хотя бы из соображений экономии места на хостинге.

    Adobe Photoshop — лучшая программа для оптимизации изображений. Главный ее минус в том, что она не слишком хорошо подходит для обработки очень большого количества изображений. В этом случае можно воспользоваться другой программой Adobe — Lightroom, которая является облегченной версией Photoshop и как раз создана для обработки большого количества изображений.

    Другие способы оптимизации изображений

    Если у вас нет Adobe Photoshop или Lightroom, то можно работать с  другими приложениями и сервисами, которые бесплатны. Они уступают по своим возможностям, однако с помощью них вполне можно оптимизировать изображения для сайта.

    • RIOT — бесплатное приложение, которое умеет сжимать форматы PNG, JPG и GIF. Оптимизирует изображения без потери качества, есть дополнительные функции, которые позволяют масштабировать или поворачивать фотографию.
    • FileOptimizer — универсальная программа, которая может работать с очень большим количеством различных файлов (документы, архивы и т.д.). Изображения оптимизируются без потери качества, результат зависит от формата. В случае с JPG это до 17–18% уменьшения веса, PNG могут сжиматься до 50%.
    • TinyPNG — веб-сервис, который в режиме онлайн оптимизирует изображения. Без потери качества сжимает до 35–40%, но есть определенные ограничения. Нельзя загружать сразу больше 20 файлов, а максимальный размер фотографии — 2 мегабайта.

    Это самые интересные и функциональные сервисы и приложения для оптимизации изображений. На самом деле их очень много (в том числе и бесплатные), но все они в любом случае проигрывают по своим возможностям мощным графическим редакторам вроде Adobe Photoshop.

    Рекомендации по оптимизации качества изображений

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

    fmt = jpg & qlt = 85,0 & resMode = sharp2 & op_usm = 1.75,0.3,2,0

    Эта комбинация настроек дает отличные результаты в большинстве случаев.

    Если изображение требует дальнейшей оптимизации, постепенно настройте параметры резкости (нерезкого маскирования), начиная с радиуса, установленного на 0.2 или 0,3. Затем постепенно увеличивайте количество от 1,75 до максимум 4 (эквивалент 400% в Photoshop). Убедитесь, что желаемый результат достигнут.

    Если результаты повышения резкости по-прежнему неудовлетворительны, увеличивайте радиус с десятичными приращениями. Для каждого десятичного приращения перезапустите величину с 1,75 и постепенно увеличивайте ее до 4. Повторяйте этот процесс, пока не добьетесь желаемого результата. Хотя приведенные выше значения — это подход, одобренный творческими студиями, помните, что вы можете начать с других ценностей и следовать другим стратегиям.Удовлетворяют ли вы результаты или нет — вопрос субъективный, поэтому структурированное экспериментирование является ключевым моментом.

    По мере того, как вы экспериментируете, вы также можете найти следующие общие предложения, полезные для оптимизации вашего рабочего процесса:

    • Попробуйте и протестируйте различные параметры в реальном времени, либо непосредственно по URL-адресу, либо с помощью функции настройки изображения системы публикации Scene7, которая обеспечивает предварительный просмотр в реальном времени для операций настройки.

    • Помните, что вы можете сгруппировать команды обслуживания динамических мультимедийных изображений в предустановку изображения.Предустановка изображения — это в основном макросы команд URL с именами настраиваемых предустановок, такими как $ thumb_low $ и & product_high $. Имя пользовательской предустановки в пути URL вызывает эти предустановки. Такая функциональность помогает вам управлять командами и настройками качества для различных моделей использования изображений на вашем веб-сайте и сокращает общую длину URL-адресов.

    • AEM также предоставляет более продвинутые способы настройки качества изображения, такие как применение повышения резкости изображений при загрузке. Для сложных случаев использования, когда это может быть вариант для дальнейшей настройки и оптимизации результатов рендеринга, Adobe Professional Services может помочь вам с индивидуальным пониманием и передовыми методами.

    Оптимизация изображений для Интернета в Adobe Photoshop

    Оптимизация изображений для Интернета

    Оптимизация графики для Интернета — это искусство создания привлекательных изображений с минимально возможным размером файла. Интернет-серферы не будут ждать загрузки ваших замечательных картинок, если на это уйдет много времени. Поэтому настройка ваших изображений для Интернета — жизненно важная задача. Adobe Photoshop предлагает простой способ найти баланс между качеством и размером ваших изображений.В этом совете мы рассмотрим его команду Сохранить для Интернета .

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

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

    Шаг 1. Открываем логотип в Adobe Photoshop. Это файл в формате psd, 2,73 Мб. Он определенно нуждается в оптимизации, если он подготовлен для работы в Интернете.

    Вызовите команду File => Save for Web , и вы увидите следующее диалоговое окно с логотипом в нем.

    Подсказка: Вы можете настроить масштаб изображения в диалоговом окне, используя инструмент Масштаб на левой панели. Щелкните изображение, чтобы увеличить, или нажмите ALT + щелкните, чтобы уменьшить. Вы также можете установить процент в поле в левом нижнем углу.

    Шаг 2. В верхней части окна находятся вкладки: Оригинал, Оптимизировано, 2 варианта, 4 варианта . Выбираем вкладку 4-Up. Будет показано исходное изображение и 3 оптимизированные версии с разными настройками. Так что у вас уже есть выбор и вы можете подобрать изображение, которое выглядит лучше. На фото ниже мы показали только две картинки — оригинальную и одну из оптимизированных. Оптимизированное изображение обведено серой рамкой. Это означает, что он активирован, и на правой панели отображаются его настройки.Взгляните на информацию под правой картинкой, там указан размер изображения в КБ, время загрузки с определенной скоростью, количество цветов на картинке и т. Д.

    Шаг 3. Мы видим, что время загрузки слишком велико для такого простого образа и есть возможности для улучшения.
    Ниже приведены настройки для правого (оптимизированного) изображения. Он в формате GIF, но вы можете выбрать другой формат в выпадающем меню. Мы также можем заметить, что данные правого изображения (вверху) показывают 47 цветов, а настройки ниже — 64 цвета.Это значит, что на картинке меньше 64 цветов, и она показывает их максимум. Таблица цветов отображает все цвета, представленные на картинке.

    Что мы можем сделать, чтобы уменьшить размер изображения в формате GIF? (1) Уменьшить количество цветов, (2) Уменьшить количество дизеринга, (3) Добавить сжатие с потерями, (4) Изменить алгоритм уменьшения цвета.

    Шаг 4. Можно экспериментально настроить параметры.Это особенно верно для алгоритма уменьшения цвета и сжатия с потерями. Они полезны во многих случаях. В данном случае это не сильно помогло. Мы только уменьшили количество цветов. Оказалось, что для этого изображения достаточно 4 цветов без особой потери качества.
    Таким образом, мы смогли уменьшить размер картинки с 2,73 Мб до 19,8 Кб и, наконец, до 12,6.

    Шаг 5. Сохраните оптимизированное изображение, нажав кнопку Сохранить . В следующем диалоговом окне вам будет предложено ввести имя файла и выбрать целевую папку.

    Facebook

    Твиттер

    Pinterest

    Ускорьте свой веб-сайт с помощью улучшенной оптимизации изображений в Photoshop

    • Статьи
    • Подписывайся
    • Около
    • Напишите нам
    Меню

    5 простых шагов по оптимизации изображений в Photoshop

    Прежде чем мы начнем, я хочу сделать оговорку: в этом руководстве исключаются другие процессы оптимизации, такие как выбор правильных форматов изображений для ваших нужд, а также оптимизация SEO, например теги alt, которые могут улучшить способность поиска ваших изображений в , скажем, Google Images.Это короткое руководство покажет вам, как уменьшить окончательные изображения, которые вы собираетесь разместить в Интернете.

    Шаг 1. Откройте Photoshop и откройте изображение

    Перейдите в Файл> Открыть ( Ctrl / Command + O ) и перенесите изображение в рабочее пространство.

    Шаг 2. Запустите Photoshop Actions

    Я хочу использовать Действия для записи каждой команды в этом процессе, включая команду «Сохранить для Интернета и устройств», чтобы я мог обрабатывать свои изображения в пакетном режиме без необходимости открывать каждое из них позже.

    Откройте панель действий, выбрав Windows> Действия ( Alt / Option + F9 ).

    На панели действий щелкните значок «Создать новый набор»: назовите новый набор. Я назвал свои изображения .

    Чтобы начать процесс записи, щелкните значок «Создать новое действие»; дайте своему действию имя. Я назвал свой Image Optimization . Щелкните Record , чтобы начать.

    Помните : с этого момента все ваши команды будут записываться в вашу панель действий.

    Шаг 3. Сохраните изображение для Web и устройств

    Сохраните изображение для Интернета и устройств, выбрав «Файл»> «Сохранить для Интернета и устройств» ( Alt / Option + Shift + Ctrl / Command + S ).

    Вы должны увидеть диалоговое окно «Сохранить для Web и устройств» в вашем рабочем пространстве. Я собираюсь поддерживать качество изображения приличного, поэтому использую следующие настройки:

    • Предустановка: JPEG High (выбирается JPEG с качеством 60)
    • Оптимизировано: Проверено
    • Преобразовать в sRGB: Проверено
    • Размер изображения: изменить в соответствии с требованиями вашего сайта
    • Процент: 100%
    • Качество: Бикубический

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

    Не стесняйтесь делать то же самое, если вам нужно соответствовать определенным требованиям по ширине / высоте.

    Совет: Выберите вкладку «4 варианта» в окне «Сохранить для Интернета и устройств», чтобы просмотреть изображение, а также увидеть разницу в размере файла и сравнении качества. Не стесняйтесь экспериментировать с настройками, чтобы найти качество и оптимизацию, которые соответствуют вашим потребностям.

    Вы также можете щелкнуть значок «Выбрать скорость загрузки», чтобы изменить размер / время загрузки, чтобы получить оценку времени, которое потребуется для загрузки изображения с выбранным размером / временем загрузки.

    Чтобы просмотреть изображение в реальном размере, нажмите кнопку «Предварительный просмотр», чтобы увидеть изображение в веб-браузере.

    Если изображение вас устраивает, нажмите Сохранить .

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

    Закройте файл изображения из рабочего пространства.

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

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

    Вы можете увидеть специфику записанных вами действий, щелкнув, чтобы развернуть каждое действие.

    Шаг 4. Пакетная обработка изображений

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

    Выберите «Файл»> «Автоматизация»> «Пакетная обработка». Используйте мои настройки ниже.

    Вы должны были выбрать набор действий и действие, которые мы только что записали.

    Убедитесь, что вы установили исходную и целевую папки, и установите флажок «Переопределить команды« Сохранить как »».

    Установив флажок «Переопределить команды« Сохранить как »», мы разрешаем Photoshop включать нашу команду «Сохранить для Интернета и устройств».

    Я сохраняю имя файла в качестве исходного имени документа и расширения.

    Шаг 5. Используйте инструменты оптимизации изображения

    Мы уже немного уменьшили исходное изображение в Photoshop, но давайте еще больше уменьшим его, используя инструмент оптимизации изображения. Есть из чего выбирать, но мне нравится использовать Smush.it! Это просто, быстро и бесплатно.

    Перейти на Smush.it! из вашего браузера (полный URL: https://www.imgopt.com/.

    Щелкните вкладку ЗАГРУЗИТЕЛЬ.

    Теперь нажмите «Выбрать файлы и сдвинуть». В появившемся окне выбора файлов перейдите к файлам изображений.

    Выберите изображения и нажмите «Открыть».

    А теперь посмотрите, как работает оптимизатор!

    По завершении вы получите сообщение с подробным описанием сохраненного процента и общего размера.

    Убедитесь, что установлен флажок «Сохранить структуру каталогов в zip-файле» — это позволит вам легко заменять изображения, если они находятся в разных подпапках, когда вы их загружали.

    Щелкните Загрузить сжатые изображения.

    Откройте свой zip-файл и замените старое изображение уменьшенными файлами изображений.

    Сводка

    Вы только что узнали, как уменьшить размер изображения в Photoshop, выполнив 5 простых шагов. Вы также создали Действия, чтобы оптимизировать изображения за один раз, сэкономив ваше драгоценное время. Полное руководство по оптимизации изображений путем выбора правильных форматов для ваших веб-проектов можно найти в «Всеобъемлющем руководстве по сохранению изображений для Интернета».

    Как легко оптимизировать изображения для Интернета (без потери качества)

    Знаете ли вы, что оптимизация изображений перед загрузкой в ​​WordPress может иметь огромное влияние на скорость вашего сайта?

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

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

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

    Поскольку это исчерпывающее руководство по оптимизации изображений для Интернета, мы создали простую для понимания таблицу содержания:

    Что такое оптимизация изображения? (Оптимизированные и неоптимизированные изображения)

    Оптимизация изображения — это процесс сохранения и доставки изображений с минимально возможным размером файла без снижения общего качества изображения.

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

    Вот пример оптимизированного и неоптимизированного изображения:

    Как видите, при правильной оптимизации одно и то же изображение может быть на 75% меньше оригинала без потери качества.

    Как работает оптимизация изображения?

    Проще говоря, оптимизация изображения работает с использованием технологий сжатия, таких как «Lossy» и «Lossless», которые помогают уменьшить общий размер файла без какой-либо заметной потери качества.

    Что значит оптимизировать изображения?

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

    Почему так важна оптимизация изображения? Каковы преимущества оптимизации изображений?

    Хотя оптимизация изображений дает множество преимуществ, ниже приведены основные из них, о которых вы должны знать:

    • Быстрее скорость сайта
    • Улучшен рейтинг SEO
    • Более высокий общий коэффициент конверсии продаж и потенциальных клиентов
    • Меньше хранилища и пропускной способности (что может снизить стоимость хостинга и CDN)
    • Более быстрое резервное копирование веб-сайтов (также снижает стоимость хранения резервных копий)

    Помимо видео, изображения — это следующий по значимости элемент на веб-странице.Согласно HTTP-архиву, изображения составляют в среднем 21% от общего веса веб-страницы.

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

    Теперь вам может быть интересно, насколько действительно важна оптимизация изображений?

    Согласно исследованию Strangeloop, задержка загрузки веб-сайта в одну секунду может стоить вам 7% продаж, на 11% меньше просмотров страниц и на 16% снижения удовлетворенности клиентов.

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

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

    Видеоурок

    Подписаться на WPBeginner

    Если вы предпочитаете письменные инструкции, просто продолжайте читать.

    Как сохранить и оптимизировать изображения для повышения производительности в Интернете?

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

    Три вещи, которые играют огромную роль в оптимизации изображения:

    • Формат файла изображения (JPEG против PNG против GIF)
    • Сжатие (более высокое сжатие = меньший размер файла)
    • Размеры изображения (высота и ширина)

    Выбрав правильную комбинацию из трех, вы можете уменьшить размер изображения до 80%.

    Давайте рассмотрим каждый из них более подробно.

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

    Для большинства владельцев веб-сайтов единственными важными форматами файлов изображений являются JPEG, PNG и GIF. Выбор правильного типа файла играет важную роль в оптимизации изображения.

    Чтобы упростить задачу, вы хотите использовать JPEG для фотографий или изображений с большим количеством цветов, PNG для простых изображений или когда вам нужны прозрачные изображения и GIF только для анимированных изображений.

    Для тех, кто не знает разницы между каждым типом файла, формат изображения PNG является несжатым, что означает, что это изображение более высокого качества. Обратной стороной является то, что размеры файлов намного больше.

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

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

    В WPBeginner мы используем все три формата изображений в зависимости от типа изображения.

    2. Сжатие

    Следующее — сжатие изображений, которое играет огромную роль в оптимизации изображений.

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

    Большинство инструментов для редактирования изображений, таких как Adobe Photoshop, On1 Photo, GIMP, Affinity Photo и другие, имеют встроенные функции сжатия изображений.

    Вы также можете сохранять изображения в обычном режиме, а затем использовать веб-инструмент, такой как TinyPNG или JPEG Mini, для упрощения сжатия изображений.

    Хотя это немного вручную, эти два метода позволяют сжимать изображения перед их загрузкой в ​​WordPress, и это то, что мы делаем на WPBeginner.

    Существует также несколько популярных плагинов WordPress, таких как Optimole, EWWW Image Optimizer и другие, которые могут автоматически сжимать изображения при их первой загрузке. Многие новички и даже крупные корпорации предпочитают использовать эти плагины для оптимизации изображений, потому что это просто и удобно.

    Мы расскажем больше об этих плагинах WordPress позже в этой статье.

    3. Размеры изображения

    Обычно, когда вы импортируете фотографию со своего телефона или цифровой камеры, она имеет очень высокое разрешение и большие размеры файла (высоту и ширину).

    Обычно эти фотографии имеют разрешение 300 точек на дюйм и размер от 2000 пикселей и более. Эти высококачественные фотографии хорошо подходят для печати или настольных издательских систем. Они не подходят для веб-сайтов.

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

    Например, мы оптимизировали фотографию с исходным размером файла 1,8 МБ, разрешением 300 точек на дюйм и размером изображения 4900 × 3200 пикселей.

    Мы выбрали формат jpeg для более высокого сжатия и изменили размеры до 1200 × 795 пикселей, а также уменьшили размер файла изображения до 103 КБ. Это на 94% меньше исходного размера файла.

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

    Лучшие инструменты и программы для оптимизации изображений

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

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

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

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

    Adobe Photoshop

    Adobe Photoshop — это программное обеспечение премиум-класса с функцией сохранения изображений, оптимизированных для Интернета. Просто откройте свое изображение и нажмите «Файл» Сохранить для Интернета ».

    Откроется новое диалоговое окно. Справа вы можете установить разные форматы изображений.Для формата JPEG вы увидите разные варианты качества. Когда вы выбираете свои параметры, он также показывает размер файла в нижнем левом углу.

    GIMP

    GIMP — это бесплатная альтернатива популярному Adobe Photoshop с открытым исходным кодом. Его можно использовать для оптимизации ваших изображений для Интернета. Обратной стороной является то, что его не так просто использовать, как некоторые другие решения из этого списка.

    Сначала вам нужно открыть изображение в GIMP, а затем выбрать опцию File »Export As .Это вызовет диалоговое окно сохранения файла. Дайте вашему файлу новое имя и затем нажмите кнопку экспорта.

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

    TinyPNG

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

    Они сожмут изображение и дадут вам ссылку для скачивания. Вы можете использовать их дочерний веб-сайт TinyJPG для сжатия изображений JPEG.

    У них также есть расширение для Adobe Photoshop, которое мы используем в процессе редактирования изображений, потому что оно сочетает в себе лучшее из TinyPNG и TinyJPG внутри Photoshop.

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

    JPEG Mini

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

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

    ImageOptim

    ImageOptim — это утилита для Mac, которая позволяет сжимать изображения без потери качества, находя лучшие параметры сжатия и удаляя ненужные цветовые профили.

    Альтернатива Windows

    — Trimage.

    Лучшие плагины для оптимизации изображений для WordPress

    Мы считаем, что лучший способ оптимизировать ваши изображения — это сделать это перед загрузкой в ​​WordPress. Однако, если у вас сайт с несколькими авторами или вам нужно автоматизированное решение, вы можете попробовать плагин сжатия изображений WordPress.

    Ниже представлен наш список лучших плагинов для сжатия изображений WordPress:

    1. Optimole — популярный плагин от команды ThemeIsle.
    2. EWWW Оптимизатор изображения
    3. Сжатие изображений JPEG и PNG — плагин от команды TinyPNG, упомянутой выше в статье.
    4. Imagify — плагин от популярной команды плагинов WP Rocket.
    5. Оптимизатор изображения ShortPixel
    6. WP Smush
    7. reSmush.it

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

    Заключительные мысли и передовые методы оптимизации изображений

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

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

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

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

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

    Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

    Как оптимизировать изображения и фотографии для Интернета (без потери качества)

    Сколько внимания вы уделяете оптимизации изображений в вашем магазине?

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

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

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

    Только видео соответствует мощности изображения в этом отношении.

    И вы используете свои фотографии везде:

    • На страницах ваших продуктов.
    • На страницах вашей категории.
    • На вашей домашней странице.
    • В твоей брошенной корзине сообщений.
    • В вашем блоге.
    • В ваших социальных сетях.
    • Для вашей рекламы в Facebook.
    • Для вашей ленты Google Покупок.

    Фактически, единственное, для чего вы не используете изображения, — это Google AdWords. А Google AdWords часто является самым дорогим вариантом контекстной рекламы, который у вас есть.

    Что такое Google Speed ​​Update?

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

    В январе 2018 года компания объявила, что алгоритмы мобильного поиска начнут учитывать скорость загрузки страниц с июля 2018 года.

    Это называется Speed ​​Update.

    И есть 2 вещи, которые замедляют скорость загрузки страницы:

    1. Слишком много javascript часто вызвано слишком большим количеством приложений и недостаточно встроенным на ваш сайт.
    2. Слишком большие изображения, не оптимизированные для размера экрана.

    Меньше приложений. Больше продаж.Только на BigCommerce

    «Недавно мы перевели платформу с Shopify Plus на BigCommerce. Я не могу объяснить, насколько я зол на то, что в течение нескольких месяцев мы платили Shopify многие тысячи долларов за функциональность, которая входит в стандартную комплектацию BigCommerce!

    Как только мы решили отказаться от Shopify, мы буквально потратили три дня на BigCommerce, устанавливая шаблон, настраивая, а затем завершая полный импорт продукта.

    Отзывы, которые я получил от людей, с которыми я уже поделился сайтом, гласили: «Он загружается намного быстрее! Мобильный опыт стал намного лучше! »

    — Ричард Эйб, Монро и Кент

    Протестируйте свои данные в BigCommerce

    Платформы, такие как BigCommerce, решают эту проблему: Расширение функциональности платформы. В среднем магазины BigCommerce используют 2-5 приложений. На других платформах SaaS среднее значение +15.

  • Автоматическая оптимизация всех изображений для скорости загрузки страницы на любом устройстве. BigCommerce сотрудничает с Akamai, лидером в области оптимизации изображений в Интернете, чтобы автоматически оптимизировать все изображения для всех клиентов — без дополнительных усилий или затрат с их стороны.
  • Минус технический долг. Подробнее Продажи

    «Решение о переходе на сеть Akamai Image Manager стало стимулом для наших продавцов, позволив им сократить время загрузки сайта и повысить общую производительность мобильных сайтов.

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

    — Фрэнк Морралл, президент VisionCourse Media, агентства онлайн-маркетинга и дизайна и партнера BigCommerce.

    Вся правда об оптимизации изображений, скорости и прибылях

    Да, изображения являются одним из, если не самым важным активом для вашего интернет-магазина.

    И все же слишком часто ими пренебрегают — владельцы магазинов полностью забывают оптимизировать изображения для Интернета.

    Почему?

    • Потому что оптимизация изображений для Интернета — это всего лишь один дополнительный шаг в бесконечном списке дел.
    • Часто рассматривается как низкий приоритет и поэтому забывается.

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

    Но с чего начать?

    Мы вам поможем.

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

    Почему изображения так важны

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

    1. Первое впечатление важно.

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

    На самом деле, в исследовании 2017 года, проведенном по заказу BigCommerce и Square, американские онлайн-покупатели назвали дополнительную фотографию продукта как первую вещь, которую они хотят получить от онлайн-брендов.

    Комплексное исследование современных покупательских привычек

    Поскольку электронная коммерция растет на 23% в год, используйте это исследование, чтобы узнать, как сделать онлайн-продажи и личные продажи более удобными (и зарабатывать больше $$$!)

    Получить данные сейчас

    2.Картинка стоит 1000 слов.

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

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

    Действительно, в том же исследовании, проведенном BigCommerce и Square, почти половина респондентов (49%) назвали невозможность потрогать, почувствовать или попробовать продукт как один из наименее любимых аспектов онлайн-покупок.

    Это был второй наиболее ненавистный аспект онлайн-покупок в исследовании.

    3. Мобильная связь берет верх.

    По мере того как мобильные покупки становятся все более распространенными, изображения будут становиться все более важными — о чем свидетельствует шаг Google Speed ​​Update.

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

    Как вы думаете, покупатель сначала прочитает каждое описание или посмотрит фото?

    Наличие более четких и привлекательных изображений продуктов электронной коммерции означает, что на ваши продукты будут чаще смотреть, нажимать и покупать.

    4. Изображения могут навредить вашему сайту.

    Использование непрофессиональных или плохо оптимизированных изображений для Интернета может существенно повлиять на ваш опыт покупок и даже на ваше положение в поисковых системах.

    • Ваши изображения загружаются медленно?
    • Вы не добавляли метаописание?
    • Люди подпрыгивают, как только приземляются там?

    Вы никогда не попадете на страницу 1 с таким поведением.

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

    Оптимизация изображений и фотографий: краткое руководство

    Первый шаг к оптимизации фотографии вашего продукта (или любого изображения на вашем сайте) — это сначала начать с отличных фотографий. А если вам нужна помощь в поиске профессиональных изображений для использования на вашем веб-сайте, ознакомьтесь с этим исчерпывающим ресурсом: «Более 35 сайтов для получения бесплатных изображений для коммерческого использования».

    Но после этого большая часть процесса оптимизации остается за кадром.

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

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

    Добавьте к этому мощность и настраиваемость SEO вашего сайта (то есть полный контроль URL-адресов по всем направлениям), и вы выиграете в Google.

    Давайте посмотрим, как это сделать, независимо от того, на какой платформе вы находитесь.

    Автоматическая оптимизация изображений и полный контроль SEO

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

    • Без дополнительных затрат.
    • Не тратьте время зря.

    Плюс, BigCommerce — единственная платформа SaaS, которая позволяет полностью настраивать URL-адреса и метаданные всех сайтов. Непатентованный язык программирования платформы также получает бонусные баллы от Google.

    Перенесите данные прямо сейчас и убедитесь сами, воспользовавшись 15-дневной бесплатной пробной версией.

    Протестируйте платформу, которой вы управляете.

    1. Начните с хороших фотографий.

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

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

    Но есть несколько советов, которым вы можете следовать, чтобы убедиться, что вы начинаете с самых лучших фотографий.

    Убедитесь, что у вас правильные настройки.

    Настройка фотографии в электронной коммерции не должна быть дорогостоящей, но если вы только начинаете, есть несколько вещей, в которые вы должны инвестировать, чтобы делать качественные фотографии:

    1. Бытовая цифровая зеркальная камера или смартфон. В большинстве современных смартфонов есть камера, которой более чем достаточно для съемки стандартных фотографий продукта. Использование смартфона также дает вам доступ к сотням приложений для фотографий.
    2. Источник света. Наличие источника света помогает обеспечить равномерное освещение вашего изображения и существенно повлияет на качество ваших фотографий. Если вы только начинаете, вам будет проще работать с естественным источником света. В этом случае использование заполняющего света поможет вам устранить тени на вашем изображении.
    3. Белая развертка. Развертка поможет равномерно распределить освещение по изображению и упростит последующее редактирование фотографий. Это может быть что угодно, от белого листа до рулонов бумаги.
    4. Устойчивая поверхность. Если вы делаете несколько фотографий, наличие устойчивой поверхности позволяет легко размещать изображения одинаково.
    5. Штатив для фотоаппарата. Точно так же наличие штатива для камеры гарантирует, что вы всегда сможете получать фотографии с одинаковым расположением.Это также позволяет легко перенастроить ваши продукты без необходимости одновременно манипулировать камерой.

    2. Продемонстрируйте свою продукцию под разными углами.

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

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

    Например, в интернет-магазине одежды Olive Ave они используют различные снимки, чтобы продемонстрировать свой продукт.

    Это можно сделать и без моделей. Взгляните на этот пример от KAOS.

    Различные фотографии могут помочь продемонстрировать разные аспекты.

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

    3.Используйте белый фон для ваших продуктов.

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

    Белый фон является стандартным почти для каждого интернет-магазина, и для этого есть несколько очень веских причин:

    1. Ваши товары будут появляться на белом фоне
    2. Ваши изображения будут выглядеть одинаково на страницах коллекции
    3. Это спасет вас деньги и время на редактирование
    4. Вы можете легко повторно использовать или заменить фон на любой из ваших фотографий.
    5. Торговые площадки, такие как Google Покупки и Amazon, теперь требуют белого фона

    Использование изображений на белом фоне упрощает сравнение продуктов.Источник: jenis.

    Вы можете использовать такое программное обеспечение, как Photoshop или Pixlr, чтобы вручную заменить фон фотографий вашего продукта на белый фон, или позволить сервисам, таким как Pixc, сделать эту работу за вас.

    4. Сохраняйте изображения с правильными размерами.

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

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

    Используйте пиксели для измерения размеров изображений.

    В вашем iPhone будет что-то вроде 12-мегапиксельной камеры, что означает, что фотографии, которые он делает, состоят из двенадцати миллионов пикселей. Фотографии, сделанные камерой 12 МП, будут иметь размер 3000 x 4000 пикселей.

    Для фотографии в электронной коммерции этот размер не нужен. Например, в BigCommerce оптимальный размер фотографий вашего продукта составляет 1028 на 1028 пикселей, в то время как остальные фотографии должны быть меньше 1000 пикселей с обеих сторон.

    Сохранение квадратных изображений обеспечит правильное отображение и хороший внешний вид независимо от того, длиннее или выше содержание фотографии.

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

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

    Изображения можно уменьшать до различных размеров. Источник: Martha Stewart Cafe Shop

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

    Сервисы, такие как Pixlr, Canva и Image Resizer, могут помочь вам с базовыми потребностями в редактировании и изменении размера.

    Более быстрые кассы. Меньше развития.

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

    5. Увеличьте скорость загрузки страницы, используя правильный формат изображения.

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

    Ваш магазин BigCommerce поддерживает три различных формата изображений: JPG / JPEG, GIF или PNG. У каждого из них есть свои преимущества и недостатки.

    • Файлы GIF имеют меньшее качество, но также и размер файла. Если вам нужно создать изображение специально для небольших значков или миниатюр, вы, вероятно, захотите использовать GIF. Это также единственный доступный формат, который поддерживает анимацию (хотя следите за APNG). Однако по мере увеличения размера изображения GIF-файлы становятся менее эффективными при обработке цветов.
    • Файлы PNG поддерживают более широкий диапазон цветов, а также единственный формат, поддерживающий прозрачный фон. Однако все это происходит за счет большего размера файла. Если вам нужно отредактировать фотографию несколько раз, вы захотите экспортировать ее как файл PNG.
    • Изображения JPEG являются наиболее распространенным форматом, используемым в цифровых камерах и в Интернете. Они поддерживают широкий диапазон цветов, но настройки сжатия JPEG позволяют найти баланс между качеством изображения и размером файла.

    JPEGS предлагает хороший баланс между размером файла и качеством, тогда как GIFS предлагает небольшой размер файла для более сложных изображений. Источник изображения: Brook Lark

    6. Поэкспериментируйте с настройками качества.

    В большинстве случаев JPEG будет предпочтительным типом файла для ваших изображений. Он предлагает изображение высокого качества при разумных размерах файлов.

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

    Посмотрите на этот пример, где одна и та же фотография была сохранена с использованием разных уровней сжатия:

    Результат использования высокого, среднего и низкого сжатия JPEG. Источник изображения: Alex Jones

    Когда не использовать JPEG.

    Хотя JPEG является наиболее популярным форматом для веб-изображений, в некоторых случаях лучше использовать файлы с более высоким разрешением, например PNG. Например:

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

    Не в BigCommerce? Сжимайте изображения с помощью этого бесплатного инструмента.

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

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

    Для всех остальных… давайте начнем здесь:

    Если вы не знакомы с единицей данных Byte, каждый байт равен 1024 предыдущему.

    Итак, чтобы уточнить:

    1024 байта (b) = 1 килобайт (кб). 1024 Килобайт = 1 мегабайт (МБ). 1024 МБ = 1 гигабайт (ГБ)

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

    Типичный размер файла фотографии iPhone 7 составляет около 3 МБ, что соответствует 3072 КБ или более чем 30-кратному оптимальному размеру изображения!

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

    Большинство инструментов для редактирования изображений позволяют настраивать уровень сжатия файлов JPEG.

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

    TinyJPG — одна из таких бесплатных услуг — бесплатный оптимизатор изображений — и принимает изображения как в формате JPG, так и в формате PNG.

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

    TinyJPG покажет вам исходное изображение вместо оптимизированного.

    Даже если вы уже сжимаете изображения при сохранении, вы будете удивлены, насколько сильно может повлиять запуск их через службу, подобную TinyJPG.

    Оптимизация изображений в поисковых системах 101

    Изображения — фантастический источник органического контента, который может помочь вам повысить ваш рейтинг в Google.

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

    1. Используйте информативные имена файлов.

    Имена изображений — это первая информация, которую вы можете предоставить Google, чтобы они знали, о чем ваше изображение.

    Имя файла по умолчанию, которое исходит от вашей камеры и выглядит как строка чисел, никак не описывает, о чем на самом деле фотография.

    При именовании изображений опишите содержание фотографии и используйте тире вместо пробелов. BigCommerce не допускает пробелов в именах файлов изображений.

    Переименование файла для оптимизации по ключевым словам, включая рисунок линий и счастливая женщина.

    2. Включите соответствующий альтернативный текст.

    Альтернативный текст предназначен для специальных возможностей, и именно так к нему следует подходить.

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

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

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

    Сопоставление имени оптимизированного файла изображения с моими метаданными, заголовком страницы и структурой URL-адресов в серверной части страницы продукта.

    3. Обеспечьте контекст вокруг изображения.

    Контент, который окружает ваше изображение, также важен.

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

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

    Здесь я обновил описание продукта, включив в него все мои ключевые слова: художественный принт, штриховой рисунок, счастливая женщина. Я также добавил дополнительный контент и детали в целях брендинга.

    4. Используйте изображения для улучшения восприятия.

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

    • Используйте фотографии хорошего качества, не размытые. Имеются смартфоны и бесплатное программное обеспечение для редактирования, поэтому нет оправдания тому, что у вас нет фотографий хорошего качества. Это улучшает работу, и люди с большей вероятностью будут ссылаться на страницы с более качественными фотографиями.
    • Поместите их выше по странице. Люди не всегда прокручивают страницу вниз, поэтому убедитесь, что ваши изображения расположены выше по странице, где читатели смогут их увидеть.
    • Укажите ширину и высоту каждого изображения. Если браузер знает, насколько большим будет изображение, он может загрузить остальное содержимое на место, пока он ожидает завершения загрузки изображения. Это может сократить время, необходимое для загрузки вашей страницы, и улучшить взаимодействие с пользователем.

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

    Уловка торговли: используйте открытый график, чтобы показывать правильное изображение в социальных сетях

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

    Источник: Kelty

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

    Вот где это можно сделать в бэкэнде BigCommerce для каждого отдельного продукта.

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

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

    Контрольный список для оптимизации изображения продукта

    Изображения продукта могут сделать или сорвать продажу.

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

    Итак, применяете ли вы эти передовые методы, когда дело касается изображений ваших продуктов?

    Вот контрольный список, чтобы убедиться, что вы делаете это в 100% случаев.

    1. Настройтесь на успех.

    • Во-первых, установите камеру на штатив (или на любую твердую и устойчивую поверхность), чтобы избежать дрожания камеры.
    • Затем убедитесь, что вы снимаете при достаточном освещении , чтобы осветить и ваш продукт, и все пространство для фотосъемки.Вы можете сделать это, используя несколько источников света (подойдут вспышки, стробоскопы и даже обычные настольные лампы), но самый простой способ — использовать естественное освещение.
    • Используйте солнце как источник непрямого света. Сделайте снимок возле окна и, если оно слишком яркое, рассеивайте свет с помощью белых одеял, листов или бумаги. Освещение вашего продукта на этапе съемки позволит получить более качественную фотографию, а также сэкономит вам много времени на редактирование.
    • Рассмотрите возможность съемки на белом фоне. На настройку уходит немного больше времени, но потом легче удалить фон, если вы захотите это сделать, и это поможет при калибровке баланса белого вашей камеры. Кроме того, белый цвет отражает свет, тогда как более темные цвета его поглощают, поэтому ваш продукт, естественно, получится красиво осветленным и контрастным.

    2. Сделайте несколько снимков.

    Всем нравится удобство покупок в Интернете, но, честно говоря, ничто не сравнится с возможностью физически прикоснуться к товару.

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

    • Начните с «образа героя». Это первая из серии изображений вашего продукта. Лучший вариант для главного изображения — это либо фронтальный снимок, либо снимок под углом 45 градусов, в зависимости от продукта. В некоторых случаях, например, в обуви, более подходящим может быть выстрел сбоку.Фотография должна быть простой и содержать только товар, который вы продаете, чтобы не запутать зрителя.
    • Продолжайте изображение вашего героя , добавьте фотографии сверху, снизу, сбоку, сзади и т. Д.

    3. Сделайте снимки в контексте.

    Затем продавайте свой продукт с помощью контекстных фотографий.

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

    Зритель должен захотеть все, что есть на фотографии (включая ваш продукт, подмигнуть, подмигнуть, подтолкнуть, подтолкнуть).

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

    4. Очистите готовые фотографии.

    Есть также несколько рекомендаций, которые следует помнить после того, как вы положите камеру.

    Хорошая идея — удалить фон и позволить вашим продуктам говорить за вас.

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

    5. Подберите правильный размер.

    Когда дело доходит до загрузки фотографий вашего продукта электронной коммерции в ваш магазин, размер и качество изображения имеют значение!

    При настройке интернет-магазина вы выбираете размеры изображения продукта для своего шаблона.

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

    Не делайте ошибку, вручную изменяя размер изображений до этого размера перед их загрузкой в ​​BigCommerce.

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

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

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

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

    • Создайте холст нужного размера в Photoshop и перетащите фотографии на новый холст, изменяя их размер в пределах нового холста, а не исходных файлов.
    • Если у вас нет Photoshop или вы хотите что-то более простое в использовании, используйте Canva. Просто создайте дизайн, используя нестандартные размеры, загрузите свои изображения и измените их размер. Это слишком просто!

    6. Будьте последовательны.

    Наконец, вы хотите, чтобы ваши изображения выглядели согласованно.

    В вашем шаблоне BigCommerce все они будут одинакового размера, а белый фон сохранит все красиво и аккуратно.

    Но если вы хотите, чтобы изображения продуктов выглядели более профессионально, настройте фотографии продуктов так, чтобы они занимали 80-90% холста.

    Это означает, что даже на странице продуктов разной формы все равно будет этот элемент согласованности.

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

    Часто задаваемые вопросы по оптимизации изображений

    Улучшение изображений в интернет-магазинах — один из наиболее эффективных способов сделать покупки удобнее для ваших клиентов.

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

    С советом, данным в этом руководстве, у вас есть все необходимое, чтобы начать оптимизацию изображений продуктов электронной коммерции, чтобы привлечь больше трафика и увеличить продажи.

    В заключение давайте ответим на несколько кратких часто задаваемых вопросов по оптимизации изображений.

    Что такое сжатие изображений?

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

    Сжатие изображения сжимает размер изображения (делает его меньше) без ущерба для качества в зависимости от устройства, с которого человек просматривает изображение.

    Например, размер файла, необходимый для печати фотографии высокого качества, очень велик. Для них вам нужно изображение с высоким разрешением (hi-res), то есть изображение 4608 x 3456 даст отпечаток 15 x 11. Потребности в веб-изображениях ниже.

    Что такое сжатие без потерь?

    Сжатие без потерь описывает сжатие файла изображения, при котором все исходные данные могут быть восстановлены, когда файл не сжат.

    При сжатии без потерь каждый бит данных, который изначально был в файле, остается после того, как файл будет распакован.

    Вашему магазину нужно об этом беспокоиться? Это зависит.

    Лучше всего сохранять все исходные файлы в облаке с резервной копией. Другими словами, используйте Google Диск, Dropbox или Box, чтобы сохранять свои оригинальные большие файлы.

    Что такое сжатие с потерями?

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

    Это означает, что исходный файл не может быть восстановлен.

    Для своего интернет-магазина, если вы используете этот метод, вы захотите использовать файл облачного хранилища с резервной копией для сохранения исходных файлов.

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

    В чем разница между сжатием с потерями и сжатием без потерь?

    Разница между сжатием с потерями и сжатием без потерь заключается в способе сжатия изображения.

    При сжатии с потерями невозможно восстановить исходный файл.

    При сжатии без потерь вы можете восстановить исходный файл.

    В любом случае исходные файлы следует хранить в облачной службе с резервной копией жесткого диска.

    Заметят ли пользователи, когда фотографии товаров будут оптимизированы?

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

    Пользователи не заметят заметной разницы, кроме более высокой скорости загрузки страницы.

    Какие еще инструменты оптимизации изображений вы порекомендуете?

    Должны ли изображения быть адаптивными?

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

    В магазинах BigCommerce это делается автоматически бесплатно. Если вы используете другие платформы электронной коммерции, узнайте у них предлагаемые решения и стоимость.

    Как люди, не являющиеся дизайнерами, могут создавать качественные изображения для веб-сайтов?

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

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *