Сайт дня (как попасть): Контент-поддержка для людей. Для серьезных людей
Дорогие друзья, предлагаю вашему вниманию свой очередной видеоурок Photoshop, в котором я покажу самую простую схему оптимизации изображений для сайтов и блогов, которую постоянно использую для Shakin.ru.
Существует много более сложных вариантов, но они нас сегодня не интересуют. Схема проста, понятна и эффективна, как я люблю 🙂 .
Рекомендую смотреть видеоурок в полноэкранном режиме. Это можно сделать нажатием на иконку Fullscreen Toggle:
Я убежден, что если Ваш ресурс не фотоблог и не ресурс, на котором должны быть изображения высокого качества, то можно и нужно картинки оптимизировать. Это позволит при большой посещаемости не только уменьшить нагрузку на хостинг, но и сделает загрузку страниц Вашего сайта более быстрой. Причем визуально оптимизированные изображения будут мало чем отличаться от оригиналов.
🔥 Кстати! Я провожу платный курс по продвижению англоязычных сайтов SEO Шаолинь seoshaolin.com. Для читателей блога я делаю хорошую скидку. По прокомоду "блог" тариф Про стоит не 50, а 40 тыс. рублей. Тариф Лайт не 25, а 20 тыс. рублей. Тариф Команда не 75, а 60 тыс. рублей. Пишите мне в Telegram @mikeshakin.Для своего блога я пришел к выводу, что изображения в постах должны быть шириной в 450 пикселей и иметь размер не более 40 Kb. Если изображение вытянуто в высоту, то делаю его ширину 350 пикселей.
Разрешение у оптимизированных картинок стандартное для интернета - 72 пикселя на дюйм. При сохранении для веба оно автоматически устанавливается на 72 пикселя на дюйм.
Приведу английские команды из видеоурока и их русскоязычные аналоги, чтобы вы могли все проделать в любой версии Фотошопа.
File-Open (Файл-Открыть)
Image-Image Size (Изображение-Размер изображения)
Image-Adjustments-Auto Color (Изображение-Настройки-Авто цвет)
Image-Adjustments-Auto Curves (Изображение-Настройки-Авто кривые)
File-Save for Web & Devices (Файл-Сохранить для веба)
Примечание - существует несколько версий русификации Фотошопа, и варианты перевода могут не совпадать.
Кстати, недавно нашел очень полезный онлайн сервис, который очень похож на Photoshop - Pixlr.com. Он бесплатен, прост и можно переключиться на русский язык интерфейса. Если под рукой нет Фотошопа - всегда можете на него зайти и оптимизировать нужные изображения, а также проделать другие манипуляции с картинками.
Желаю вам успехов в оптимизации изображений! Если есть желание научиться обработке фотографий и фотомонтажу, я буду рад вас видеть на своем сайте по урокам Photoshop!
Постовой (как попасть + обмен ссылками): Качественное продвижение сайта профессионалами.
Webmasters.ru - популярный SEO форум вебмастеров о заработке в интернете.
Перенаправление RSS ленты на прожженную FeedBurner ленту без плагинов
Десерт на сегодня - видео о забавном котенке. Не заулыбаться просто не получится!
Подпишитесь на рассылку блога с полезными материалами по SEO
Меня зовут Михаил Шакин, я автор этого блога, занимаюсь SEO с 2006 года. Вы можете заказать у меня
Спасибо. Такая оптимизация изображений пригодится не только для сайтов, но и для файлов на компьютере...
Для тех, кто не юзает фотошоп проще через стандартный paint в xp прогнать, изображение тоже будет очень мало весить 😉
Как альтернативный способ рекомендую оптимизировать картинки с помощью программы Microsoft Office Picture Manadger. Все делается в два клика: "Изменить рисунки" (верхняя панель) и боковая справа "Изменение размера" а там уже или в процентном соотношении или в пиксельном под нужды.
Из плюсов этой программы: меньше нагрузка и ресурсо-прожорливость :). Скорость открытия/закрытия программы, минимальные настройки.
В общем для ленивых, как я. Фотошоп конечно лучше 😉 и красивше
dex, на компьютере оптимизировать не имеет смысла, потом фотки будет не распечатать.
Librium, можно, но в Фотошопе больше возможностей.
Хороший совет , у меня стандарт де факто для пользователей , картинки только через Фотошоп. Но , ка ких заставить всегда делать , чтоб в вебе не появлялись фото в 2 Мб
Как по мне то лучше чем Adobe Fireworks нет ничего краше. И вес меньше чем в Фотошопе, и качество лучше. На smashing magazine есть куча вменяемых статей.
Самое ценное в статье, это рекомендации автора о размере и разрешении фотографии.
Человек у которого стоит фотошоп поменяет размер и так. Человек несведущие навряд ли станет ставить фотошоп.
По своему опыту знаю, что проще научить таких использовать диспетчер рисунков из микрософт офиса (Microsoft Office Picture Manager) для измнения размеров и разрешения.
Хотя сам я предпочитаю фотошоп.
Скажите, а какой программой вы записывали видео урок?
Михаил, спасибо за урок. Хотя сами параметры оптимизируемых фото, которые используете вы, были интереснее, чем метод их создания 🙂 (с ним-то все ясно)
Было бы здорово почитать урок по макросам - чтобы все перечисленные манипуляции не повторять каждый раз, а поставить на поток. Наверняка многие знают, что в фотошопе есть такая возможность, но разобраться что к чему руки не доходят...
Всегда делал это в Paint, но там не увидишь размера изображения сразу. В Фотошопе гораздо удобнее. В общем полезное для меня видео. Спасибо!
Спасибо. Все просто и понятно, как всегда в Ваших постах!
Полезное видео! - Добавил в архив уроков prodaga.com/2406.htm
PS ссылка на сайт стоит к описанию урока и добавлена в раздел "Сайты авторов уроков"
В чем писали урок?
Если позволите, мнение чайника-пенсионерки, изучающей интернет-премудрости методом научного тыка, то : тем, кто не в состоянии освоить Фотошоп (как я) вполне понятен - Microsoft Office Picture Manager, а самый любимый, простой и включающий полный набор элементарных функций - Пикаса от Гугль. Жаль что вы про эту такую умненькую и добрую программу ничего не пишите. Запишу себе на бумажке размеры - это мне пригодится в следующей же статье: люблю я картинки вставлять в посты, это же самое привлекающее взгляд и притягивающее внимание читателей. А потом, только добавляй умные мысли!