В прошлой статье мы подробно разобрались где брать изображения для статей. Неожиданно тема оказалась очень актуальной :). Сегодня продолжим разговор на тему картинок для блога.
После того как Вы нашли подходящее изображение для статьи, перед публикацией его необходимо подготовить.
Требования к изображению для статьи:
Размер изображения.
Соответствовать тому размеру в котором отображается на блоге. Например у Вас изображение 6000 пикселей по ширине, а на блоге оно отображается 588 пикселей. Значит до загрузки изображения на блог Вы должны его уменьшить до 588 пикселей.
Без лишних полей
Перед загрузкой необходимо обрезать лишнее или вырезать нужное.
Вес изображения
Перед использованием изображения его нужно оптимизировать. После этого оно весит меньше по килобайтам.
Название изображения
Используйте ключевое слово или фразу статьи. В названии могут быть латинские буквы и цифры. Избегайте кирилицы.
Формат изображения
В WordPress можно использовать изображения в формате jpeg, png или gif.
Ну что ж, задача ясна. Приступим к выполнению.
В этой статье мы рассмотрим:
- Как обрезать изображение
- Как уменьшить изображение
- Как оптимизировать изображения
- Как переименовать изображения
Для уменьшения, обрезания и вырезания и оптимизации обычно используют программу Photoshop. Но возможно не у каждого на компьютере установлена эта программа, тем более лицензионная. Поэтому в этой статье я покажу как уменьшить, обрезать изображение с помощью бесплатной онлайн программы Photoshop и как оптимизировать с помощью специальных бесплатных онлайн-сервисов.
Как обрезать изображение
Для этого мы воспользуемся программой http://pixlr.com/editor. Она бесплатная.
1. Зайдите в программу Pixlr.com и нажмите на «Загрузить изображение с компьютера»
2. Выберите изображение на компьютере для редактирования.
3. Выберите слева в панеле инструмент «Обрезка»
4. Наведите мышку на изображение слева вверху = Нажмите левую кнопку мыши и удерживайте = ведите мышку в правый нижний угол = отпустите, когда дойдете до нужного места.
На картинке появится сетка. Во всех углах сетки появятся голубые квадратики. С помощью них Вы можете отрегулировать область обрезания. Отодвигайте их вниз вверх для изменения области.
5. Кликните по любому значку или полю вне изображения
6. Во всплывшем окне нажмите «Ок»
Небольшая видеоинструкция:
Как уменьшить изображение
Предположим Вам нужно уменьшить то же изображения, что мы только что обрезали. Старайтесь уменьшить изображение до такого размера, как оно будет выглядеть на блоге. Например: максимальная ширина на блоге в шаблоне AB-Inspiration 588px. На странице без боковой колонки — 966px.
1. В Pixlr выберите в меню сверху «Изображение» — «Размер изображения»
2. Во всплывшем окне укажите желаемые размеры. Убедитесь, что стоит галочка «Сохранить пропорции»
3. Нажмите на кнопку «Да»
Как сохранить и переименовать изображение
После того, как Вы уменьшили и обрезали изображение его нужно переименовать и сохранить. В названии изображения используйте ключевое слово статьи. Используйте латинские буквы, вместо пробелов используйте тире либо слова слитно.
1. Выберите на верху в меню «Файл» — «Сохранить»
2. Выберите куда сохранять файл — «Мой компьютер»
3. В поле «Имя» впишите название файла
4. Выберите формат — JPEG или PNG (PNG — если Ваше изображение с прозрачным фоном)
5. Нажмите на кнопку «OK»
Как оптимизировать изображения
Для оптимизации изображения мы воспользуемся другими сервисами.
Например: https://www.iloveimg.com/ru/compress-image
В следующей статье мы разберем как правильно публиковать изображение, как пользоваться редактором WordPress и как правильно прописывать теги для изображения, чтобы оно участвовало в поиске по ключевым словам.
Если у Вас все еще остались вопросы по подготовке изображения, не стесняйтесь, задавайте в комментариях.
Создайте сайт с нами — легко и быстро!
С вопросами и за помощью обращайтесь в нашу службу поддержки 24/7
Нужен качественный хостинг для сайта на WordPress?
Рекомендую, проверенные годами, хостинг Timeweb:
а также, хостинг Beget:
Средняя оценка: 4.7 из 5
Зачем лишние программы на компе, тем более, что все это можно сделать двумя кликами в стандартной программе Менеджер рисунков из пакета Microsoft Office
Игорь, это не программы. Их не нужно устанавливать на компьютер. Это онлайн сервисы. Тем и удобны
И правда, когда только начинала, даже этого не знала. Очень полезная статья. Я использую программу Photoshop для работы с изображением, а вес уменьшаю в программе Riot. Что касается тегов, для меня новость, что прописывать их надо латиницей. Вот не даром говорят:»Век живи, век — учись. Спасибо, Анфиса. Ни разу не ушла с блога без какой-нибудь новой информации. Удачи Вам и Вашим читателям.
Я тоже пользуюсь Майкрософт Офис для «уникализации» изображения.
Недавно познакомилась с программой Pixlr.com — действительно очень полезня штука )
Замечательная программа, уже все проделала по шагам, на русском языке. все понятно, не то. что в фотошопе. Мне понравилось!
Спасибо, Анфиса! Жду анонс!
Очень полезная информация! Как уже говорили, для меня тоже открытие, что в названии надо использовать латиницу. Для создания изображений использую фотошоп, уже привыкла, даже нравится. Но, вот размерчик получается большой. Буду пользоваться программой для сжатия. Спасибо!
Марина, если Вы пользуетесь программой Photoshop, то можете сжимать прямо там. Когда изображение готово, нажмите в меню «Файл» — «Сохранить для Веб».
Ок, спасибо. Век живи — век учись. Фотошоп вещь такая, что даже разработчики всех функций не знают)))
Это точно
Латиницу обязательно!!! Кириллица может вызвать совершенно непредсказуемые ошибки. Например одноклассники очень чувствительны к кириллице. И если изображение которое Вы прикрепили к статье названо кириллицей, то никто не сможет поделиться Вашей статье в одноклассники. Есть еще масса ошибок, сейчас уже не вспомню
Анфиса! Я так рада, что снова много полезной информации по картинкам! У меня ещё вопрос — как сделать картинку на всю длину шапки. Ведь в основном все картинки небольшого размера. Как сделать меньше — я понимаю — обрезать. А как из маленькой (например, 160 на 160) картинки сделать длинную, чтобы вставить её в шапку?
Натали, это не очень хорошая идея :). Увеличить картинку можно (делаете то же самое, что и с уменьшением, только пиксели ставите больше), но качество у нее будет хуже. А если Вы к примеру из картинки 160px хотите сделать 960px, то качество будет очень плохим.
Поэтому изначально Вам нужно найти картинку большого размера и уже из нее сделать такой размер какой нужно.
Или еще можно увеличить холст. Тогда маленькая картинка (160 на 160) будет занимать какую-то часть большого изображения. Остальную часть изображения можно залить цветом или наложить другое изображение.
Вообще, если хотите более профессионально работать с изображениями, попробуйте набрать в google «как уменьшить изображение», «как увеличить изображение», «как наложить одно изображение на другое», «плавный переход от одного изображения в другое» и прочие. В интернет огромное количество бесплатных видеоуроков и инструкций по работе с изображениями.
Спасибо большое, Анфиса! Просто таких больших картинок (до длины шапки) я не встречала нигде. Они вообще есть где-то?
Конечно есть :). Для примера просто откройте Google images. Наберите ключевое слово. Отобразиться каталог картинок. Далее под полем поиска нажмите на кнопку «Инструменты поиска» — на выплывшей панеле нажмите на «Размер» — выберите нужный размер или задайте произвольный.
На всех фото стоках на платных и бесплатных всегда предлагается разные размеры изображение от маленьких до очень больших.
Спасибо большое! Посмотрю! Вот такая «простая» тема — а столько у меня вопросов…
Анфиса, я не совсем понимаю — зачем оптимизировать изображение, чтоб оно меньше весило?
Да, в этом и есть смысл оптимизации, чтобы изображение весило меньше по килобайтам. тяжелые изображения долго грузятся, а если скажем в ленте на главной странице у Вас все изображения очень большие, то и страница будет долго грузиться.
А до 15 килобайт — это нормально? или много?
Смотря какого размера изображение.Если вы оптимизировали и получили такой размер, то нормально.
Для сжатия вот этот сервис хорош:
Макс, спасибо! Хороший сервис — всё понятно и просто. Да ещё на русском. А то на smush у меня что-то не всегда получается.
Анфиса, хотела бы уточнить: 1. функция масштабировать в самом WordPress помогает ли уменьшить фото, так чтобы освободить место на сервере? Или изначальное большое изображение сохраняется в любом случае на сервере, а уменьшенное появляется в посте?
2. И правильно ли я понимаю, что оптимизация нужна для того, чтобы перевести фото jpg в png?
Анфиса, я сжала одно изображение — у меня получилось. А потом сколько ни пыталась сжать на сайте smush — там написано Smush.it did not find any saving of your image(s). Почему он не может найти?
Не могу сказать, что именно не так. попробуйте обновить страницу и еще раз загрузить изображение.