Как подготавливать фотографии для Фотогалерей и Блога – Справочный центр Vigbo

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

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

В каком формате лучше сохранять изображения для сайта?

Мы поддерживаем два основных формата изображений, это JPEG (JPG) и PNG. Изображения других форматов могут обрабатываться некорректно.

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

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

1. PNG-8 — использует 256 цветов и ограниченную прозрачность, в сравнении с PNG 24.
2. PNG-24 — использует 16 млн. цветов. Имеет гораздо больший вес по сравнению с PNG-8, зато есть возможность задать полупрозрачность пикселям;

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

ВАЖНО: выбирайте при сохранении количество точек на дюйм — 72 dpi, а цветовой профиль — sRGB.

Вес

Чем легче картинка, тем быстрее она загружается. Вес зависит от трех параметров:

1. Размер изображения в пикселях (фотография размером 3000х2000 пикселей тяжелее, чем фото 300х200 пикселей)

2. Содержания самой картинки — чем больше на фото мелких деталей и цветов, тем больше она весит.

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

Максимальный размер фото для добавления на сайт — до 10 Мб.

Что происходит при загрузке изображения на сайт?

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

• 500 пикселей
• 1000 пикселей
• 2000 пикселей.

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

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

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

Мы рекомендуем подготовить фотографии заранее, перед загрузкой их на сайт. Самое оптимальное фото — это изображение не более 2000 рх по ширине и объемом не более 600 кб.

Получить оптимизированное изображение вы можете двумя способами:

• Оптимизация с помощью функции «Save for Web» графических редакторов (например, Adobe Photoshop, Gimp и т.д.). Можно использовать online-версию редакторов;
• Оптимизация с помощью сервисов или программ по оптимизации (например, Tinypng.com или compress.io). Если вы используете функцию «Save for Web» графических редакторов, то дополнительная оптимизация сторонним сервисом не нужна. Вы можете самостоятельно установить нужную степень сжатия (alt+shift+ctrl+S) и в настройках указать процент сжатия (оптимальное значение 89%) при сохранении фото и в большинстве случаев этого будет достаточно.

Какое количество фотографий можно загрузить на сайт?

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

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

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

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

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

Подготовка изображений для сайта — Альт С г. Кузнецк (84157) 3-09-66

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

Почему стоит уделять внимание размеру изображений на сайтах.

Ни одна публикация, в интернете, как правило, не обходится без изображений. Иначе будет трудно привлечь внимание читателя. Без рисунков и фотографий, скорее всего контент останется незамеченным. Поэтому очень важно сопровождать тексты тематическими фотографиями. Однако, на скачивание изображений тратится большое количество трафика.  В среднем на сайтах около трети объема всего контента приходится на долю изображений. Если не придавать значения размеру таких файлов, тогда картинка будет грузиться слишком долго, и поисковый робот, не дождавшись завершения этого этапа, может покинуть эту страничку, даже не узнав что на ней имеется другая информация. Таким образом публикация не будет проиндексирована должным образом и никогда не попадет в поисковую выдачу. Вот почему очень важно следить за объемом фотографий в ваших публикациях.

Какой должен быть размер фотографии для сайта?

Чтобы сильно не углубляться в теорию, приведем конкретные цифры. Очень редко, когда требуется фотография на сайт размером более 800 точек (пикселей) по большей стороне.  Если вы не знаете точно, что вам это нужно, значит скорее всего это не ваш случай.  Часто даже такое число точек избыточно.  Для миниатюр (небольших изображений) следует использовать 300-400 точек по большей стороне.

Какой формат изображений нужно использовать на сайте?

В основном на сайтах используются форматы jpg и png. Как правило первый имеет меньший размер, однако второй может содержать прозрачные элементы, такие как фон, например. Формат jpg имеет параметр «Качество». Никогда не делайте его 100% . Мало кто отличит его «джипег» с качеством 80%. А размер существенно изменится. Как правило достаточно выставлять этот параметр на 50%. Это будет некий компромисс между качеством и объемом изображения.

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

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

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

Подготовка файлов для интернета в Фотошопе

1 Открываем фотографию в программе Photoshop

2 Делаем «ресайз» (изменяем размеры изображения). Входим: Изображения->Размер Изображения. Выставляем нужные значения и нажимаем ОК. Пропорции при этом лучше сохранять. В этом примере размер 1400 на 700 пикселей. Это баннер на главную страницу сайта, поэтому разрешение достаточно большое.  Если выставить единицы измерений в сантиметрах, увидим следующее: при разрешении 72 пикселя на дюйм, что соответствует разрешению мониторов, наш рисунок не будет масштабироваться в сторону увеличения на экранах почти в 50 см по ширине. Такой вариант нас вполне устраивает.

3 Следующим шагом неплохо будет повысить резкость изображения. Воспользуемся например, одним из самых простых методом. Для этого переходим: Фильтр->Усиление резкости->Контурная резкость. Находим лучший результат двигая ползунки в диапазонах: эффект 120-180%, радиус 0,2-0,4 пикселя. Нажимаем ОК.

4 Завершающий этап это сохранение файла. Для этого необходимо воспользоваться специальной функцией программы Файл->Экспортировать->Экспортировать как…  В этом диалоге нужно проставит Тип файла и качество. Другие показатели лучше не трогать. Тип выбираем JPG. Качество 50%. И нажимаем кнопку «Экспортировать все…» Нужный файл готов для публикации в интернете.

В каких случаях использовать формат PNG

Вроде все, файл подготовлен, можно было бы на этом остановиться.   Однако хотелось бы немного подробнее остановиться на моменте, в каких случаях лучше воспользоваться форматом PNG. Однозначно нужно использовать этот формат, когда в изображении нужно сохранить элементы прозрачности. В JPG такой возможности нет. Но в некоторых случаях использование формата png дает выигрыш и по объему изображение меньше и по качеству лучше. Посмотрим это на примере:

На рисунке справа приведены три варианта установок для экспорта одного файла. К его особенностям можно отнести достаточно большое занимаемое пространство с однородной заливкой определенным цветом. Другими словами с однородным фоном. К таким изображениям как правило относятся «скрины» экранов. На примерах видно, что в таких случаях применение формата jpg не приводит к уменьшению размера файла. При качестве в 50% имеем примерно такой же размер как и png. Но у последнего как известно качество не теряется вообще. Более того, если установить галочку для png «Файл меньшего размера 8 бит» Мы сможем уменьшить наш файл еще почти в три раза. При этом качество изображения пострадает только в части цвета. Это может быть неприемлемо при публикации фотографий, но для схем, чертежей, скринов экранов подойдет очень хорошо. 

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

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

