×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

  • Рубрики
  • Слайдер статей
  • Тест сайта
  • Подписка
  • Сайдбар
  • Прокрутка вверх
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

    Здравствуйте уважаемый посетитель!

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

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

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

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

  • Текущее состояние создаваемого сайта

    1. Проверка при малых разрешениях экрана
    2. Проверка при больших разрешениях экрана
    3. Проверка на выделенном домене

    Здравствуйте уважаемый посетитель!

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

    Для этого предусмотрена возможность оценивать его работу в двух вариантах: с использованием зеркала сайта на поддомене текущего ресурса и на реальном интернет-ресурсе, размещенном на выделенном домене "avtobezugona.ru.

    Следует отметить, что первый вариант, предусматривающий использование зеркала сайта, позволяет наглядно оценить его работу при различных разрешениях экрана в диапазоне от 320px до 1920px. Что очень удобно для проверки адаптации во всем допустимом диапазоне.

    Второй вариант же просто показывает, как это выглядит в реальных условиях при работе в сети Интернет.

Самописный сайт своими руками!

Текущее состояние создаваемого сайта

Здесь можно посмотреть текущее состояние тестового самописного сайта, который создается в рамках цикла статей Сделай сайт с нуля своими руками.

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

Вы здесь: Главная → Сборник статей → Изображения → Оптимизируем размер (ширину, высоту) изображений


Автор: / Дата:

Оптимизируем размер (ширину, высоту) изображений

Здравствуйте уважаемый посетитель!

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

Поэтому перед их размещением требуется проводить определенную оптимизацию. В основном это касается формирования размера (ширина и высота в пикселях), уменьшения веса (размер файла в байтах), а также вопросов SEO-оптимизации, включающих формирование необходимых атрибутов тега <img>, с помощью которого они непосредственно вставляются в HTML-страницы.

В этой статье рассмотрим первый, довольно важный этап оптимизации, связанный с преобразованием размера изображений. А остальные вопросы, касающиеся уменьшения их веса и SEO-оптимизации будут рассмотрены в следующих статьях.

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

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

Содержание


  • Зачем нужно оптимизировать размер изображений
  • Определяем ширину графических элементов, размещаемых на сайте
  • Оптимизируем размер картинок в графическом редакторе
  • Исходные файлы сайта

Зачем нужно оптимизировать размер изображений


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

Например, мы имеем заготовку с разрешением 1280×800px. И хотим поместить ее в один из фиксированных блоков 400×250px.

В этом случае ее вес (количество байт) при одинаковом качестве неоправданно будет завышен. Нетрудно посчитать, что количество передаваемых пикселей в исходном варианте будет на порядок выше, чем действительно потребовалось бы для отображения такой картинки (1280×800 = 1024000px против 400×250 = 100000px).

И как следствие - значительно больший объем файла. А значит и большее время, которое будет тратиться на загрузку веб-страницы.

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

Определяем ширину графических элементов, размещаемых на сайте


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

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

Но в нашем сайте используется резиновая верстка, которая в дополнение к адаптивной позволяет отображать веб-страницы на полный экран в диапазоне 320÷1920px. И, соответственно, ширина области контента также будет сильно меняться при разных условиях работы.

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

Для сравнения, ниже показан фрагмент статьи данного сайта с графическим элементом при разрешении экрана в 1000px и 1920px в двух вариантах. С начала приведено существующее положение при процентном соотношении изображения в 35% от области контента, а затем - как бы это могло выглядеть в фиксированном виде 400×250px.

Вид области контента при процентном определении ширины картинки (35%)

Вид с процентном определением ширины картинки при разрешении экрана 1000px

Рис.1 Вид с процентном определением ширины картинки при разрешении экрана 1000px

Вид с процентном определением ширины картинки при разрешении экрана 1920px

Рис.2 Вид с процентном определением ширины картинки при разрешении экрана 1920px

Вид области контента при фиксированной размере картинки (400×250px)

Вид с фиксированным размером картинки при ширине экрана 1000px

Рис.3 Вид с фиксированным размером картинки при ширине экрана 1000px

Вид с фиксированным размером картинки при ширине экрана 1920px

Рис.4 Вид с фиксированным размером картинки при ширине экрана 1920px

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

Напротив, во втором варианте при фиксированном значении в 400×250px видно, что при уменьшении разрешения экрана пользовательского устройства до 1000px габариты изображения становятся неоправданно большими по сравнению с текстом области контента.

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

  • 1 вариант - 30% от ширины области контента при вставках небольших графических элементов в левой и в правой части области контента;
  • 2 вариант - то же при 40%;
  • 3 вариант - 60% от ширины области контента при размещении изображений по центру;
  • 4 вариант - то же при 90% (при относительно небольшой высоте картинок);
  • 5 вариант - то же при 100% (при увеличении изображения на максимальную величину по желанию пользователя).

А далее сделаем для каждого варианта расчет исходя из максимального возможного разрешения экрана (для нашего сайта 1920px). На следующем рисунке представлено графическое отображение такого расчета.

