1. Меньше лучше
2. Использовать CSS
3. Используя неправильный формат
4. Как уменьшить размер фотографий?
5. Другие идеи о том, как уменьшить размер фотографий и страниц?

Как уменьшить размер фотографий, чтобы страница загружалась быстрее?

4,5 (90%) 4

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

Меньше лучше

В ситуации, когда бесплатные и красивые фотографии такие легко доступный До тех пор, пока не возникнет соблазн разместить блог, одну или несколько фотографий на вашем сайте. Лучший совет относительно избытка графики и изображений на веб-сайте, который замедляет его загрузку, - это просто отставка некоторых изображений, которые не обязательно необходимы для выделения передаваемого контента. Конечно, в галереях продуктов или на веб-сайтах, представляющих определенные функции, фотографии необходимы для иллюстрации, но требует ли их каждый веб-сайт так много? вид как объем данных, передаваемых веб-сайтами, увеличился за последние годы. Удивительно, что средний размер страницы превышает 2 МБ.

Использовать CSS

Возможность использовать CSS позволяет отказаться от большинства изображений, встроенных на страницу, только для достижения определенного эффекта. Например, градиентный фон или рамка для фрагментов текста. CSS3 и широкая поддержка этого формата во всех основных браузерах, позволяет избавиться от изображений, которые загружают наш сайт, и заменить их командами CSS, которые обеспечат тот же эффект. В настоящее время даже можно использовать значки в виде SVG или iconfontów вместо изображений. Так как же уменьшить размер страницы? Вот несколько примеров и ресурсов:

код:

#grad {background: red; / * Для браузеров, которые не поддерживают градиенты * / background: -webkit-linear-Gradient (красный, желтый); / * Для Safari 5.1 до 6.0 * / background: -o-linear-Gradient (красный, желтый); / * Для Opera с 11.1 по 12.0 * / background: -moz-linear-Gradient (красный, желтый); / * Для Firefox с 3,6 до 15 * / фон: линейный градиент (красный, желтый); / * Стандартный синтаксис * /}

Эффект ( вот больше примеров градиенты):

Используя неправильный формат

Казалось бы, достаточно сохранить графический файл в виде JPG, разместить его на сайте, и он готов, а GIF-файлы хороши только для анимированных мемов. Не совсем. Использование определенного формата должно определяться типом изображения, которое мы хотим отобразить. JPG хорош для фотографий, но вы не можете получить эффект прозрачности фона, как в PNG или GIF. GIF, в свою очередь, имеет ограниченную палитру до 8 бит (256 цветов). Подходит ли PNG с его прозрачностью и полной цветовой палитрой для всего? К сожалению, размер файлов PNG намного больше в случае фотографий с высоким разрешением, чем в случае JPG.

Так что стоит запомнить и как уменьшить размер фотографий, выбрав формат? JPG для фотографий, PNG для графики, например, диаграмм или логотипов и для прозрачных изображений, и GIF для небольших изображений, которые не могут быть заменены CSS. Также стоит упомянуть о новых форматах, которые набирают популярность, таких как WebP но они еще не получили широкой поддержки. Однако их стоит интересовать из-за большого преимущества в размере файлов.

Как уменьшить размер фотографий?

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

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

Эти изменения могут быть сделаны либо в графической программе, либо с помощью онлайн-инструментов, таких как optimizilla , Ниже приведен пример, в котором было получено уменьшение размера на 68%, и качество, как видно из увеличения, не сильно пострадало. Другие форматы также могут быть оптимизированы там.

Если страница работает в системе WordPress, вы можете рассмотреть возможность установки специального плагина, который сделает всю работу за нас. Примером такой вилки является, например, WP-Smush /

Другие идеи о том, как уменьшить размер фотографий и страниц?

Уменьшение размера фотографий должно иметь определенный эффект, который уменьшит объем данных, которые сервер нашего сайта должен предоставить клиенту. Глядя на это с этой стороны, сразу приходит на ум решение, которое позволит вам отправлять одни и те же данные только один раз. Такое решение, конечно, существует и называется «кешированием». Большинство серверов поддерживают эту функцию, хотя иногда ее следует включать через файл .htaccess. Но о другом времени.

Есть ли у вас опыт и советы по уменьшению фотографий? Поделиться в комментарии или в нашем профиле в социальных сетях.

Похожие

Комментарии