Как подготовить фото для интернета

Всем привет! Я рад Вас видеть на моем блоге ps-blog.ru, который посвящен урокам  для начинающих пользователей по программе Фотошоп. Напоминаю, что в прошлой статье мы научились загружать шрифты в Фотошоп, всем кто еще ее не читал эту статью рекомендую с ней ознакомится.

Сегодня мы продолжим изучать основы Фотошоп, тема сегодняшнего урока Как подготовить фото для интернета. Возможно, у Вас сразу возникли вопросы,  для чего и зачем фото готовить для интернета? Можно ведь просто взять загрузить и все.

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

5 причин подготовки изображений для WEB

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

Во время вёрстки веб-дизайна, все элементы макета будущего сайта (картинки в формате .png и .jpg) обязательно  подготавливаются для интернета, без этого вёрстка невозможна.

 Неправильные пропорции фотографии, которые приводят к искажению. Этот пункт я думаю не нуждается в разъяснение.

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

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

 В некоторых ситуациях требуется загрузка изображения определенного размера и формата. Например Вам нужно загрузить иконку 16×16 пикселей в формате .png для своего сайта. Все это легко и просто можно сделать в Фотошоп.

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

(Save for Web). Это мощный модуль управления процессами оптимизации и сохранения документов, который автоматически подбирает оптимальные настройки сохраняемого файла. Этот модуль поддерживает и работает с самыми распространенными форматами файлов для интернета .jpg, .gif, .png.

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

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

 выбор формата в котором изображение будет сохранено

 выбор качества и размера сохраняемого изображения

выбор способа оптимизации, сжатия и просмотр веса оптимизированного изображения.

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

Для того, чтобы перейти к сохранению для web, заходим в верхнее меню Файл/Сохранить для web или воспользуемся горячими клавишами Ctrl+Alt+Shift+S. 

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

Описание опций:

1. Четыре вкладки вариантов предварительного просмотра.

—  Исходное — это когда Вы видите тока своё исходное изображение

—  Оптимизация — это когда Вы видите в предварительном просмотре только оптимизированное изображение

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

—  4 Варианта — это когда Вы видите в предварительном просмотре исходное изображение, изображение в качестве котором Вы выбрали, изображение в качестве 22 и изображение в качестве 11.

2. Формат сохраняемого файла. В нашем случае мы выбираем JPEG.

—  PNG — формат файла для сохранения Веб-графики. Бывает двух видов, 8 bit -индексированые изображения, 24 bit — «все» цвета. Обычно в этом формате сохраняют клипарты и логотипы на прозрачном фоне.

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

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

3. Значение качества. Мне нравится «Высокое».

—  Низкое

—  Среднее

—  Высокое

—  Очень высокое

—  Наилучшее

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

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

6. Выставляем нужный размер изображения. В моём случае это, ширина 500 — пикселей, высота — 281 пиксель.

7. Размер оригинального изображения.

8. Размер оптимизированного изображения для интернета.

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

Подготовка изображений для WEB в PhotoShop

На первый взгляд в публикации фотографий нет ничего сложного – достаточно отсканировать ее и вставить на WEB-страничку. Но это лишь кажущаяся простота. Для того чтобы фотография или картинка из журнала выглядела привлекательно на вашей страничке и одновременно с этим не заставляла пользователя слишком долго ждать своего появления при невысокой скорости соединения, необходимо предпринять некоторые усилия.
Начнем с обычных фотографий.
Во-первых, если фотографии еще не напечатаны, и Вы только что подошли к окошку Kodak Express, обязательно заказывайте печать на ГЛЯНЦЕВОЙ бумаге, иначе при сканировании матового отпечатка получите нерезкое и «грязное» изображение. Все дело в том, что поверхность матового отпечатка похожа на сильно уменьшенную поверхность бушующего моря, а яркость лампы сканера значительно превышает яркость дневного света даже в том случае, если рассматривать отпечаток, стоя на экваторе в период летнего солнцестояния :). Поэтому при освещении снимка лампой сканера неровная поверхность фотографии начинает сильно «бликовать», что при сканировании вылезает как «белый шум». В результате отсканированное изображение будет казаться нерезким и пыльным что, к сожалению, не скорректировать никакими фильтрами.

Наконец Вы положили фотографию на стекло сканера и пытаетесь задать настройки сканирования.
Все WEB-изображения имеют разрешение 72 dpi. Но это совсем не означает, что в параметрах сканирования нужно ставить это число. Правильнее отталкиваться от размеров окончательной картинки в пикселях. Проще всего объяснить на примере. Допустим, у нас есть фотография 10×15 см. Нам надо вставит эту фотографию в ячейку таблицы, имеющую ширину 400 пикселей. Для начала, пересчитаем размер фотографии в дюймы, поделив ширину и высоту на 2.54. Получим 3.94×5.91 дюйма. Сейчас нас очень заинтересовала ширина. В окончательном варианте она должна будет составить 400 пикселей. Вот теперь можно высчитать разрешение сканирования, поделив так необходимые нам 400 пикселей на нашу ширину – 3.94 дюйма. Получаем 102 dpi. На самом деле, конечно, никто так не считает – этот расчет приведен лишь для наглядности и предотвращения некоторых заблуждений начинающих web-дизайнеров. На практике сканирование производится с заведомым запасом – в данном случае «на глаз» ставится 150 dpi, а потом в PhotoShop производится масштабирование до 400 пикселей. Теоретически, качество пересчитанного изображения должно быть хуже отсканированного «в размер», практически же это отличие незаметно.
Если фотография слишком темная, или наоборот – слишком светлая, настоятельно не рекомендую прибегать к регулировкам яркости и контрастности. Так как контроль этих регулировок производится чисто визуально, то очень легко «завалить» фотографию, т.е. «срезать» самые светлые и самые темные тона. Эти регулировки лучше использовать при создании эффектов для коллажей. Для «осветления» или «затемнения» изображения больше подходит инструмент «Levels» (рис.1).

Рис.1

Движки (1) и (3) подгоняются, соответственно, к началу и концу гистограммы, движком (2) регулируется насыщенность изображения. Здесь же можно скорректировать т.н. «черную точку», «серую точку» «белую точку», выбрав соответствующую пипетку (4) и пометив прямо на изображении места, где по-вашему мнению должны быть соответствующие тона. Причем, средней пипеткой можно выбрать любое по насыщенности место, в котором R,G и B составляющие цвета должны быть равны. PhotoShop при этом автоматически произведет цветокоррекцию всего изображения. Следующим этапом желательно сделать эффект «Filter — Sharpen — Unsharp Mask». Для визуального контроля изображения в процессе регулировок фильтра установите масштаб просмотра «Actual pixels», т.к. в увеличенном масштабе эффект может не понравиться :). «Unsharp Mask» не рекомендую применять, если фотография сильно запылена. Результат будет ужасен. C пылью можно попытаться расправиться с помощью эффекта «Noise – Ddust & Scratches». Главное в этом деле – не перестараться.