Для увеличения / уменьшения размера изображения кликните по картинке
Расчет размера изображений

Рис.5 Расчет размера изображений

Подробно расписывать все арифметические действия для получения ширины блока основного содержание, который в данном случае имеет ширину в 1268px, наверное, здесь не стоит. Так как это простейшие арифметические операции делаются исходя из внешних и внутренних отступов всех блоков, образующих область контента в соответствии с назначенными свойствами стилей CSS (если у кого все же возникнут с этим затруднения, обращайтесь, сделаю подробное пояснение).

Округлив полученные значения получим следующие величины ширины элементов:

  • 1 вариант - 30% = 1268 × 0.3 = 380.4 ≈ 380(px);
  • 2 вариант - 40% = 1268 × 0.4 = 507.2 ≈ 500(px);
  • 3 вариант - 60% = 1268 × 0.6 = 760.4 ≈ 760(px);
  • 4 вариант - 90% = 1268 × 0.9 = 1141.2 ≈ 1140(px).
  • 5 вариант - 100% = 1268 ≈ 1270(px).

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

А кроме того, на их основе с помощью назначения соответствующих стилей CSS, получим несколько типовых решений, которые позволят упростить дальнейшее наполнение контента графическими элементами.

Оптимизируем размер картинок в графическом редакторе


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

И рассмотрим здесь для примера заготовку под номером 3, которая имеет значительно большие габариты, чем это требуется для ее размещения на веб-странице. Что в какой-то степени позволит наглядно сравнить объем файла до и после изменения ее размера.

Определить параметры сохраненных картинок довольно просто. Для этого достаточно открыть соответствующую папку (в данном случае "Заготовки картинок") и навести на нужное место курсор. После чего через пару секунд появятся основные параметры выбранного файла, отражающие его тип, вес (размер в байтах), а также высоту и ширину изображения.

Ниже показан скриншот с выбранной картинкой 3, где отображается ее ширина - 1066px, высота - 540px, а также тип файла -"PNG" с объемом в 771кБ.

Для увеличения / уменьшения размера изображения кликните по картинке
Параметры картинки 3 до изменения размера

Рис.6 Параметры картинки 3 до изменения размера

Также проверить размер файла можно через окно "Свойства". На следующем скриншоте видно, что в этом случае, как и ранее, файл также весит 771кБ. При этом здесь можно увидеть и другую величину в 772кБ, означающую фактически занятое место на диске. Разница в этих значениях обусловлена спецификой записи на диск, от чего данное свойство (место на диске) для определения размера файла учитывать не стоит.

Для увеличения / уменьшения размера изображения кликните по картинке
Определение размера файла через окно Свойства

Рис.7 Определение размера файла через окно "Свойства"

А теперь в Фотошопе откроем заготовку под номером 3 и назначим ей ширину, соответствующую рассчитанной в предыдущей статье 2-ому варианту в 500px.

Для этого через меню "Изображение / Размер изображения..." откроем соответствующее окно и внесем нужное значение, как показано на скриншоте.

Для увеличения / уменьшения размера изображения кликните по картинке
Изменение размера изображения

Рис.8 Изменение размера изображения

После нажатия на кнопку "OK" размер изображения изменится. Причем пропорции его сохраняться, и высота будет рассчитана автоматически.

Теперь сохраним полученный результат без потери качества в формате PNG. Проще всего можно это сделать через меню "Файл", выбрав быстрый экспорт в PNG, как показано ниже.

Для увеличения / уменьшения размера изображения кликните по картинке
Быстрый экспорт в PNG

Рис.9 Быстрый экспорт в PNG

Сохранив файл с новым названием, скажем "3-optim", посмотрим на его объем с измененными размерами.

Для увеличения / уменьшения размера изображения кликните по картинке
Параметры картинки 3 после изменения размера

Рис.10 Параметры картинки 3 (3-optim) после изменения размера

Как видно, изменив ширину в два раза (с 1066px до 500px), вес данной картинки уменьшился более чем в три (с 771кБ до 232кБ). Что наглядно подтверждает важность оптимизации размера изображений.

Аналогичным образом изменим и остальные изображения. Причем довольно узкую картинку 4, с небольшой высотой, изменим по варианту 4 (ширина картинки 1140px). А остальные - по варианту 2 (ширина 500px).

В папке заготовок, которую можно найти в дополнительных материалах в разделе Исходные файлы сайта, эти оптимизированные по размеру картинки обозначены, как "optim.png" под соответствующими номерами. Если сложить их общий вес, то сейчас он будет составлять 1.7мБ (в среднем около 200кБ на одну картинку).

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

Исходные файлы сайта


Сформированные картинки, включая те, которые рассматривались в этой статье можно скачать из прилагаемых дополнительных материалов.

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

С уважением, Николай Гришин


Комментарии


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

Буду Вам за это очень признателен!

comments powered by HyperComments