-Рубрики

 -Музыка

 -

Радио в блоге

[Этот ролик находится на заблокированном домене]
Добавить плеер себе
© Накукрыскин

 -Поиск по дневнику

Поиск сообщений в татьяна99

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 20.01.2012
Записей: 7009
Комментариев: 155
Написано: 7340


Без заголовка

Вторник, 17 Июня 2014 г. 01:22 + в цитатник
Цитата сообщения last_Alive Как уменьшить вес картинки без потери качества

1 (230x197, 28Kb)
Рассмотрим 3 способа уменьшения веса наших картинок. Данные способы подойдут и для простого пользователя, которому нужно уменьшить вес его картинок или их размер, чтобы закинуть на флешку с малым объемом памяти, и для владельца сайта, чтобы не занимать все место на хостинге только одними изображениями.

Но ориентир в этой статье больше на владельцев своих блогов, но всем остальным тоже подойдет.

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

Если дизайн профессиональный, то только шапка может весить в пределах 2-3 мегабайт. А если у посетителя скорость интернета 100 кб/сек?

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

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

• С помощью Adobe Photoshop
• С помощью программ для создания скриншотов
• Сервисы для оптимизации изображений


Как уменьшить вес картинки максимально эффективно?

1. Использование Adobe Photoshop

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

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

Изначально моя картинка весит 113 кб

2 (615x442, 58Kb)



Открыть данное изображение в фотошопе.

3 (290x209, 19Kb)


Сохраним в формате .jpg. Сделать это просто. В самом фотошопе нажмем на пункт «Файл» и «Сохранить как»

4 (403x398, 68Kb)


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

5 (606x685, 159Kb)


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

6 (404x315, 47Kb)


При таком качестве - изменения незаметны. После всего этого изображение в весе значительно уменьшилось и стало весить 65.6 кб

7 (281x231, 24Kb)


Это первый момент изменения веса с помощью фотошопа, но мне больше нравится проверенный способ уменьшения веса — это сохранение изображения для WEB. Данная функция находится также в пункте «файл»:

8 (402x469, 78Kb)


В следующем окне выбираем качество нашего изображения (ставим 70) и ставим галочку в чекбоксе «Прогрессивный», затем сохраняем:

9 (600x430, 64Kb)


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

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

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

В фотошопе данная функция находится в пункте «Изображение» — «Размер изображения».

10 (396x440, 63Kb)


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

11 (509x379, 67Kb)


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

На этом все. Переходим ко второму пункту.

2. С помощью программ для создания скриншотов

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

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

12 (310x212, 24Kb)


И еще способ.

3. Сервисы для оптимизации изображений

Можете поискать в интернете такие сервисы. А я вам даю вот этот сервис — https://kraken.io (если не переходит по ссылке, то скопируйте ее и вставьте в адресную строку браузера)

Жмем на кнопку «Try Free Web Interface»

13 (608x337, 81Kb)


Далее нажимаем на оранжевую кнопку «Select files from disk» и выбираем наш файл:

14 (610x191, 30Kb)


(или же вместо оранжевой кнопки будет написано "Click to upload or drop your images here" - жмем и загружаем фото)

Как только выбрали наш файл - он сразу же оптимизируется, и ниже на этой же странице появится возможность получить уже готовое оптимизированное изображение. Жмем на кнопку «Download this file», нас перекинет на новую вкладку, откуда и сохраняем нашу картинку.

15 (435x187, 31Kb)


Таким образом уменьшена картинка еще на 2 килобайта.

В итоге, что у нас получилось?

Первоначальный вес 113 кб. Итоговый вес — 20.4 кб.

Неплохо. Конечно, если использовать эти 3 способа сразу на одном изображении, то потеря качества может быть значительной. Тут пользуйтесь чем вам удобнее. Но лично я отдаю предпочтение первому способу с помощью Adobe Photoshop.

Источник



last_Alive

----------------------
Расчет продвижения сайта! Взрыв продаж! Настроим Direct и Adwords. 50% оплаты после результата!
Рубрики:  программки/обучение
полезные ссылки
полезная информация

 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку