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

Объявления:

Мои услуги:

Сайт дня (как попасть): Контент-поддержка для людей. Для серьезных людей

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

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

Рекомендую смотреть видеоурок в полноэкранном режиме. Это можно сделать нажатием на иконку Fullscreen Toggle:

Fullscreen Toggle

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

Для своего блога я пришел к выводу, что изображения в постах должны быть шириной в 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 ленту без плагинов

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

Похожие материалы:

Буду благодарен, если поделитесь этой статьей:

Приглашаю присоединиться ко мне в следующих сервисах:

Мои группы:

↑ Как поставить такие же кнопки на свой сайт ↑

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

Дата публикации: 8 апреля 2010 года в категории Интересное. Теги: видеоуроки, Полезные программы, полезные сервисы . Вы можете следить за комментариями к этому материалу с помощью RSS 2.0 фида. Комментирование и пинги запрещены.

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии Wordpress:

Комментариев: 14

1. dex 08 апреля 2010 в 10:03 pm

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

2. Librium 08 апреля 2010 в 10:40 pm

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

3. stilusmen 08 апреля 2010 в 11:30 pm

Как альтернативный способ рекомендую оптимизировать картинки с помощью программы Microsoft Office Picture Manadger. Все делается в два клика: "Изменить рисунки" (верхняя панель) и боковая справа "Изменение размера" а там уже или в процентном соотношении или в пиксельном под нужды.
Из плюсов этой программы: меньше нагрузка и ресурсо-прожорливость :). Скорость открытия/закрытия программы, минимальные настройки.

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

4. Глобатор 08 апреля 2010 в 11:42 pm

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

Librium, можно, но в Фотошопе больше возможностей.

5. Andrei 09 апреля 2010 в 1:30 am

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

6. Константин 09 апреля 2010 в 2:18 am

Как по мне то лучше чем Adobe Fireworks нет ничего краше. И вес меньше чем в Фотошопе, и качество лучше. На smashing magazine есть куча вменяемых статей.

7. hawot 09 апреля 2010 в 12:40 pm

Самое ценное в статье, это рекомендации автора о размере и разрешении фотографии.
Человек у которого стоит фотошоп поменяет размер и так. Человек несведущие навряд ли станет ставить фотошоп.

По своему опыту знаю, что проще научить таких использовать диспетчер рисунков из микрософт офиса (Microsoft Office Picture Manager) для измнения размеров и разрешения.

Хотя сам я предпочитаю фотошоп.

8. T.A.B. 09 апреля 2010 в 2:10 pm

Скажите, а какой программой вы записывали видео урок?

9. blueberry pie 09 апреля 2010 в 3:15 pm

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

10. Алексей Дамме 09 апреля 2010 в 3:44 pm

Всегда делал это в Paint, но там не увидишь размера изображения сразу. В Фотошопе гораздо удобнее. В общем полезное для меня видео. Спасибо!

11. Елена 09 апреля 2010 в 6:09 pm

Спасибо. Все просто и понятно, как всегда в Ваших постах!

12. Анатолий 10 апреля 2010 в 12:20 pm

Полезное видео! - Добавил в архив уроков prodaga.com/2406.htm
PS ссылка на сайт стоит к описанию урока и добавлена в раздел "Сайты авторов уроков"

13. adequat 19 апреля 2010 в 3:28 pm

В чем писали урок?

14. Яна 26 мая 2010 в 11:26 am

Если позволите, мнение чайника-пенсионерки, изучающей интернет-премудрости методом научного тыка, то : тем, кто не в состоянии освоить Фотошоп (как я) вполне понятен - Microsoft Office Picture Manager, а самый любимый, простой и включающий полный набор элементарных функций - Пикаса от Гугль. Жаль что вы про эту такую умненькую и добрую программу ничего не пишите. Запишу себе на бумажке размеры - это мне пригодится в следующей же статье: люблю я картинки вставлять в посты, это же самое привлекающее взгляд и притягивающее внимание читателей. А потом, только добавляй умные мысли!