×

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вы здесь: Главная → Сборник статей → Изображения → Уменьшаем вес изображений


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

Уменьшаем вес изображений

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

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

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

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

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

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

Содержание


  • Почему необходимо сжимать изображения
  • Сжатие в формате JPEG
  • Сжатие в формате PNG
  • Исходные файлы сайта

Почему необходимо сжимать изображения


не

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

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

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

В сайтостроении для сжатия обычно используется 3 формата - GIF, JPEG и PNG. Причем для отображения картинок наиболее часто применяются JPEG и PNG. А GIF, с лимитом в 256 цветов и с возможностью поддержки нескольких изображений в одном файле, в основном применяется для анимации.

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

Сжатие в формате JPEG


Для начала используем наиболее распространенный в настоящее время формат JPEG. Который был создан корпорацией Joint Photographic Experts Group. Отсюда его аббревиатура JPEG.

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

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

Итак, откроем ранее рассматриваемую картинку "3-optim" и перейдем через выпадающее меню "Файл" к сохранению для Web, как показано на скриншоте.

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

Рис.1 Сохранение для Web

После чего откроется окно сохранения файла, где можно определить нужные параметры сжатия. В данном случае уровень качества определен, как "Высокое" при значении 60. Что обеспечивает сжатие изображения до размера всего в 39кБ.

Для увеличения / уменьшения размера изображения кликните по картинке
Сжатие в формате JPEG с высоким качеством (60)

Рис.2 Сжатие в формате JPEG с высоким качеством (60)

При этом уровень качества можно изменять либо меняя градацию от "Низкого" до "Наилучшего". Либо назначая количественный параметр по шкале в диапазоне от 0 до 100, меняя непосредственно значения в соответствующем окошке или делая это с помощью имеющегося движка.

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

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

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

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

Если теперь проверить параметры сохраненного файла, то можно убедиться, что по сравнению с ранее оптимизированным по размеру, но еще не сжатым, вес картинки уменьшился в 5.8 раз - (с 232кб до 39.8кБ). Не правда ли хороший результат.

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

Рис.3 Параметры картинки 3 (3-optim) после сжатия в формате JPEG

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

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

Но давайте посмотрим, что будет происходить с той же заготовкой "3-optim", если уровень качества снизить (конечно в разумных пределах). Ниже показан вариант со средним качеством с уровнем 40, при котором вес изображения уменьшился по сравнению с предыдущим вариантом в 1.6 раза (с 39кБ до 24кБ).

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

Рис.4 Сжатие в формате JPEG со средним качеством (40)

Однако, во фрагменте сжатого изображения на лице работника стали отмечаться заметные искажения. Может это кого и устроит. Но мы в данном случае не будем жертвовать качеством ради некоторого уменьшения веса. И остановимся на прежнем варианте с уровнем с 60.

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

Теперь аналогичные операции проделаем и с другими заготовками картинок. В результате - общий их вес при достаточно хорошем качестве снизился с 1.7мБ до 265.6кБ - в 6.4 раза (в среднем всего в 33кБ на одну картинку). Как говорится, результат налицо.

Сжатие в формате PNG


Конечно, получив в предыдущем разделе такой хороший результат, можно было бы на этом и остановиться. Но стоит рассмотреть еще на один способ сжатия - использование формата PNG (Portable Network Graphic), который был разработан в 1995 году взамен GIF.

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

  • поддержка многоуровневой прозрачности;
  • возможность изменения и пере сохранения промежуточных версий изображений без потери качества;
  • поддержка большого количества цветов (более 16 млн. цветов).

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

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

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

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

А затем посмотрим как изменятся параметры сжатия в этом же формате, но при преобразовании картинки "4-optim", на которой изображены трафареты маркировки с незначительным набором цветов (всего два цвета - белый и черный и несколько полутонов).

Для этого откроем в Фотошопе заготовку "3-optim" и перейдем к сохранению для Web, как это делали ранее согласно (рис.11).

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

Для увеличения / уменьшения размера изображения кликните по картинке
Сжатие в формате PNG-8

Рис.5 Сжатие в формате PNG-8

Здесь видно, формат PNG-8 не может обеспечить достойное качество картинки (на скриншоте выделено место с наиболее заметными искажениями).

Это происходит вследствие того, что для такого полно цветного изображения попросту не хватает количества цветов, которое в этом формате составляет всего 256.

И при этом, можно обратить внимание, что даже при таком невысоком качестве, вес картинки в PNG-8 все равно уступает варианту, который ранее был получен при сжатии в формате JPEG: PNG-8 (57.6кБ), JPEG (39.8кБ).

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

Для этого снова перейдем к сохранению картинки "3-optim", где выберем формат PNG-24, как показано на скриншоте.

Для увеличения / уменьшения размера изображения кликните по картинке
Сжатие в формате PNG-24

Рис.6 Сжатие в формате PNG-24

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

Но вот что касается веса изображения, то значение в 238кБ не может устроить. Ведь это почти в 6 раз больше, чем при сжатии в JPEG (39.8кБ).

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

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

скриншот 27

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

Ниже на скриншоте показан вариант сжатия картинки "3-optim" в PNG формате с использованием Optimizilla.

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

Рис.7 Сжатие в PNG оптимизатором изображений Optimizilla

Но и здесь хорошо видно, что в PNG при сравнительно большом весе 67кБ (против 39кБ в JPEG) качество такого полно цветного изображения все же оказалось хуже чем в JPEG (рис.2). На картинке справа явно заметны искажения по сравнению с оригиналом. При этом результат, полученный с помощью онлайн оптимизатора отличается по качеству в лучшую сторону по сравнению с вариантом, сделанном в формате PNG-8 Фотошопа (рис.5).

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

А теперь посмотрим, что можно получить используя формат PNG, если сжимать изображение с небольшим количество цветов. И для этого сохраним заготовку "4-optim" в режиме PNG-8, ограничив количество до 8 цветов. Что оказывается вполне достаточным для хорошего отображения такой картинки.

Для увеличения / уменьшения размера изображения кликните по картинке
Сжатие в PNG с использованием 8-ми цветов

Рис.8 Сжатие в PNG с использованием 8-ми цветов

Как видно, качество полученного изображения по сравнению с оригиналом нисколько не ухудшилось. И при этом его вес около 10кБ. Что в более чем два раза меньше, чем при сжатии в JPEG (23.3кБ).

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

Но, а то, что для обеспечения прозрачного фона PNG незаменим, говорилось выше. При этом, такое сжатие в этом формате выполняется аналогично тому, как это было рассмотрено выше с использованием Фотошопа (рис.5,6). Здесь лишь важно учитывать, что в этом случае при назначении параметров должна быть включена опция "Прозрачность".

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

В результате мы подробно рассмотрели практическую работу по уменьшению веса изображений, получив восемь оптимизированных картинок, готовых для размещения в оформляемой статье. Из них семь в формате JPEG: "1-optim.jpg" ÷ "3-optim.jpg", "5-optim.jpg" ÷ "8-optim.jpg" и одна - "4-optim.png".

При этом общий вес всех этих файлов составляет всего 253кБ. Что довольно хороший результат для такого объема графической информации.

А в следующей статье рассмотрим некоторые вопросы SEO-оптимизации изображений. Где на примере полученных картинок в соответствии с определенными требованиями сформируем атрибуты title и alt тега <img>, предназначенного для отображения графических элементов на веб-странице. А также посмотрим как можно в наименованиях использовать ЧПУ.

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


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

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

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

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

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


Комментарии


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

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

comments powered by HyperComments