Какие есть хорошие способы оптимизации изображений для Интернета? (Каркас Figma в код)

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

Я создавал свои каркасы в Figma, но когда я экспортировал изображения, качество значительно снизилось. Если я экспортирую их в 2 или 3 раза, разрешение улучшится, но тогда это будет компромисс со скоростью. Я новичок во внешнем интерфейсе, пытаюсь написать собственный веб-сайт, чтобы научиться программировать, поэтому, пожалуйста, помогите. У меня следующие вопросы:

  1. Как лучше всего оптимизировать изображения для Интернета?
  2. Как узнать, слишком ли велико ваше изображение? Каков типичный размер оптимизированного изображения?
  3. Какие советы/рекомендации/ресурсы я могу дополнительно изучить? Большое спасибо 🤓

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

Вот некоторая ссылка от Google, в которой мы углубляемся: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/


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

Вот некоторая ссылка от Google, в которой мы углубляемся: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/


Есть несколько вещей, которые вы можете сделать с изображениями высокого качества:

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

Подробнее об этом здесь: https://developers.google.com/web /basicals/performance/lazy-loading -idance/images-and-video/

Прогрессивная загрузка (например, как это делает Medium): вы загружаетесь в действительно изображение низкого качества, а затем постепенно загружаются более высокие версии этого изображения. Это дает пользователю возможность показать, что в конечном итоге здесь будет показано.

Подробнее об этом здесь: https://jmperezperez.com/medium-image-progressive-loading-placeholder/

Альтернативные форматы файлов: Рассмотрите возможность использования альтернативных форматов файлов, таких как WebP. Хотя будьте осторожны с поддержкой браузера, но вы можете установить резервный JPEG или PNG

Подробнее об этом здесь: https://developers.google.com/speed/webp/

Другое примечание: Хорошая/стандартная практика — обязательно сжимать изображения. Если он размещен в Интернете, используйте разрешение 72 DPI (не 300 для печати), цветовой формат RGB и убедитесь, что вы используете правильный формат файла, например PNG для значков или прозрачного фона и JPEG для более подробных изображений. По возможности используйте SVG вместо PNG и JPEG для векторной графики.

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


Есть несколько вещей, которые вы можете сделать с изображениями высокого качества:

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

Подробнее об этом здесь: https://developers.google.com/web /basicals/performance/lazy-loading -idance/images-and-video/

Прогрессивная загрузка (например, как это делает Medium): вы загружаетесь в действительно изображение низкого качества, а затем постепенно загружаются более высокие версии этого изображения. Это дает пользователю возможность показать, что в конечном итоге здесь будет показано.

Подробнее об этом здесь: https://jmperezperez.com/medium-image-progressive-loading-placeholder/

Альтернативные форматы файлов: Рассмотрите возможность использования альтернативных форматов файлов, таких как WebP. Хотя будьте осторожны с поддержкой браузера, но вы можете установить резервную копию JPEG или PNG

Подробнее об этом здесь: https://developers.google.com/speed/webp/

Другие моменты, на которые следует обратить внимание: Хорошая/стандартная практика — обязательно сжимать изображения. Если он размещен в Интернете, используйте разрешение 72 DPI (не 300 для печати), цветовой формат RGB и убедитесь, что вы используете правильный формат файла, например PNG для значков или прозрачного фона и JPEG для более подробных изображений. По возможности используйте SVG вместо PNG и JPEG для векторной графики.

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


В настоящее время Google рекомендует, чтобы фотография была размером около 200 КБ, поэтому я знаю, что этого действительно недостаточно 🙂 Я я также занимаюсь фотографией. У меня есть веб-сайт, подготовленный так, что он проиндексирован и имеет даже 80 изображений на странице, и сайт работает очень быстро. На https://developers.google.com/speed/pagespeed/insights/он 100/100, и он проиндексирован Google;) Я использую несколько размеров одного и того же изображения в зависимости от ширины экрана.

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

Ниже приведен пример того, как одна фотография выглядит для другого экрана ширина.

            

Вот ссылка на весь код https://github.com/tomik23/photoBlog

PS. Очень важная фотография, экспортированная из фотошопа, оптимизирована с помощью https://tinyjpg.com/К сожалению, фотошоп не подходит для оптимизации фото. Для своих нужд я подготовил библейский вариант для создания сразу нескольких фото в разных разрешениях и форматах и ​​называется резкие изображения на моем гитхабе


В настоящее время Google рекомендует, чтобы фотография была размером около 200 КБ, поэтому я знаю что этого действительно мало 🙂 Я тоже занимаюсь фотографией. У меня есть веб-сайт, подготовленный так, что он проиндексирован и имеет даже 80 изображений на странице, и сайт работает очень быстро. На https://developers.google.com/speed/pagespeed/insights/он 100/100, и он проиндексирован Google;) Я использую несколько размеров одного и того же изображения в зависимости от ширины экрана.

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

Ниже приведен пример того, как одна фотография выглядит для другого экрана ширины.

              

Вот ссылка на весь код https://github.com/tomik23/photoBlog

PS. Очень важная фотография, экспортированная из фотошопа, оптимизирована с помощью https://tinyjpg.com/К сожалению, фотошоп не подходит для оптимизации фото. Для своих нужд я подготовил библейский вариант для создания сразу нескольких фото в разных разрешениях и форматах и ​​называется резкие изображения на моем гитхабе

Оцените статью
techsly.ru
Добавить комментарий