Резиновая html страница. Всегда ли нужна «резиновая» верстка? Размер шрифта в мобильных браузерах

Привет, друзья!

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

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

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

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

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

Начнем с небольшого рассмотрения надобности всех действия, рассматриваемых ниже.

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

Уменьшение веса может потребоваться для экономии веса на носителе (жесткий диск, флешка и так далее), для быстрой загрузки изображений на сайте и так далее

Вариантов на самом деле огромное количество. Чтобы не томить мы приступаем к практике.

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

Теперь для любителей текстовых инструкций.

Изменение размера в Paint

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

Открываем изображение в Paint и на вкладке "Главная" имеется пункт "Изменить размер".

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

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

На это изменение размера изображения в Paint закончили.

Кстати, изменение параметров ширины и высоты также влияет на вес изображения. Поэтому, берите это на заметку.

Теперь рассмотрим вариант с помощью Photoshop.

Изменение размера в Photoshop

Открываем в программе наше изображение и двигаемся в пункт "Изображение - Размер изображения".

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

После нажатия на кнопку "Ок" параметры размера будут применены и можно сохранить файл.

Данных способов вполне достаточно для изменения размеров высоты и ширины изображений.

Теперь мы рассмотрим 2 способа, как можно уменьшить вес изображений.

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

Уменьшения веса в Photoshop

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

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

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

• Качество - высокое (60-70). Значение регулируете под свои нужды;
• Формат - jpeg. Если на изображении нужно сохранить прозрачные области, то нужен формат png;
• Также ставим настройку "Прогрессивный".

Также можете менять размеры прямо в этом окне, а не отдельно через пункт "Изображение - размер изображения", как я это показал в пункте ранее. Это очень удобно.

После настройки параметров сохраняете настройки (см. скриншот выше).

Только этим способом мне удалось снизить вес картинки с 116 кб до 75 кб, не изменяя при этом размеров (высота и ширина остались прежними).

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

Теперь рассмотрим, как уменьшить вес при помощь онлайн сервиса.

Онлайн сервис для оптимизации

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

Сервис имеет название krakin.io . Переходим на него. Я дал ссылку уже сразу на страницу выбора изображения.

На данной странице нужно сначала определиться со степенью сжатия изображения. За это отвечают 2 параметра:

• Lossy - сильное сжатие (стоит по-умолчанию);
• Lossless - меньшее сжатие.

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

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

Видно, что оригинальный размер файла был 77 кб, а после оптимизации он стал 59 кб. Также показывает сколько было сжато в килобайтах (18 кб) и в процентном отношении (23.8%).

Чтобы сохранить сжатое изображение, необходимо нажать на кнопку "Download this file" в последней колонке "Status". Нас перекинет на новую вкладку, где откроется итоговое изображение, чтобы мы могли его оценить. Для сохранения нужно нажать правую кнопку мыши на изображении и выбрать пункт "Сохранить картинку как".

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

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

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

С уважением, Константин Хмелев!

Резиновой вёрсткой называется вёрстка, при которой сайт растягивается в зависимости от ширины окна браузера.

Я считаю, что резиновая вёрстка - это признак мастерства дизайнера и верстальщика. Разрабатывая и поддерживая качественно тянущийся сайт, дизайнеры, технологи и редакторы сайта сталкиваются с множеством проблем: необходимо сделать так, чтобы картинки и текст вели себя адекватно и оставались читабельными при любом разрешении; вместе с тем, в вёрстке не должно возникать дыр. Но если всё сделано правильно, результат будет отличный.

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

Допустим, человек купил дорогой широкий монитор, зашёл на сайт, а тот как был 800 пикселей в ширину, так и остался. Не надо его учить, что растягивать браузер на все 1900 пикселей неправильно. Надо сделать резину и предоставить право выбора человеку.

Есть две причины, почему не хотят делать «резину»: эстетическая и технологическая .

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

Технологическая причина сводится к набору страхов.

Что делать с возникающими пустотами?

Существует много хорошо свёрстанных резиновых сайтов, на которых эта проблема решена. Интернет-издание «Время-н » растягивает картинки на больших разрешениях. На Гугл-картинках блоки с картинками, перескакивают со строки на строку при разной ширине браузера.

Как быть с широкими текстовыми блоками?

Можно использовать многоколоночную структуру. В этом случае блоки, растягиваясь, остаются читаемыми. Этот способ реализован на Ленте.ру . Но и на обычном трёхколоночном сайте можно добиться читаемости текста.

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

• Тема: HTML&CSS
• Время ролика: 00:22:38
• Cложность: средняя
• Прикладные программы: Dreamweaver CS4

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

Техника 2. Создание резинового меню, используя списки

• Тема: HTML&CSS
• Время ролика: 00:16:13
• Cложность: средняя
• Прикладные программы: Dreamweaver CS4

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

Техника 3. Выстраиваем элементы позиционированием

• Тема: HTML&CSS
• Время ролика: 00:23:39
• Cложность: средняя
• Прикладные программы: Dreamweaver CS4

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

Техника 4. Центрирование элемента переменной ширины

• Тема: HTML&CSS
• Время ролика: 00:11:45
• Cложность: средняя
• Прикладные программы: Dreamweaver CS4

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

Техника 5. Выравнивание блоков по ширине резинового блока

• Тема: HTML&CSS
• Время ролика: 00:16:00
• Cложность: средняя
• Прикладные программы: Dreamweaver CS4

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