Форум
Читайте нас также:

об электронной торговле - для интернет-магазинов и ритейла. портал и сообщество

Форум

Сжатие фото для размещения на сайте



Ссылка на сообщение


Подскажите технологию сжатия обыкновенной фотографии до необходимых размеров для размещения на сайте.
Спасибо за ответ на мыло trade-yar@yandex.ru



Ссылка на сообщение


Картинке на веб-странице можно задать любые размеры, и браузер автоматически сжимает/растягивает исходное изображение, подгоняя под требуемые размеры
Никаких дополнительных технологий не надо



Ссылка на сообщение


Цитата:

Никаких дополнительных технологий не надо


Качество сжатия фото браузером значительно ниже, чем профессиональными пакетами.

Рекомендую вам ACD See - там есть пакетное сжатие картинок, очень удобно.



Ссылка на сообщение


Ну так если приперло, то можно и Фотошопом сжимать :)



Ссылка на сообщение


Фотошопом вы 3500 картинок, например, будете очень долго сжимать...А в ACD See есть пакетное сжатие, выделить все и нажать пару кнопок...



Ссылка на сообщение


Цитата:

Фотошопом вы 3500 картинок, например, будете очень долго сжимать...

В Фотошопе переходите на вкладку Actions, создаете новый макрос для записи, например, my_macros. Жмете на запись. Что-то делаете на одном изображении (ваши действия записываются). Останавливаете запись. Вот вам и порядок действий (макрос).
Потом "File"-"Automate"-"Batch" - вот вам и пакетная обработка кучки файлов по вашему макросу (хоть рамки везде делайте, хоть водяные знаки ставьте или резкость настраивайте).

Цитата:

Картинке на веб-странице можно задать любые размеры, и браузер автоматически сжимает/растягивает исходное изображение, подгоняя под требуемые размеры
Никаких дополнительных технологий не надо

Браузер лишь отображает то, что вы ему передали.
Т.е. если у вас изображение на 2000 пикселей на 5000 пикселей, а на страницу вставлено с шириной 20 на 50 - то это огромное по размеру изображение загрузится, а потом браузером уменьшится. А это не совсем правильно (точнее - вообще не правильно).
Изображения должны иметь ширину и высоту ровно такую с которой они вставляются на страницу. И в html надо обязательно писать размеры (нужно это вот почему: когда браузер получает страницу (html) он начинает ее строить. И когда везде размеры проставлены (у изображений, таблиц, слоев - он ее быстрее выстроит и, значит, быстрее отобразит посетителю)).

Цитата:

Подскажите технологию сжатия обыкновенной фотографии до необходимых размеров для размещения на сайте.

