Как дополнительно оптимизировать загрузку изображений?

Столкнулся с задачей создать сайт, на котором множество фотографий и они должны быть хорошего качества, так как представляют собой товар. К тому же будет присутствовать видео на заднем фоне, кастомные слайдеры и тп. Вопрос в том, есть ли какие-то фишки для оптимизации медиа-контента, кроме lazyload, сжатия изображений через тот же галп, например? Может быть, как-то от хранения ресурсов зависит или можно просто на хостинге хранить и этого достаточно?
Также вопрос по lighthouse в довесок появился, когда сайт прогонять начал ради интереса, а тот выдал, что надо уменьшить кол-во затраченного интернета (медиа-контента ведь куча целая, как влезть в рамки 1,5Мб). А вопрос в том, доверять ли ему в таких ситуациях?

Дополнительно:

Содержание

1 Дополнительно:
2 Ответы:

Ну сжимаются картинки не через gulp, он таск-менеджер. Если допустимы потери то можно и в webp конвертировать. А в целом и фотки залить и трафиком не подавиться требования взаимоисключающие

Ответы:

Можете посмотреть в сторону тега picture. Для разных разрешений можно использовать разные форматы, не придется для 1080p монитора грузить 4к фотки. Так же почитайте о современных форматах изображений, их так же в теге picture можно указать(возможно придется сервер учить перегонять фотки в разные форматы, не знаю от куда вы их берете и есть ли такая возможность).

+ Заказать

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

Есть ответ
09.04.2024

Ответить

Для оптимизации загрузки изображений на сайт, можно использовать несколько методов:

1. Сжатие изображений: Перед загрузкой изображений на сайт, рекомендуется сжимать их, чтобы уменьшить размер файла. Существует множество онлайн-сервисов и программ для сжатия изображений без потери качества, например, TinyPNG или ImageOptim.

function compress_image($source, $destination, $quality) {

    $info = getimagesize($source);

    if ($info['mime'] == 'image/jpeg') 
        $image = imagecreatefromjpeg($source);

    elseif ($info['mime'] == 'image/png') 
        $image = imagecreatefrompng($source);

    imagejpeg($image, $destination, $quality);

    return $destination;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function compress_image($source, $destination, $quality) {

$info = getimagesize($source);

if ($info['mime'] == 'image/jpeg')

$image = imagecreatefromjpeg($source);

elseif ($info['mime'] == 'image/png')

$image = imagecreatefrompng($source);

imagejpeg($image, $destination, $quality);

return $destination;

}

2. Использование lazy loading: Этот метод позволяет загружать изображения только тогда, когда пользователь прокручивает страницу до них. Это позволяет ускорить загрузку страницы и снизить нагрузку на сервер.

<img src="placeholder.jpg" data-src="image.jpg" class="lazyload" alt="Image">

1	<img src="placeholder.jpg" data-src="image.jpg" class="lazyload" alt="Image">

3. Использование CDN: Content Delivery Network (CDN) позволяет загружать изображения с ближайшего к пользователю сервера, что ускоряет загрузку. Популярные CDN-сервисы, такие как Cloudflare или Amazon CloudFront, могут быть использованы для этой цели.

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

5. Использование форматов изображений с меньшим размером: Например, вместо PNG можно использовать JPEG для фотографий, так как он обычно имеет меньший размер файла.

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

Есть ответ
07.04.2024

Ответить

Для оптимизации загрузки изображений на сайте можно использовать несколько методов:

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

// Пример сжатия изображения в PHP
$img = imagecreatefromjpeg('image.jpg');
imagejpeg($img, 'compressed_image.jpg', 80); // 80 - качество изображения от 0 до 100
imagedestroy($img);

1

2

3

4

// Пример сжатия изображения в PHP

$img = imagecreatefromjpeg('image.jpg');

imagejpeg($img, 'compressed_image.jpg', 80); // 80 - качество изображения от 0 до 100

imagedestroy($img);

2. Lazy loading: использование lazy loading позволяет загружать изображения только когда они становятся видимыми для пользователя. Это позволяет ускорить загрузку страницы, особенно если на странице много изображений.

3. CDN: использование Content Delivery Network (CDN) может значительно ускорить загрузку изображений, так как они будут загружаться с сервера, находящегося ближе к пользователю.

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

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

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

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

Как дополнительно оптимизировать загрузку изображений?

Дополнительно:

Ответы:

Оставить комментарий Отменить

Ответы

Ежедневно, круглосуточно

Как дополнительно оптимизировать загрузку изображений?

Дополнительно:

Ответы:

Оставить комментарий Отменить

Ответы

Метки

Ежедневно, круглосуточно