Здесь можно дать дополнения, которые касаются подготовки изображений из журналов. Журналы печатаются т.н. офсетным способом, поэтому изображение в журнале состоит из большого числа маленьких точек 4-х основных цветов модели CMYK: Cyan, Magenta, Yellow, blacK (цвет black обозначен по последней букве, чтобы не путать его с Blue из модели RGB). Это вносит в обработку ряд дополнительных трудностей. Первым делом нужно избавиться от растра. Хорошо зарекомендовал себя следующий способ:

Изображение сканируется с разрешением 600 dpi без применения фильтров сканера. Во многих сканерах присутствует опция «Descreen», но в большинстве случаев она работает просто отвратительно, особенно в сканерах класса SOHO. Поэтому ее не используем.
Полученное изображение увеличиваем лупой до такой степени, чтобы были видны офсетные точки, но в то же время просматривался достаточный фрагмент изображения.
Вызываем эффект «Blur – Gaussian Blur» и движком устанавливаем такую величину, при которой офсетные точки сольются и станут неразличимы.
Делаем «Image — Size» изображения до нужной нам величины.
Дальше – действия такие же, как и с фото, начиная с эффекта «Filter — Sharpen — Unsharp Mask». Стоит отметить, что иногда, особенно при сканировании некачественных публикаций, после попытки размытия офсетных точек эффектом «Blur – Gaussian Blur» на изображении остаются частые параллельные линии или «сетка», которые очень портят вид. В этом случае можно посоветовать положить картинку в сканер под углом, примерно 45? и сразу после сканирования повернуть изображение в PhotoShop в нормальное положение. Дальше – все как описано выше с пункта 2.
Вот теперь все готово для создания окончательного файла. Не стоит торопиться нажимать Ctrl+S, можно поступить более мудро — Ctrl+Alt+Shift+S (жутковато выглядит, не правда ли?). Если указательный палец правой руки при нажатии первых двух кнопок интуитивно тянется к Del, то Вам больше подойдет прогулка по меню File – Save for Web. Здесь все очень наглядно и в пояснениях почти не нуждается. Переходим на закладку 2-Up или 4-Up (кому как удобнее) и, визуально контролируя конечный результат, выбираем формат и параметры при которых наивысшее качество картинки соответствует наименьшему размеру файла. Единственно что я бы не рекомендовал делать в этом окне, так это изменять размеры изображения. Загонять картинку «в размер» лучше на первоначальном этапе, потому что пересчет пикселей может свести на нет все ваши героические усилия. Будет лучше, если фильтр «Filter — Sharpen — Unsharp Mask» будет последней садистской процедурой перед сохранением файла на диск. 🙂

Подготовка картинки для сайта в Photoshop

Сегодня, друзья, рассмотрим важнейшую для вебмастера задачу, такую как подготовка картинки для сайта в Photoshop. Казалось бы, что может быть проще? Загрузил фотографию с фотоаппарата или смартфона прямо в нужное место статьи и всё. Да не тут-то было! Оригинальное изображение, как правило, слишком большое и «весит» много.

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

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

подготовка картинки для сайта в Photoshop

Готовим картинку для сайта из интернета

Делаем скрин

В первом примере, мы приготовим изображение для сайта, взятое из интернета. Такая картинка пригодится, если вы ведёте сайт или блог по тематике WORLD OF TANKS. Для получения изображения отправляемся в популярный видео сервис Youtube и делаем скриншот.

делаем скриншот экрана

Затем открываем Фотошоп, и создаём новый файл. Для выполнения данной операции идём по пути «Файл» — «Создать», при необходимости выбираем опцию, тип документа — «буфер обмена».

создаем новое изображение

После создания нового документа, нажимаем комбинацию клавиш Ctrl+V и наш скриншот вставляется в рабочее окно нового изображения.

вставляем скриншот в рабочее окно фотошоп

Размер картинки

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

По личному опыту, могу сказать, что если вы планируете размещать картинку на сайте, а не в галерее изображений, её размер редко превышает 900-1000 пикселей по ширине. Причём для простого размещения в статьях, достаточно изображения 500-700 пикселей, по широкой стороне. Но возвращаемся к подготовке картинки для сайта и программе Photoshop.

Первым делом обрезаем всё лишнее, чтобы в рабочем окне осталось только изображение из игры. Берём инструмент «Рамка» (горячая клавиша C), выделяем нужную область и нажимаем «Enter». В результате вы видите картинку «из боя».

Теперь нужно подогнать размер и разрешение изображения под наши требования, учитывая, что картинка будет размещаться в сети интернет. Открываем рабочее окно «Размер изображения». Для этого, в строке меню нажимаем «Изображение» — «Размер изображения» или комбинацию клавиш Alt+Ctrl+I.

размер картинки после кадрирования

Следует запомнить! Для интернета достаточно разрешения 72 пикселя на дюйм. В то время как для печати фотографий или полиграфии следует выбирать разрешение в Photoshop — 300 пикселей на дюйм.

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

Теперь, когда картинка для сайта имеет нужный размер, можно немного подправить резкость, потерянную при увеличении. Выбираем в строке меню «Фильтр» — «Резкость» — «Умная резкость». И задаём параметры фильтра, по своему усмотрению или можете воспользоваться теми, которые указаны на моём изображении.

Здесь указан эффект резкости 90 %, радиус 0,7 пикселей, уменьшить шум — на 10%. Если ваша картинка требует дополнительной коррекции, можно поправить уровни, выровнять значения яркости и контрастности или повысить насыщенность. В программе Photoshop, эти операции выполняются легко и просто, и не требуют детальных разъяснений.

увеличиваем резкость в программе

Сохраняем картинку для сайта в Photoshop

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

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

сохраняем картинку для сайта

В режиме «Сохранить для Web» рекомендую, во вкладке просмотра (вверху), выбрать — 4 варианта.

В правой верхней части рабочего окна «Сохранить для Web» вы можете выбрать формат сохраняемого изображения — jpeg, gif, png. Чуть ниже находятся инструменты, отвечающие за качество сжатия. Используя их, можно наглядно определить, какой вариант соотношения качество-размер изображения, для вас — наиболее оптимальный.

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

картинка оптимизированная для размещения в интернете

Подготовка фотографии в Photoshop для интернета

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

