Общий форум для общения и обмена опытом

Поиск  Пользователи  Правила 
Закрыть
Логин:
Пароль:
Забыли свой пароль?
Авторизация
 
Страницы: 1
RSS
Оптимизация изображений
 
К сожалению, мало кто из современных сайтостроителей понимает, что изображения перед публикацией нужно оптимизировать по размеру файла.
Есть 2 направления:
1. Физическая оптимизация, т.е. уменьшение размера файлы с помощью графического редактора.
2. Логическая оптимизация.

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

Если про физическую оптимизацию народ немного понимает, то вот про логическую мало кто слышал. Вот о ней поговорим сегодня.
Главная идея логической оптимизации - сохранение файла в правильном формате (типе или расширение файла).
Основными графическими типами являются: jpg, png, gif, bmp, tiff.

Заметил, что наши девушки могут использовать все эти форматы, даже не вникая для чего какой формат предназначен.
TIFF - из перечисленного дает самый огромный файл по размеру. зато он позволяет сохранить все данные про изображение для последующей обработки.
BMP - размер файла тоже получается большого размера. Вникать не будем - просто не используйте. На сайтах этому формату (как и tiff) делать нечего.
Самые оптимальные типы для использования на сайтах jpg, png и gif.

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

Посмотрите ниже и откройте файлы.

Сначала идет 3 одинаковых изображения, где нанесены цветные линии и разноцветный текст. Посмотрите, что получается в зависимости от расширения (типа) файла, в котором сохранено. Все три изображения шириной: 600 пикс., высотой: 450 пикс.

Ниже еще трои варианта одной и той же фотографии, сохраненной в тех же форматах файлов, каждое фото шириной 400 пикс., высотой 300 пикс.
obrazech-01.jpg (57.09 КБ)
obrazech-02.gif (18.09 КБ)
obrazech-03.png (27.66 КБ)
teplohod-01.jpg (35.46 КБ)
teplohod-02.gif (82.58 КБ)
Есть еще порох в пороховицах!
 
Последнее изображение не поместилось, добавляю здесь
teplohod-03.png (215.02 КБ)
Есть еще порох в пороховицах!
 
Валерий, отлично написали! Я как-то не заморачивалась, главное чтобы фотка встала чёткая)))) А тут ещё и вес можно уменьшить, качество...
Я не зануда, просто любознательная :)
 
Ага, если сохранять изображение в правильном формате, то можно размер файла уменьшить, а качество значительно улучшить при меньшем размере файла. ;)
Есть еще порох в пороховицах!
 
А вот как быть с панорамами? Знакомый все просил на сайт себе панорамы города - я делал, посылал, а он все забраковывал - вроде я и фототехнику использовал не слабую, FujiFilm FinePix HS20EXR. Рад бы его спросить - но он дальше дизайнерам пересылал - им не нравилось. Какие то параметры есть у съемки панорам для сайтов? Тем более я не с целью заработка - по дружбе делал, материальная подоплека отвергается.
 
Ну, если не понравилось, вряд ли это имеет отношение к оптимизации. Наверно сам сюжет не подошел. :|
Есть еще порох в пороховицах!
 
Многие действительно брезгуют оптимизацией своих ресурсов под определённые потребности пользователя, забывая, что оптимизация чего бы то ни было даёт большую долю удобств при использовании. Оптимизация картинок позволяет сохранить время и траффик пользователя, который нуждается в информации, но не хочет долго ждать, пока прогрузятся абсолютно все картинки или просто не имеет возможности загружать файлы весом в 1 и более Mb. Есть, конечно, выход: отключить в настройках браузера загрузку графики, но кто пойдёт на подобные ухищрения по своей воле? Многие забывают, что сайтостроитель (или же вёрсточных дел мастер), он же вебмастер, - подчиняется тем же законам экономики и индустрии развлечений, что и весь окружающий мир. Чтобы ресурс делал деньги, нужно чтобы он был ориентирован на интересы своего конечного потребителя, а значит делал всё для облегчения существования пользователя сети. А вообще, благодарю за поднятую тему администрацию данного ресурса, потому как она действительно полезна. Хотелось бы ещё увидеть статьи об оптимизации кода и внешнего вида сайта под разные браузеры.
 
Наталия, вот сравните, сначала будет ваше изображние в png, потом остальные варианты без потери качества, Посмотрите на размер файлов (размер картинки остался оригинальный 1 024px × 1 447px):


Формат PNG. В данном случае получился самый огромный файл - (956 КБ), причина - нижние картинки выполнены с очень большим количеством цветов(допустим на морадахе тигра применен участок с градиентом - вот оно и расширяет динам. диапазон цвета и увелич. размер файла в данном формате), для этого png не больно-то годится. Можно сохранить с меньшим количеством цветов, будет компактнее.





Формат GIF. Для этого изображения получился самый оптимальный вариант без потери качества - размером в 173 килобайта.





