Ваши рефералы :: Турнирная таблица конкурса рефоводов
Закрытая тема
Показано с 1 по 3 из 3

Тема: Формат изображений для сайта.

  1. #1
    Студент Аватар для DavyJohnes
    Уровень репутации: 15
    Регистрация: 17.08.2010
    Сообщений: 217
    Спасибо: 2
    Поблагодарили 5 раз(а) в 5 сообщениях
    Файловый архив:
    Скачиваний: 0
    Закачек: 0

    Формат изображений для сайта.

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

  2. #2
    Кандидат наук Аватар для DivaDii
    Уровень репутации: 219
    Регистрация: 01.06.2010
    Адрес: Kherson, Ukraine
    Сообщений: 642
    Записей в дневнике
    26
    Спасибо: 148
    Поблагодарили 205 раз(а) в 149 сообщениях
    Файловый архив:
    Скачиваний: 0
    Закачек: 0

    Re: Формат изображений для сайта.

    На сайтах можно использовать следующие форматы изображений:
    *.jpg, *.png, *gif

    Внимание: *.tif - на сайтах не работает!! (и тем более *.psd)

    "Хитрости" - в основном зависят от того, какой формат файла и в какой программе подготовлено.
    Причем в очень многих программах (в том числе, в Фотошопе) есть функция: "Сохранить для web". А там - можно выбрать нужные параметры: размер поменьше. Допустим, "чересстрочность". Кроме того, Фотошоп выкинет из файла все лишние данные. Таким образом - размер файла тоже уменьшится.
    Кроме того, цветность (так называемая "палитра") изображения. Особенно удобно использовать для *.gif. Там можно уменьшить размер файла в разы - за счет сокращения количества цветов. При этом качество изображения не только не ухудшится. А иногда - можно даже добиться улучшения.

    ======

    И с одной стороны - это все правильно и хорошо. И уметь это делать НАДО!
    Но с другой стороны - с развитием технологий сейчас скорости Интернета тааааак возросли, что особо заморачиваться вебдизайнеру с учетом каждого байтика - уже не приходится. Так, как, допустим, это было актуально лет 5 назад.
    И сейчас уже весьма редко случается так, что сайт тормозит из-за того, что на нём "тяжелая" графика. Как правило, сейчас сайты тормозят по совершенно другим причинам.

  3. #3
    Кандидат наук Аватар для NoClick
    Уровень репутации: 182
    Регистрация: 14.06.2010
    Сообщений: 874
    Спасибо: 69
    Поблагодарили 173 раз(а) в 140 сообщениях
    Файловый архив:
    Скачиваний: 0
    Закачек: 0

    Question Re: Формат изображений для сайта.

    Какой нужно выбрать формат изображений
    В зависимости от изображения (кол-ве цветов, размеров, что на нем изображено (линии, либо там каждый рядом стоящий пиксель сильно отличается от соседнего)).
    А так, среднеоптимально: фотографии в jpg, элементы оформления в gif.

    Также мало кто знает, что jpg поддерживает скрытый копирайт (с описанием и ссылкой). Но тогда (чтобы фотошоп не вырезал заголовки) сохраняй не через "Сохранить как для веб", а именно через "Сохранить как".

    Также как в итоге будет выглядеть изображение и вес (размер) еще будет зависеть от настроек цветовых профилей в Фотошопе и настроек для каждого формата на панеле "Сохранить как для веб".
    Ну и ширину-высоту изображения делать точной в Фотошопе, а не уменьшать в html-е.

    Также — когда вставляешь изображение старайся всегда указать точные размеры. Если они одновременно не известны, то хотя бы один (например только ширину). Но старайся оба. Да и не только у изображений. Т.к. браузер когда получает код, начинает рассчитывать как ему это всё отобразить. Указывая точные размеры ты ускоряешь просчет отображение страницы посетителю. И потом, когда страница покажется но изображения еще не успели подгрузится не будет неприятных скачков. Т.е. ты чуть страницу отмотал до середины, а сверху изображение подгрузилось и весь массив текста смещает вниз. И в итоге ты теряешь то место где смотрел. Довольно не комфортно. А всё из-за того, что не указали явно размеры в html-е.

    Ну и обзывай изображения по принципу ЧПУ. Т.е. не image-s-a54f563e635d34.jpg, а photo-ny-semenovich.jpg
    А если ты еще и в пути до изображения соблюдишь ЧПУ с учетом иерархии, типа, http://www.siteurl.ru/ny/semenovich/...menovich-1.jpg — то вообще вери-вери-вери гуд! (т.е. тут и для поисковика и юзабельно для посетителя (навигация по адресной строке))
    ЧПУ — либо названия давай на английском, либо транслитерацию. Сейчас под рукой нету, если будет желание чуть позже выложу правила универсальной транслитерации (которую правильно понимают и Яндекс и Гугл). Ну и разделитель между словами не _, а именно -.

    Также в .htaccess пропиши принудительное кэширование браузером, например, на две недели всего (изображений, стилей, js-скриптов и т.п.):
    Код:
    <IfModule mod_expires.c>
       # Включаем
       ExpiresActive On
    
       # Кэшировать браузером все файлы в течении двух недель (в секундах).
       ExpiresDefault A1209600
    </IfModule>
    Соответственно, если используешь капчу (jpg), либо на сайте есть поиск и т.п. то из "кэширования всего" это убери.
    Чтобы кэшировать всё кроме html, тогда будет выглядеть так:

    Код:
    <IfModule mod_expires.c>
       # Включаем
       ExpiresActive On
    
       # Кэшировать браузером все файлы в течении двух недель (в секундах).
       ExpiresDefault A1209600
    
       # Не кэшировать файлы, имеющие тип
       ExpiresByType text/html A1
    </IfModule>
    Ну и т.п.
    ...
    что сайт тормозит из-за того, что на нём "тяжелая" графика
    Не скажи. Еще довольно часто можно встретить визуально маленькую (по ширине-высоте) пимпу весом в пару мегабайт. =)
    ...
    для наиболее оптимально скорости загрузки
    Вообще оптимизация отображения — это большая-большая тема. Даже срезав буквально несколько килобайт, в итоге и в сумме на одного посетителя (и уж тем более всех посетителей) — будет вполне существенный рост и скорость.
    А вообще рекомендую: www.webo.in
    Последний раз редактировалось NoClick; 20.08.2010 в 16:01.

Закрытая тема


Похожие темы

  1. формат AutoDirect - объясните чайнику
    от kilevelena в разделе Traffstock.ru
    Ответов: 1
    Последнее сообщение: 23.11.2010, 12:54

Метки этой темы

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
Счетчик цитирования