оригинальный размер фотографии

Итак, открываем фотографию, всё в том же графическом редакторе Adobe Photoshop. Открываем через строку меню «Изображение» — «Размер изображения», комбинацию клавиш Alt+Ctrl+I. И меняем сначала разрешение изображения, на 72 пикселя на дюйм, а затем задаём ширину.

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

Первый вариант, мы используем инструмент «Рамка» (горячая клавиша C) и обрезаем фотографию вручную. И второй вариант, воспользоваться функцией «Изображение» — «Размер холста» (всё в той же строке меню). В появившемся рабочем окне задаём требуемую ширину — 500 пикселей и нажимаем «Ок», сохраняя результат.

изменяем ширину холста

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

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

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

фотография для для сайтов и блогов

Как видите, подготовка картинок и фотографий с помощью Photoshop — операция несложная, и доступная начинающему пользователю программы. Конечно, редактирование изображений, требует временных затрат. Но мы же стремимся построить правильный и быстрый сайт. А не как у «дяди Васи», который «Пупкин».

Поэтому стоит запастись терпением и подготовить каждую картинку вручную. В то же время не стоит забывать, что если вы создаёте сайт на WordPress, то для этой CMS есть плагины оптимизации изображений. Но многие из таких плагинов платные, да и вывести картинку «в идеал» плагин не сможет. Так что открываем Фотошоп, и работаем ручками.

Подготовка фото для размещения в интернет

Страница 1 из 2

  Существует несколько способов подготовки фото для размещения интернет:
  1. Как есть — просто перекачать файл фото с ф/аппарата, куда необходимо, благо если администратор проглядел и не установил ограничение на размер файла. Вам надо — вы и cкачивйте! (Иногда встречаются снимки 1-3Mb!!!!).
  Вы будете скачивать мегабайтные фото ради простого интереса, когда везде выкладывают по 80-150кб?
  Нет. Оказывается, можно спокойно уложиться в 100-150кб!

Ваши фото катеров могут стать лучше и меньше!

  2. Попытаться сжать то, что скачали с фотоаппарата. Качество страдает просто неимоверно — его просто не остается.
  3. Сделать ресайз (уменьшение размера картинки, и попытаться ее сжать подручными средствами). («Продвинутый». Наиболее распространенный.)
  4. И более-менее правильный, требующий наличия компьютера, клавиатуры, мыши, монитора и небольших навыков работы на нем, дающий профессиональный результат.

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

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

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

  Существует множество вариантов ресайза фото: пакетного, группового, скопового, пучкового и т.д. но, ни какая автоматическая программа не сделает это лучше Вас, с контролем каждого этапа!!!

  Лучше выложить качественно подготовленных 10 интересных снимков с рыбалки или похода на катере, чем 150 абы как.

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

  Все производим исключительно в фотошопе (Adobe Photoshop). При наличии цифрового фотоаппарата, наличие ФШ (Adobe Photoshop) является обязательным условием.

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

  Paint тоже умеет работать с графикой, но находится в группе программ «Пуск — Развлечения».

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

  Мнение о неимоверной сложности Adobe Photoshop как правило высказывают люди, не видевшие фотошоп (Adobe Photoshop) ни разу.

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

  Итак — вперед, без страха и сомнений, ваши фото катеров, мотоциклов, автомобилей и самолетов могут стать лучше!!!

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

1.   Кадрирование
2.   Уменьшение размера фото (Ресайз)
3.   Контроль уровней яркости
4.   Восстановление резкости
5.   Контроль цветового баланса

1. CROP (кадрирование) — отрежьте все лишнее

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

  Просто возьмите инструмент «Crop Tool» тыкнув в него мышью или нажав клавишу «С» и отрежьте все лишнее на ваше усмотрение, хотя бы вот так: заодно необходимо и уменьшить фото.
  Для чего же? При физическом размере исходного снимка 2400х1600 пикселей — изображение просто не поместится на среднестатистическом мониторе, и для просмотра его придется двигать лево-право, Internet Explorer же уменьшит для показа в полный экран подручными средствами превратив наклонные линии в пилу вот так — Пила после ресайза. Да и весить такой файл будет в разы неизмеримо больше, что отпугнет от скачивания более половины пользователей. Именно скачивания, а не просмотра.

  Зачем же тогда лишние килобайты? Получается, что только для пилы.

Image size — Размер изображения для интернета

  При определении физического размера снимка для интернет существует такое правило:
по высоте до 600-900 (pixels), а по длинной стороне 700-1200 (pixels).
  Имеющийся снимок горизонтальный, поэтому перед обрезкой указываем Width (ширина) 900.  Жмем Enter или двойной щелчек мышей, если Вы не нашли Enter.
  После этого смело берем двумя руками аккорд: «Ctrl+Alt+0» ноль, и видим изображение на экране в реальном размере — каким оно будет показываться решившему посмотреть фото.

Подготовка картинок для размещения на сайте. Оптимизация графики под Интернет

Каждая статья на сайте должна содержать картинки. Обязательно. Казалось бы ничего сложного в размещении нет. Но то как размещают фото некоторые пользователи в интернете — сильно огорчает. Как же правильно размещать картинки на сайте? Давайте разбираться. И начнем мы с подготовки графики.

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

Шаг 1. Оптимизируем размер

Пример №1. Размещаем картинку для блока с конкретным размером, который не меняется. Картинка для превью статьи в блоге размером 330х330 px.

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

Пример 2. Нужно разместить картинку шириной 300 px на странице с обтеканием текстом. Картинка при нажатии не увеличивается.

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

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

Шаг 2. Улучшаем качество

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

1. Увеличение контрастности на 7 пунктов:

2. Увеличиваем насыщенность на 7 пунктов:

3. Увеличиваем резкость с помощью фильтра «Умная резкость» на 50%:

Результат:

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

Шаг 3. Сохраняем картинку для Интернета

После оптимизации размера и улучшения качества — необходимо сохранить картинку с помощью функции «Сохранить для Web». В последних версиях Photoshop данный пункт находится во вкладке Экспортировать:

Далее выбираем параметры сохранения. Стандартный вариант: JPEG с качеством 80. Больше ставить нет смысла — на глаз не найти, а вот размер увеличится значительно. Если поставить меньше — качество заметно ухудшиться. Ели на картинке много текста — рекомендую сохранять в формате PNG-24, если сохранять в JPEG — будут весьма заметны артефакты вокруг текста.

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

Читайте также: Размещение картинок на сайте. Часть 2: Фото в тексте

Как подготовить фото для Интернета