1. Определится с размерами. Зависит от сайта (дизайна), но обычно (например, для товаров в магазине) стараются придерживаться Ширины (а Высота плавает (масштабируется)).
...
2. Как определились с размерами - определяйтесь с форматом. Из всего три: gif, jpg (jpeg), png. У каждого свои минусы и преимущества. Png самый лучший, но с ним возникнет множество проблем с отображением в ранних браузерах (в ИЕ).
jpeg используют для фотографий (т.е. когда много-много разных по цвету пикселей. Большой диапазон цветов.
gif - когда много одинаковых пикселей идущих подрят. 256 цветов.
Т.е. какой формат выбрать - определять методом тыка. К этому пункту вернемся в конце.
...
3. Будем считать что изображения у вас подчищены и отцветокорректированы. А то этот третий пункт в книгу превратится =)
..
4. Открываете в Фотошопе свое изображение. переводите его в RGB (если он не в нем). Потом тыкаете в "Image"-"Image Size":
Resolution ставите в 72 (проверяете чтобы было выбрано pixel/inch)
Также проверяете чтобы столяло две галки:
Constrain Proportions и
Resample Image (выбрано Bicubic)
И уже после этого ширину (width) выставляете в нужную вам (высота при этом промаштабируется). Жмете на Ок.
...
5. Тут уже надо смотреть на само изображение. Обычно еще раз требуется небольшая цветокоррекция.
...
6. Резкость. Все опять зависит от изображения (что на нем изображено). Но попробуйте:
"Filter"-"Sharpen"-"Unsmark Mask" и выставите в поля:
70
0.7
1
Стало лучше чем было?
...
7. Сохраняемся (вот тут идет перелинковка с третьим шагом).
В Фотошопе сохранять через меню:
"File"-"Save for web".
Выбираем формат. На вкладке просмотра тыркайте на 4-Up.
Слева в верху будет изображение оригинал. В остальных - в разных форматах при разной степени сжатия (для jpeg), количества цветов (gif) и т.п. Снизу пишется тот размер который получится.
Вообщем ваша задача выбрать формат (и меняя разные настройки). Так, чтобы и изображение выглядело хорошо (не было заметно артефактов после сжатия) и так чтобы размер изображения был меньше. Выбрали? Сохраняйтесь.
...
Возврат к шагу три.
Чтобы выбрать формат - надо открыть штук двадцать изображений вашего сайта, оптимизировать их в одном формате, в другом, и потом сравнивать их все. Во размеру, по качеству. И уже использовать тот формат где будет лучше.
...
Но, думается, вам подойдет такое:
Изображения-оформления для сайта вы будете делать в gif (так как элементы маленькие).
Маленькое изображение товара (50-150 пикслей по ширине) - в gif (256 цветов, ).
Большие изображения товара - в jpeg (500-800 пикселей по ширине) с сжатием 80%.
...
На самом деле это описание такое сложное, а делать изображения для веб очень и очень просто.
...
Если покажите ваши изображения, скажите ваши размеры - по ширине. По-шагово распишу куда жать и где что вбивать для наилучшего качества.



Ссылка на сообщение


Зачем вообще GIF использовать, если JPG будет меньше весить
Тем более, всего 256 цветов
GIF вообще устаревший формат, единственный его плюс - это анимация



Ссылка на сообщение


Barlog:

Качество сжатия фото браузером значительно ниже, чем профессиональными пакетами

Если речь об ИМах, то про качество картинок лучше вообще не рассуждать... Больная тема :?



Ссылка на сообщение


buka:

Если речь об ИМах, то про качество картинок лучше вообще не рассуждать... Больная тема


а при чем здесь ИМ не ИМ...
это факт, что проф пакет выполнит сжатие лучше. и не важно ИМ не ИМ...



Ссылка на сообщение


Цитата:

это факт, что проф пакет выполнит сжатие лучше. и не важно ИМ не ИМ...

Прально. Так как у него алгоритм продуман (как один соседний пиксель наложить на другой и как лучше соседние размыть (точнее: поменять цвет у соседних)).
Да и при сохранении - программы пишут в файл заголовки (в чем сделано, всякие внутренние теги и т.п.). У фотошопа при сохранении через "Саве фор веб" они тоже есть, но их минимум.
Кста, есть программы - которые эти заголовки вырезают безопасно от файла (как для gif, так и для jpeg). Если фоток товаров очень много — срезаный вес будет очень существенный.

Тока buka, наверное, имел в виду другое.
Качественных фоток товаров очень мало. А самому насчелкать иногда не предоставляется возможным.
...
Цитата:

Зачем вообще GIF использовать, если JPG будет меньше весить.

Не факт. Проведите эксперимент (на разных изображениях (с разным сюжетом) и разными размерами). Я в свое время проводил =)
Если есть возможность использовать gif — надо использовать gif (изображение выглядит четче при меньшем весе).

p.s. Вот это изображение:
Изображение
Гифом. Весит: 0.761 Kb.
Оно же jpeg-ом:
Качество 100: 2.86 Kb
Качество 80: 2.01 Kb
Качество 60: 1.58 Kb (уже появились артефакты от сжатия)
Качество 30: 1.05 Kb (чумазое от сжатия (все в разводах)).
Это всего одно изображение.
У вас таких на сайте - море.
...
Цитата:

Тем более, всего 256 цветов

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



Ссылка на сообщение


altsupport
И у Вас на ПОЛНОЦВЕТНОМ gif размер получился менее чем на jpg ? "не верю" (с)



Ссылка на сообщение


Цитата:

И у Вас на ПОЛНОЦВЕТНОМ gif размер получился менее чем на jpg ? "не верю" (с)

Надо смотреть на изображение.
Если фотография (занимает все пространство (т.е. каждый соседний пиксель от предыдущего отличается по цвету существенно)) - jpeg будет меньше.
Если это объкт, вокруг которого однородный фон - то гиф будет меньше.
Опять же при условии - размера фотографии.

Тока тут слово ПОЛНОЦВЕТ смущает. Цветное в смысле?
А то полноцветом в полиграфии цветовую модель CMYK обазначают.



Ссылка на сообщение


altsupport:

Так и у гифа - любой цвет отсутствующий в его палитре, формируется за счет соседних (цветом).

Ладно, допустим, гиф в некоторых слчаях меньше весит... Но качество картинки у него полюбому хуже, из-за убогой палитры. ИМХО сейчас в вебе размещать низкокачественные картинки - дурной тон и себе в убыток, так что jpeg рулит :)
При нынешних скоростях интернет-соединений, плюс-минус один-два килобайта при загрузке сайта роли не играет...

Я вот недавно попробовал PNG формат, понравилось. Прозрачность/полупрозрачность делается легко. Вместо квадратных фото-блоков на сайте можно размещать картинки любой формы :) Жесть.



Ссылка на сообщение


Цитата:

Я вот недавно попробовал PNG формат, понравилось.

А в браузерах как? И также - как в них с полупрозрачностью?
PNG хороший, только активно пользоватся им начнут через года два-три.

Цитата:

Но качество картинки у него полюбому хуже, из-за убогой палитры

Повторюсь: зависит от изображения.
А может даже получится что и лучше (из-за четкости)

Вот попугай: http://stream.ifolder.ru/2255020
В jpeg и в gif. Откройте одно и второе браузером. И, если бы вы не знали где в каком формате (когда изображения просто вставлены на страницу) - смогли бы сходу определить формат?
При этом один от второго отличается почти в два раза (18 kb против 34). При этом еще учитывайте что попугая брал из-за того что он цветастый. Холодильник, телевизор или еще что-нить - однотонные.

Цитата:

При нынешних скоростях интернет-соединений, плюс-минус один-два килобайта при загрузке сайта роли не играет...

По-мимо скоростей есть еще и трафик. Т.е. посидев немножко и над изображениями и над html - вес страницы может срубится минимум на 5 kb.
Средний посетитель минимум просмотрит две страницы. А у вас их, например, 5 000 в сутки.
Получается - 50 000 kb, т.е. в сутки почти 49 мегабайт. Это брали по минимому.
Хотя, конечно, большая тормознутость возникает когда html-кривой (браузер долго строит), и из-за работы скриптов сайта.



Ссылка на сообщение


altsupport:

А в браузерах как? И также - как в них с полупрозрачностью?

В браузерах - ок
IE6 имеет некоторые проблемы с этим, но все решается одной строчкой джаваскрипта

Другое дело, что PNG не сжимает почти нифига (по сравнению с jpeg разница в разы)... Несмотря на то что именуется "Portable Network Graphics" :P


cron




Ответить


1
:D
:)
:(
:o
:shock:
:?
8)
:lol:
:x
:P
:oops:
:cry:
:evil:
:twisted:
:roll:
:wink:
:!:
:?:
:idea:
:arrow:
:|
:mrgreen:







2001 - 2019 © Оборот.ру. Все права защищены