Оптимизация картинок

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

статье. Сегодня наша тема оптимизация картинок в фотошоп.

Откроем фотографию в программе фотошоп и нажмем сочетание "горячих клавиш" CTRL + ALT + I .

 

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

Поменяем один из размеров. Второй поменяется сам, если стоит галочка "сохранять пропорции".

Как правило, для интернета, в том числе для сайта, размера 800 пикселей по длинной стороне, достаточно.

Для небольшой заглавной иллюстрации хватит 300 пикселей.

Для миниатюры — 150 — 200 пикс.

Размер моего скрина выше 500 на 400 пикселей.

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

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

Посмотрим  на скрин, вес фотографии снизился до 1,37 мегабайт. Ощутимо, но это все равно много. 

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

Нужно ее восстановить. Идем в ФИЛЬТРЫ — УСИЛЕНИЕ РЕЗКОСТИ — КОНТУРНАЯ РЕЗКОСТЬ.

При использовании этого фильтра нужно быть осторожным, что бы не перешарпить изображение. Увеличьте картинку и наблюдайте, как изменяется ее вид, при движении ползунков. Я придерживаюсь нехитрого правила: если размер по длинной стороне 800 — 1000 пикселей, то ставлю радиус 0,5 , а воздействие от 50 до 100%. Если размер фото 2000, то радиус чуть больше: 0,8-1, воздействие 100 — 150. Ну а там нужно смотреть, на изменения.

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

Кстати, если вы уменьшаете фотографию от 5000 до 800 пикс, то лучше это делать в 2 этапа: в начале до 2000, потом повысить резкость, и снова уменьшить уже до основного размера. Существуют много алгоритмов, как уменьшить размер фото, не потеряв качества. Я их не рассматриваю в этой статье, т.к. это касается сложных, красивых, пейзажей или портретов, которые на сайте (если только это не сайт фотографа), обычно не размещаются.

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

 Нам осталось только правильно сохранить. Можно сделать через СОХРАНИТЬ КАК, но для публикации лучше сохранять ДЛЯ WEB И УСТРОЙСТВ.

Идем в ФАЙЛ — сохранить ДЛЯ WEB И УСТРОЙСТВ. Комбинация "горячих клавиш" указана на скрине.

Выпадает вот такое окошко с настройками. Рассмотрим более подробно, что тут и как.

1- в этой вкладке можно посмотреть разные варианты: исходное фото, оптимизированное, можно сравнить 2 или 4 варианта.

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

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

4 — показывается размер картинки. 

5 — окончательные параметры. Обратите внимание, что мое оптимизированное фото теперь весит всего 200 килобайт, против 1, 37 мегабайт, да еще с увеличенной резкостью. Уменьшение очень значительное. 

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

Итак, сегодня я рассказала, как делается оптимизация картинок в программе фотошоп.

На сегодня все. 

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

Если хотите узнавать новости сайта сразу, подпишитесь на обновления.

Интересное по теме:

Метки . Закладка постоянная ссылка.