Если бы я сказал вам, что 40% пользователей покинут веб-сайт, загрузка которого занимает более 3 секунд, и что Google подтвердил, что скорость загрузки сайта является фактором ранжирования — что бы вы сделали, чтобы ускорить работу своего сайта? Вы знаете, что это замедляет? Понятно, что веб-сайт с быстрой загрузкой важен, но как его оптимизировать?

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

1. Измените размер изображения до нужных размеров
2. Оптимизируйте размер файла с помощью TinyPNG или Kraken.io

Читайте подробнее о каждом шаге.

Шаг 1. Измените размер изображения

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

Какого размера мне следует изменить размер?

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

Вы также можете легко использовать функцию Google Chrome «проверить элемент», чтобы увидеть размер любого элемента на веб-странице. На приведенном ниже снимке экрана показано, что ширина этой статьи составляет 795 пикселей, поэтому, если я хочу добавить изображение, занимающее всю ширину статьи, я должен изменить размер своих фотографий, чтобы они не превышали 795 пикселей в ширину.

Используйте инструмент Chrome «Проверить элемент», чтобы увидеть ширину любого элемента на веб-сайте.

Как изменить размер?

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

1. Открыть изображение в Photoshop
2. Выполнение любых корректировок или небольших правок и кадрирования
3. Сохранить изображение для Интернета и устройств
4. Выберите PNG, если мне нужна прозрачность, или JPEG, если нет. Обычно я сохраняю изображения в формате JPEG high.
5. Оптимизировать размер файла изображения (подробнее ниже)

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

• Кракен.io
  Большим преимуществом Kraken.io является то, что он позволяет вам изменять размер изображения, в то время как система оптимизирует его для вас. Два шага в одном — это всегда хорошо!
• Paint.net
  Простой инструмент для редактирования изображений для Windows.
• Pixlr
  Программа для редактирования фотографий для Mac, Windows, iOS и Android
• Skitch
  Замечательный инструмент для создания снимков экрана от разработчиков Evernote.

Шаг 2. Оптимизация размера файла

Фотографии содержат метаданные, которые занимают место и увеличивают размер фотографии.Если у вас нет особых причин для сохранения этого контента, его можно удалить без ущерба для качества фотографий. После изменения размера изображения загрузите сохраненное изображение на TinyPNG или Kraken.io, чтобы оптимизировать изображение и посмотреть, сколько вы можете сэкономить. Для еще более быстрого рабочего процесса у TinyPNG есть плагин Photoshop, а у Kraken.io есть плагин WordPress.

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

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

Подготовка фотографии для использования в Интернете

Две самые важные особенности фотографии при просмотре в Интернете — это то, что она быстро загружается, (имеет небольшой размер файла), и все же выглядит хорошо . «Как?» Я слышал, вы спросите. На самом деле, это не так уж и невозможно, как может показаться на первый взгляд. Из этого туториала Вы узнаете, как это сделать с помощью Photoshop, но большинство программ для редактирования схожи, и вы сможете добиться тех же результатов.

Размер изображения и резкость

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

Если вы уменьшите размер фотографии с помощью более ранних версий Photoshop, чем CC, сильно потеряет резкость . Если это касается вас, вам нужно использовать маску нерезкости , чтобы вернуть эту резкость. Инструмент находится в разделе « Фильтр> Резкость> Маска нерезкости… ».Радиус 0,5 идеально подходит, и любая резкость от 40 до 80% вернет этот кристально чистый вид.

Если у вас есть Photoshop CC, у них есть инструмент под названием «Бикубическая резкость (уменьшение)», который применяется во время сжатия и хорошо справляется с сохранением резкости меньшего изображения. В большинстве случаев мне не нужно использовать нерезкую маску после сжатия из-за этого.

Чтобы изменить размер изображения , перейдите к « Изображение> Размер изображения… ».Введите 1024 пикселей в поле ширины для альбомных изображений или поле высоты для портретных изображений. Убедитесь, что ссылка нажата , так как это сохранит пропорции вашего изображения правильными.

Размер файла

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

Когда я сохраняю фотографию с размером самой длинной стороны 1024 пикселя, как обычный JPEG, она имеет размер около 500 КБ. Может показаться, что это не так уж много, но два таких изображения имеют размер 1 мегабайт. Десять изображений занимают 5 МБ, и очень быстро ваш сайт становится тяжелым и вялым.

К счастью, есть способ обойти это. Если вы сохраните изображение с помощью настройки « сохранить для Интернета », размер файла значительно уменьшится.Для меня то же изображение, показывающее изначально 500 КБ, сохранится на 140 КБ. Лучше всего то, что разница практически незаметна для глаз. Он сохраняет изображение с разрешением 72 пикселя на дюйм, поэтому размер файла меньше. Дополнительным бонусом является то, что любой, кто попытается распечатать этот файл, найдет его пиксельным и низкого качества! Вы можете найти этот параметр, перейдя в « Файл> Сохранить для Интернета… ».

Вы увидите такое окно, но, надеюсь, с другим изображением !:

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

Последние мысли

Помните, что теперь ваши изображения отлично смотрятся в Интернете, люди с большей вероятностью захотят их использовать.Хотя нарушение авторских прав является незаконным, оно все же имеет место. Наиболее распространенное средство устрашения — нанесение водяных знаков на изображения. Если вы не знаете, как это сделать, ознакомьтесь с нашим руководством « Как нанести водяной знак на изображение ».

Как подготовить фотографии для вашего веб-сайта

Проблема

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

Решение

Темы для фотографий

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

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

1. Всегда оптимизируйте фотографии с помощью программы пакетного преобразования или редактирования изображений, такой как Photoshop или Lightroom, прежде чем размещать их в Интернете.Оптимизация может быть такой же простой, как изменение размера фотографии до не более 2000 пикселей по самой длинной стороне и сохранение ее в виде копии с оптимизированной для веб-технологий степенью сжатия (обычно «8» в Photoshop или 80% -ное сжатие).
2. Отредактируйте информацию об изображении в программе для редактирования фотографий, чтобы при необходимости добавить информацию об авторе, местонахождении и авторских правах.
3. Никогда не удаляйте преднамеренно данные exif со своих фотографий. Сохраняя EXIF ​​в неизменном виде, вы помогаете начинающим фотографам развивать свои навыки, а также повышать свой профессионализм.
4. Всегда сохраняйте или конвертируйте фотографии в формат jpg и сохраняйте их, используя расширение в нижнем регистре.
5. Дайте вашим фотографиям семантические имена файлов. Например, файл horse-on-mountain_john-smith.jpg имеет гораздо большую ценность для SEO, чем IMG435657.jpg. Семантические имена файлов помогут вам легче находить фотографии с помощью функции поиска в библиотеке мультимедиа, а также упростят обслуживание файлов на вашем компьютере.
6. Загрузите изображения прямо в альбомы / сообщения, которым они принадлежат, и заполните «Заголовок», «Замещающий текст» и «Описание».Эти значения не только улучшают внешний вид ваших фотографий при просмотре в лайтбоксах или плагинах браузера, но и помогают в SEO и доступности.
7. Используйте плагин Regenerate Thumbnails для оптимизации изображений, которые уже существуют в вашей библиотеке мультимедиа, при установке новой темы.