Сохранено в формате JPG, выставлено 80% качества, размер 195 Кб. Если сделать 50-60% то будет лучше чем у GIF.




Если важно экономить место на диске, то в каждом случае нужно подбирать формат сохранения. Также, желательно, чтобы графический редактор позволял менять опции сохранения - там откроются тонкие возможности.
Есть еще порох в пороховицах!
 
Мои действия с той же картинкой привели к другим результатам. Из формата .ipg картинка переведена в .png, в итоге объем сократился до 2,78МБ, у Валерия - 173КБ. Какая операция была проведена не так? Мои действия: открыть с помощью Paint, - сохранить как...- Тип файла .png
 
Так, заметила только сейчас, что первый вариант у Валерия, он и есть мой второй вариант...
Тогда объясните, какие действия Вы осуществляли с картинкой, чтобы добиться значительного уменьшения объема без потери качества.
 
Ответ: Пайнт не способен оптимизировать графику. Найдите нормальный графический редактор. Ваш покорный слуга пользуется Corel PaintShop Pro X4, но он платный, стоит приблизительно 3200 руб. Ломанными не рекомендую пользоваться. Ищите бесплатные. Например, Константин предлагает как вариант - FastStone Image Viewer 4.7, скачать его можно на сайте faststone.org/download.htm - самый верхний пункт. Русский интерфейс есть.
Есть еще порох в пороховицах!
 
Видимо, хорошая программа FastStone Image Viewer 4.7, только мой антивирус этот сайт как неблагонадежный заблокировал. :acute:
 
Цитата
Наталия пишет:
объясните, какие действия Вы осуществляли с картинкой, чтобы добиться значительного уменьшения объема без потери качества.
Для каждого редактора по своему. В моем Corel PaintShop Pro X4, это Файл->Экспорт-> Оптимизатор JPEG (Оптимизатор PNG, Оптимизатор GIF). Т.е. по сути как Вы делали "Сохранить как". В Фотошопе подобная функция вызывается Файл->Сохранить для Web. И там подбираете (программа показывает в каком размере сохранится картинка).

Допустим, делал вот так (на втором скине показал как узнается будущий размер файла):



Есть еще порох в пороховицах!
 
Освоилась с Corel PaintShop Pro X5 - пробная версия стояла месяц, купить - дорогая, лучше еще раз пробник :good:

Пути для оптимизации картинок использую всего два, нет, три. В общем, делюсь опытом "для блондинок".

Если с фотоаппарата (они же по 2-3мб) - то сначала открываю в Microsoft PowerPoint и обрезаю лишнее, сразу "вес" меньше. Дальше можно воспользоваться там же сжатием - под разные %% - и уже глядишь, вес картинки от 20 о 80кб. норм. Мелко, но вполне прилично для просмотров.

Если из Инета картинки - то Corel - экспорт - оптимизировать по трем вариантам предыдущего сохранения (у Валерия как раз скрины стандартных действий). Только первоначально не по себе, а потом на автомате. Ну если остальные функции не трогать!!! ;) Если с картинкой переоптимизировать - такая хрень получится - ужастик можно снимать на таком материале...

Еще одно правило, которое твердо уже запомнила: если картинка сканирована, или диаграмма какая (простой рисунок), то сохранение как .png (дешево и сердито) - минимальный вес! В том же Corel потом оптимизация с минимальной потерей качества.

Очень жду следующий урок про составление коллажей с помощью Corel PaintShop Pro X5. И
 
Цитата
Наталия пишет:
Мелко, но вполне прилично для просмотров.
Оптимимзация, это не только "умелчение" фотографии! размер по разрешению может остаться тот же (т.е. размер на экране), а размер файла уменшиться.
Мы же как раз боремся с большим размером файла, а не размера изображения на экране.

Конечно, если фотоаппарат делает разрешение 4000х3000 (бывает и больше, например мой Canon - 5184x3456) - такое фото ни в какой экран не влезет, тоже надо уменьшать.
Но главное действие по оптимизации другое. Мы удаляем из файла картинки все лишние сведения. Их на картинке не видно, они служебные данные: слои, данные для обработки и т.п.
Вот это Corel и другие продвинутые графические редакторы как раз и удаляют.
Ну а вместе с уменьшением визуального размера, как раз получается, что уменьшаем размер файла в 10-20 раз!

По коллажам. Пока только принцип:
1. Создаем чистое новое полотно
2. Вклеиваем (вставляем) на полотно заранее подготовленные фото (они открыты в других окошках редактора, выделяем их, копируем, переходим в окошко где полотно и вставляем) в том виде и порядке в каком нам надо.

Цитата
купить - дорогая
Corel PaintShop Pro X5 стоит около 3200 руб ( в том числе диск - около 1000 руб. только пока не понял, это стоимость на 1 год или вечная лицензия).
Фотошоп вместе с диском обойдется примерно в 26 тыс.руб.
Есть еще порох в пороховицах!
Страницы: 1
Читают тему (гостей: 1)