44 Responses to Оптимизация картинок

  1. Огромное спасибо! Я очень ждала эту статью. Кое что делала, кое что — нет…
    Беру в закладки. И играю кнопочками.

  2. Сергей говорит:

    Полезные советы! Для своего блога я обычно делаю картинки разрешением не более 500 на 400 пикселей (а чаще всего меньше).

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

  4. Наталья Боярко говорит:

    Александр, попробуйте сравнить картинки оптимизированные фотошоп и Офис. У меня стоит другая программа: Open Office. Сравните вес и качество, выбирите то, что Вам больше понравится.

  5. Возможно, я не совсем поняла, Наталья. Ссылка у меня есть только на картинке с конкурсом.
    А здесь она разве есть?http://photoshop-i-ya.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif

  6. Светлана говорит:

    Полезная статья, буду учиться делать уникальные картинки.Спасибо!

  7. Jonny_30 (Евгений) говорит:

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

  8. Лара говорит:

    А я фотки сразу подготавливаю размером 500 на 330 и уменьшаю вес в FastStone Там вообще все сразу и размер устанавливаю и вес. Качество не очень портится, а вот в Майкрософте было плохо.

    • Наталья Боярко говорит:

      Ларис, мне кажется для кулинарного сайта 500 многовато будет- это размер на всю ширину страницы. Есть смысл так делать, если в одной картинке будет находиться несколько фото разных этапов. Кстати, вес одной картинки, состоящей из нескольких фотографий большего размера (например 1000 пкс), будет меньше чем сумма этих же картинок, но меньшего размера (примерно 400 пкс). Это если 4-5 штук к примеру.

  9. Екатерина говорит:

    Картинки всегда уменьшаю до 800х600 пикселей, добавляю резкости и цветности (иногда), но вечно делаю это в разных программах: что в Пеинте, что в онлайн-редакторах, надо прикрывать лавочку и переходить полностью на Фотошоп)))

    • Наталья Боярко говорит:

      ФШ универсален. Думаю, если есть желание и возможность, то нужно переходить. Очень удобно работать. Ну и если сложности будут, добро пожаловать на сайт.

  10. Александр говорит:

    Я бы все-таки посоветоввал для уменьшения размера использовать команду Файл — Автоматизация — Размерность…

    В обоих окнах ставим одну и ту же цифру, которую мы хотим видеть по длинной стороне и поставить галочку «Не увеличивать» — эта команда более пропорционально уменьшает!

    НУ я именно этим пользуюсь!

    • Наталья Боярко говорит:

      Александр, у меня автоматика никакая не работает. Я все делаю вручную. Те программы, которые я скачивала по твоим ссылкам, в том числе и шестой ФШ, у меня не работают корректно. Пришлось снова вернуться к своему.

      • Александр говорит:

        Да не…Это в любом ФШ есть..Ты просто зайди в файл — Автоматизация — размерность…Это аналог Изображение — Размер изображения…

        Просто через размерность он уменьшает более качественно!

  11. Юрий говорит:

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

  12. Наталья говорит:

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

  13. Анна говорит:

    Я в Поинте уменьшаю размер, подходящий к одному из моих сайтов и все. Больше никак не Оптимизирую. Но надо бы. Как же мне добраться то до изучения фотошоп?

  14. Наталья говорит:

    С оптимизацией картинок я вроде разобралась, правда оптимизирую их не в фотошопе, а FastStone Image Viewer .

  15. Все-таки сложная для меня штука фотошоп. Облегчаю вес обычно в Капчуре, хотя там с эффектами не поиграешься…
    А осваивать фотошоп — жалко времени… Всё равно не буду пользоваться так, чтоб окупить временнЫе затраты…

    • Наталья Боярко говорит:

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

  16. Сергей говорит:

    Я у себя jpeg сжимаю программой ACDSee, а png сервисом TinyPNG. В основном jpeg использую изображений с большой графикой. А png для скришотов программ. Вес фото стараюсь улаживаться примерно в 10 — 20 kb, чтобы не страдала скорость загрузки сайта. Также в большинстве изображений уменьшаю немножко масштаб и использую кадрирование. Это намного помогает уменьшить размер изображения и не сильно потерять качество.

    • Наталья Боярко говорит:

      Сергей, а для чего скриншоты в png? Он же гораздо больше места занимает. Я понимаю, если бы вырезанные картинки.

      • Сергей говорит:

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

      • Наталья Боярко говорит:

        Сергей, а если сжать в PNG, а потом перевести в JPEG? Я для меньшей потери качества просто перевожу перед уменьшением размера в смарт-объект. Это вектор. Там свои законы сжатия. А потом можно снова его растрировать. И в конце «шарплю»- несколько увеличиваю контурную резкость. Тогда подписи страдают меньше

      • Сергей говорит:

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

  17. Княгиня говорит:

    Я после фотошопа ещё дочищаю фотки маленькой программой JPEG Cleaner. Она уменьшает вес, вычищая какую-то служебную информацию. Правда, из уже оптимизированных фотошопом с качеством medium вычищается всего по 35 байт, стабильно. 🙂 Но если их много, да ещё это не фотки, а элементы дизайна, то и 35 байт не помешает. Но это только для jpg, а вообще я для каждой детали выбираю лучший формат; часто png-8 весит меньше, что jpg.

  18. Алексей говорит:

    Для интернета сжимаю в Office picture manager. Быстро грузится и без особых примудростей, точнее фотошоп лень загружать для таких дел. Однако, если надо сжать без потери качества (ну почти без потери), то лучше Adobe…

  19. Denis говорит:

    Отличная информация. Без оптемизации просто нельзя считаю тоже что она нужна.

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

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