Темы для электронной коммерции

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

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

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

1. Убедитесь, что объект, модель или важные элементы продукта расположены по центру фотографии, с достаточным пространством по краям.Это гарантирует, что продукт всегда будет хорошо представлен в любой ориентации, кадрировании или размере фотографии.
2. Если вы делаете снимки своей одежды, не используйте необычные фильтры, не позволяйте моделям скрещивать руки или скрывать части предмета, поскольку это может привести к искажению цвета, посадки или деталей, что расстроит ваших клиентов. Если вы используете редакционные снимки с фильтрами в качестве избранных изображений по эстетическим соображениям, всегда включайте хотя бы одно четкое изображение элемента в вашу галерею продуктов с нейтральным балансом белого и без фильтра.
3. Используйте плагин Regenerate Thumbnails для оптимизации изображений, которые уже существуют в вашей медиатеке, при установке новой темы или если вы изменили настройки размера изображения WooCommerce.
4. Всегда оптимизируйте фотографии с помощью программы пакетного преобразования или редактирования изображений, такой как Photoshop или Gimp (бесплатное приложение), прежде чем размещать их в Интернете. Оптимизация может быть такой же простой, как изменение размера фотографии до не более 1000 пикселей по самой длинной стороне (или 1920 пикселей для фона слайдера) и сохранение ее в виде копии с оптимизированной для веб-технологий степенью сжатия (обычно «8» в Photoshop или 80 % сжатия).
5. Дайте вашим фотографиям семантические имена файлов. Например, silk-stripe-jumper_SS2014.jpg имеет гораздо большую ценность для SEO, чем IMG435657.jpg. Семантические имена файлов помогут вам легче находить фотографии с помощью функции поиска в библиотеке мультимедиа, а также упростят обслуживание файлов на вашем компьютере.
6. Загрузите изображения непосредственно в галереи продуктов, которым они принадлежат, и заполните поля «Заголовок», «Альтернативный текст» и «Описание». Эти значения не только улучшают внешний вид ваших фотографий при просмотре в лайтбоксах или плагинах браузера, но и помогают в SEO и доступности.

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

Как подготовить изображения для использования в Интернете — BatchPhoto

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

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

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

Уменьшить размер файла изображения

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

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

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

Автоматическая обрезка фотографий

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

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

• Автоматическая обрезка . Эта функция позволяет автоматически обрезать изображения до предопределенного соотношения сторон, такого как 16: 9, 4: 3 или, возможно, 1: 1, или до другого соотношения сторон, определенного вами лично.
• Урожай . Эта функция позволяет вам вручную вырезать ненужные элементы из изображений.Вы можете легко сделать это с помощью перетаскивания или ввода новых координат в пикселях или процентах.

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

Защитите свои изображения от несанкционированного использования

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

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

Преобразовать в подходящий формат файла

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

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

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

Если вам нужно преобразовать изображения из одного формата в другой, BatchPhoto поможет вам сделать это как можно быстрее.Инструмент обеспечивает поддержку более 170 форматов изображений. К ним относятся популярные, такие как JPEG, PNG, TIFF, GIF или BMP, а также файлы RAW практически со всех цифровых камер.

Переименование изображений для повышения SEO

Это один из аспектов, который может быть действительно полезным, но, к сожалению, им часто пренебрегают. Присвоение вашим фотографиям собственного имени, например заголовка сообщения в блоге, названия продукта или чего-то еще значимого вместо «DSC04321.jpg», может помочь вам не только лучше управлять своими файлами, но и улучшить SEO.

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

Вы можете использовать BatchPhoto для эффективного изменения имен ваших файлов.Приложение предназначено для одновременного переименования нескольких фотографий без потери качества. Вы можете переименовывать изображения тремя способами: используя собственный текст, имя папки или дату фотографии. Когда вы закончите процесс редактирования, инструмент позволяет вам сохранить новые изображения на вашем ПК или Mac или напрямую загрузить их на FTP-сервер, в Facebook или Flickr.

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

Picture perfect: руководство по подготовке изображений для веб-сайтов.

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

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

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

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

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

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

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

1. Понять влияние размера изображения.

Размер изображения имеет большое влияние на производительность сайта. Согласно статистике, собранной HTTP Archive , , общий размер файлов ресурсов на средней веб-странице превышает 2 МБ. Из них изображения занимают 62%. Это огромный. Поэтому стоит убедиться, что они оптимизированы и работают на вашу пользу. Потому что в противном случае это может сильно раздражать.

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

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

Теперь посмотрите, насколько быстрее и плавнее загружаются изображения подходящего размера, снова нажав «добавить десять изображений». Разве вам не кажется, что эти изображения загружаются быстрее и без усилий? Намного меньше разочарований; гораздо больше удовлетворения как пользователь.

Вот почему.

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

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

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

Возьмем для примера: изображение размером 1200 пикселей в ширину на 800 пикселей в высоту имеет в общей сложности 960 000 пикселей. Если он отображается в браузере с шириной 200 пикселей на высоту 133 пикселей, пользователь видит только 26 600 пикселей.Браузеру все равно потребуется время, чтобы загрузить оставшиеся 933 400 пикселей объекта изображения, даже если пользователь не увидит его в этих размерах.

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

2. Найдите идеальную ширину x высоту.

MeasureIt — отличное приложение для браузера Firefox и Chrome, которое позволяет вам измерять ширину и высоту в пикселях в вашем браузере.Это поможет вам определить размеры пикселей, под которые вы будете оптимизировать изображения позже.

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

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

3. Подготовьте изображения нужной ширины и высоты.

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

Откройте изображение в PhotoShop и обрежьте и / или измените его размер до необходимой ширины и высоты. Если у вас нет доступа к PhotoShop или вы не знакомы с его использованием, я бы порекомендовал pixlr editor . Это простое веб-приложение, которое поможет вам изменить размер изображений.Вот как.

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

Затем добавьте исходное изображение на холст.Вам нужно добавить его как слой, поэтому нажмите «Слой> Открыть изображение как слой» в верхнем меню. Ваше «изображение холста» — это, по сути, фон, который позволяет вам загружать и управлять другими изображениями (например, вашим исходным изображением) на нем.

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

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

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

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

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

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

4. Используйте «сжатие с потерями» для дополнительного улучшения оптимизации.

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

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

Чтобы создать файл изображения, сжатый с потерями, загрузите изображение на Compressor.io и следуйте инструкциям.

****

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

Вот краткое описание того, почему:

1. Создайте визуальный интерес на своей странице. Помните, мы говорили, что мозг обрабатывает изображения быстрее, чем текст? Что ж, графический контент, вероятно, увеличит вовлеченность на вашем веб-сайте и создаст больше репостов в социальных сетях (на самом деле, из 30 000 страниц брендов, проанализированных за последнее время, статистика показывает, что на графический контент приходится колоссальные 87% взаимодействий).
2. Ваша страница будет загружаться намного быстрее и будет восприниматься как загружающаяся быстрее. Счастливых вам, счастливых клиентов, счастливых Google.
3. Довольные клиенты с большей вероятностью будут оставаться на вашем сайте дольше, что открывает потенциал для более активного взаимодействия и повышения эффективности.

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

Вы нашли эту статью полезной? Я хотел бы услышать твои мысли. Позвольте мне знать в комментариях ниже.

Как подготовить фото к публикации в Интернете

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

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

Ольга Хоффман — мама и профессиональный фотограф с более чем 10-летним опытом работы с клиентами, включая Elle и Marie Claire. В этой заключительной статье из своей серии из трех частей для нас она показывает вам, как подготовить ваши фотографии к публикации в Интернете, выполнив несколько простых шагов с помощью бесплатного онлайн-инструмента.

Все фотографии необходимо настроить перед публикацией в Интернете

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

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

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

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

Разрешение изображения

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

Каждое цифровое изображение создается с помощью точек / пикселей. Разрешение относится к количеству пикселей на изображении. Он измеряется в PPI (пикселей на дюйм), также известном как DPI (точек на дюйм).

Чем больше пикселей в изображении, тем лучше оно будет.300 точек на дюйм достаточно для печати, а 72-96 точек на дюйм для онлайн-дисплея.

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

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

Выбор правильного формата изображения

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

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

Ретушь фотографий

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

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

• Контраст.
• Коррекция экспозиции.
• Обрезка.
• (И иногда немного аэрографии.)

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

Как обрезать и изменить композицию

Инструмент кадрирования

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

Как улучшить экспозицию и контраст

С помощью инструментов Pixlr LEVEL или CURVE вы можете сделать изображение ярче или темнее, а также улучшить контраст. Вы можете найти оба инструмента на верхней панели навигации в разделе НАСТРОЙКА.

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

УРОВНИ — отрегулируйте тени, блики, средние тона и контраст вашего изображения, перемещая ползунки уровня, как указано выше. Вы можете увидеть, как это меняет внешний вид вашего изображения ниже.

Как удалить пятна с фотографий

Вы можете использовать инструмент SPOT HEAL TOOL от Pixlr для удаления пятен с лиц на фотографиях. Просто нарисуйте пятна, и они должны исчезнуть. (Вы найдете этот инструмент на панели инструментов слева.)

Как изменить разрешение изображения

Онлайн-редактор изображений

Pixlr также автоматически изменяет разрешение изображения на 72DPI, если вы сохраняете изображение в формате JPG, поэтому вам не о чем беспокоиться.

Хотите больше советов по профессиональной фотографии?

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

Оптимизация изображения: 10 советов, которые нужно знать

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

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


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

Вы когда-нибудь ломали голову над следующими вопросами?

• Почему, когда я выполняю поиск изображений в Google, фотографии моих продуктов никогда не появляются?
• Нужно ли добавлять атрибуты alt к моим изображениям?
• В чем разница между JPEG, GIF и PNG? Когда я должен использовать одно вместо другого?

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

Вот как оптимизировать изображения для Интернета:

1. Назовите изображения описательно и простым языком.
2. Тщательно оптимизируйте атрибуты alt.
3. Разумно выбирайте размеры изображения и ракурсы.
4. Уменьшите размер файла ваших изображений.
5. Выберите правильный тип файла.
6. Оптимизируйте свои эскизы.
7. Используйте файлы Sitemap для изображений.
8. Остерегайтесь декоративных изображений.
9. Будьте осторожны при использовании сетей доставки контента (CDN).
10. Проверьте свои изображения.

1. Назовите изображения описательно и простым языком

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

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

Возьмем, к примеру, это изображение.

Вы можете использовать общее имя, присвоенное вашей камерой изображению (например, DCMIMAGE10.jpg). Однако было бы гораздо лучше назвать файл 2012-Ford-Mustang-LX-Red.jpg.

Подумайте о том, как ваши клиенты ищут товары на вашем веб-сайте. Какие шаблоны именования они используют при поиске? В приведенном выше примере покупатели автомобилей могут искать такие запросы, как:

• 2012 Красный Ford Mustang LX
• Ford Mustang LX Красный 2012
• Красный Ford Mustang LX 2012

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

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

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

Курс Shopify Academy: SEO для начинающих

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

Запишитесь бесплатно

2. Тщательно оптимизируйте атрибуты alt

Атрибуты Alt — это текстовая альтернатива изображениям, когда браузер не может их правильно отобразить. Они также используются для веб-доступности. Даже когда изображение отображается, если вы наведете на него курсор, вы увидите текст атрибута alt (в зависимости от настроек вашего браузера).

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

Давайте посмотрим на исходный код атрибута alt.

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

Вот несколько простых правил для атрибутов alt:

• Опишите ваши изображения простым языком, точно так же, как вы делали это с именами файлов изображений.
• Если вы продаете продукты с номерами моделей или серийными номерами, используйте их в своих атрибутах alt.
• Не заполняйте атрибуты alt ключевыми словами (например, alt = «ford mustang muscle car buy now cheap best price on sale»).
• Не используйте атрибуты alt для декоративных изображений. Поисковые системы могут наказать вас за чрезмерную оптимизацию.

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

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

Это обычная практика, когда ваш продукт демонстрируется под разными углами. Возвращаясь к примеру Ford Mustang, вы не захотите показывать только один снимок автомобиля, особенно если вы пытаетесь его продать. Было бы в ваших интересах показать снимки:

• Интерьер.
• Задний, особенно воздушный спойлер.
• Диски.
• Двигатель … все-таки Мустанг .

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

• 2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg -> используя атрибут alt: alt = «2012 Ford Mustang LX Red Leather Interior Trim»
• 2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg -> используя атрибут alt для: alt = «Ford Mustang LX 2012 года, красный воздушный спойлер заднего вида»

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

Предупреждение при увеличении изображений

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

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

Вместо этого уменьшите изображение и предоставьте возможность просматривать увеличенное изображение во всплывающем окне или на отдельной веб-странице. Совет : узнайте, как увеличить изображения продуктов в вашей теме с помощью jQuery image zoom.

4. Уменьшите размер файлов изображений

Рассмотрим это:

Итак, если у вас есть изображения, которые медленно «текут» по экрану и загружаются более 15 секунд? Что ж, вы можете поцеловать этого потенциального клиента на прощание!

Итак, что вы можете сделать?

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

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

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

• Качество: Найдите это в правом верхнем углу (т.е. 70).
• Формат файла: Найдите это в правом верхнем углу (например, JPEG).
• Оптимизация: Найдите этот флажок в правом верхнем углу (т.е. Оптимизировано).
• Цвет: Найдите этот флажок в правом верхнем углу (т.е. преобразовать в sRBG).
• Уменьшение размера и заточка: Найдите это в правом нижнем углу (т.е.е. W: и H :).
• Ожидаемый размер файла: Найдите это в нижнем левом углу (т. Е. 136,7 КБ).

Вы также можете выбрать вариант «Экспортировать как».

Как оптимизировать изображения без Photoshop

Если у вас нет Adobe Photoshop, вы можете использовать множество онлайн-инструментов для редактирования изображений. У Adobe даже есть бесплатное приложение для редактирования изображений для смартфонов и планшетов Photoshop Express. Этот инструмент не обладает всеми возможностями настольной версии Adobe Photoshop, но он охватывает все основы редактирования изображений и не требует затрат руки и ноги.

Другие впечатляющие онлайн-инструменты для редактирования изображений:

• Эксперты описали PicMonkey как «потрясающе отличный инструмент для редактирования фотографий».
• PIXLR очень удобен в использовании и поставляется со 100% бесплатным приложением для вашего смартфона, так что вы можете редактировать на ходу.
• Canva — еще один довольно продвинутый онлайн-редактор изображений.

Наконец, всегда есть GIMP. GIMP — это бесплатное приложение для редактирования изображений с открытым исходным кодом, которое можно запустить в Windows, Mac или Linux.Он может делать все, что умеет Photoshop, но имеет тенденцию быть немного более неуклюжим. Но для бесплатного приложения для редактирования изображений вы не сможете его превзойти.

Насколько большими должны быть файлы изображений?

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

5. Выберите правильный тип файла

Существует три распространенных типа файлов, которые используются для публикации изображений в Интернете: JPEG, GIF и PNG.

Давайте посмотрим на три типа файлов и их влияние на одно и то же изображение:

Изображения

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

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

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

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

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

Обратите внимание, что изображение PNG-24 более чем в три раза больше по размеру файла, чем PNG-8. Вот почему с PNG нужно быть очень осторожным.

Вот крайний пример, где размер файла изображения был постоянным и составлял 24 КБ для всех трех типов файлов:

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

Вот несколько советов, которые следует помнить при выборе типов файлов:

• В большинстве случаев в электронной торговле лучше всего подойдут файлы в формате JPEG. Они обеспечивают наилучшее качество при минимальном размере файла.
• Никогда не используйте GIF-файлы для изображений товаров большого размера. Размер файла будет очень большим, и нет хорошего способа его уменьшить. Используйте GIF-файлы только для миниатюр и декоративных изображений.
• PNG могут быть хорошей альтернативой как JPEG, так и GIF.Если вы можете получить фотографии продуктов только в формате PNG, попробуйте использовать PNG-8 вместо PNG-24. PNG превосходны как простые декоративные изображения из-за их чрезвычайно маленького размера файла.

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

6. Оптимизируйте свои эскизы

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

Миниатюры — это здорово, но будьте осторожны; они могут быть тихими убийцами.Жертва? Скорость загрузки вашей страницы. Миниатюры обычно отображаются в критических точках в процессе покупки. Если они мешают быстрой загрузке страниц вашей категории, вы можете потерять потенциального клиента. (Примечание: продавцам Shopify не нужно беспокоиться об оптимизации миниатюр, мы позаботимся об этом за вас.)

Итак, что вы можете сделать?

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

7. Используйте файлы Sitemap для изображений

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

Поисковые роботы

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

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

Карта сайта: http://example.com/sitemap_location.xml

Или вы можете отправить карту сайта в Google с помощью Search Console.

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

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

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

8. Остерегайтесь декоративных изображений

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

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

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

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

• Для изображений, образующих границы или простые узоры, сделайте их PNG-8 или GIF. Вы можете создавать красивые изображения размером всего несколько сотен байт.
• Если возможно, используйте CSS для создания цветных областей вместо изображений. По возможности используйте стили CSS для замены любых декоративных изображений.
• Внимательно посмотрите на это большое фоновое изображение в стиле обоев. Это могут быть огромные файлы. Уменьшите их как можно больше, не ухудшая качества изображения.

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

9. Будьте осторожны при использовании сетей доставки контента (CDN)

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

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

Размещая изображения в CDN, вы, скорее всего, удаляете изображение из своего домена и размещаете его в домене CDN. Поэтому, когда кто-то ссылается на ваше изображение, он фактически ссылается на домен CDN.

Таким образом, лучшие практики:

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

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

10. Проверьте свои изображения

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

• Проверьте количество изображений продуктов на странице: Поскольку время загрузки является проблемой для некоторых сайтов электронной коммерции, не размещенных на хостинге, вы можете обнаружить, что уменьшение количества изображений на странице увеличит рейтинг кликов и продажи.Также возможно, что размещение большого количества изображений на странице улучшит пользовательский интерфейс и приведет к увеличению продаж. Единственный способ узнать это — протестировать.
• Проверьте, какие углы предпочитают ваши клиенты: Вы можете увидеть рост лояльности клиентов, предоставив просмотры, которые хотят видеть ваши клиенты. Отличный способ понять это — опросить своих клиентов о том, что им больше всего понравилось при просмотре снимков вашего продукта. Опрашивать своих клиентов и разговаривать с ними — это вообще отличная привычка.Тем не менее, проверьте путем тестирования.
• Проверьте, сколько товарных позиций у вас должно быть на страницах категорий: 10, 20, 100 товаров? Проверьте количество продуктов, которые вы указываете на страницах категорий, чтобы увидеть, что лучше всего подходит для ваших клиентов.

Сохранение красивых фотографий функционально

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

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

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

---

Еще не создали свой магазин?

Нет проблем. Начните бесплатную 14-дневную пробную версию Shopify — кредитная карта не требуется!

.