Çözüldü React ile resim optimizasyonunu nasıl yaparım?

249873 · 18 Ocak 2023

1920x1080 resimler kullanıyorum. Resim boyutları 1-3MB arası değişiyor. Benim internetim hızlı olduğu için çok sorun yaşamadım ama telefonda mesela biraz geç geliyor. Bunu daha optimize şekilde nasıl yaparım?

Mesela Instagram da tak diye resimler geliyor. Veya dizi film sitelerinde de bu ön resimler tak diye yükleniyor.

> 3G Fast görüntüsü böyle geliyor.
> UseEffect kullanmadım, veriyi useEffect için de alsam daha mı doğru olur?

kaan.w · 18 Ocak 2023

Silinen üye dedi:
Hocam next.js ile eklediğimiz fotoğraflarda net bir width ve height değerleri vermemiz gerekiyordu değil mi?

Otomatik ayarlıyor diye biliyorum. Bu arada sorununuz çözüldü mü?

Optimizing: Images | Next.js

Optimize your images with the built-in `next/image` component.

nextjs.org

Edit: "Next.js will automatically determine the width and height of your image based on the imported file". Evet otomatik ayarlıyormuş.

kaan.w · 18 Ocak 2023

TinyPNG ve react-optimized-image npm paketini kullanmayı deneyebilirsiniz. Next.js üzerinde halihazırda resim optimizasyonu var.

react-optimized-image

React component for serving optimized images.. Latest version: 0.4.1, last published: 5 years ago. Start using react-optimized-image in your project by running `npm i react-optimized-image`. There are 4 other projects in the npm registry using react-optimized-image.

www.npmjs.com

TinyPNG – Compress AVIF, WebP, PNG and JPEG images

Free online image optimizer for faster websites! Reduce the file size of your AVIF, WEBP, JPEG and PNG images while preserving the image quality.

tinypng.com

249873 · 18 Ocak 2023

kaan.w dedi:
TinyPNG ve react-optimized-image NPM paketini kullanmayı deneyebilirsiniz. Next.js üzerinde halihazırda resim optimizasyonu var.

react-optimized-image

React component for serving optimized images.. Latest version: 0.4.1, last published: 5 years ago. Start using react-optimized-image in your project by running `npm i react-optimized-image`. There are 4 other projects in the npm registry using react-optimized-image.

www.npmjs.com

TinyPNG – Compress AVIF, WebP, PNG and JPEG images

Free online image optimizer for faster websites! Reduce the file size of your AVIF, WEBP, JPEG and PNG images while preserving the image quality.

tinypng.com

Hocam next.js ile eklediğimiz fotoğraflarda net bir width ve height değerleri vermemiz gerekiyordu değil mi?

kaan.w · 18 Ocak 2023

Silinen üye dedi:
Hocam next.js ile eklediğimiz fotoğraflarda net bir width ve height değerleri vermemiz gerekiyordu değil mi?

Otomatik ayarlıyor diye biliyorum. Bu arada sorununuz çözüldü mü?

Optimizing: Images | Next.js

Optimize your images with the built-in `next/image` component.

nextjs.org

Edit: "Next.js will automatically determine the width and height of your image based on the imported file". Evet otomatik ayarlıyormuş.

249873 · 19 Ocak 2023

kaan.w dedi:
Otomatik ayarlıyor diye biliyorum. Bu arada sorununuz çözüldü mü?

Optimizing: Images | Next.js

Optimize your images with the built-in `next/image` component.

nextjs.org

Edit: "Next.js will automatically determine the width and height of your image based on the imported file". Evet otomatik ayarlıyormuş.

Next JS ile uğraşmadım hocam.

Attığınız React-optimized-image'i de çalıştıramadım. Ama dosya boyutlarını küçültünce sorun bir nebzede olsa çözüldü. Şimdi loading ekran yapınca her şey düzelir diye düşünüyorum. Sayfa hızlı geliyor. Resimler bir tık geç geldiği için tek tek yüklenmesinin görülmesi hoş olmuyor.

Çözüldü React ile resim optimizasyonunu nasıl yaparım?

Ayrıntılı düzenleme

249873

Kilopat

kaan.w

Optimizing: Images | Next.js

kaan.w

Megapat

react-optimized-image

TinyPNG – Compress AVIF, WebP, PNG and JPEG images

249873

Kilopat

react-optimized-image

TinyPNG – Compress AVIF, WebP, PNG and JPEG images

kaan.w

Megapat

Optimizing: Images | Next.js

249873

Kilopat

Optimizing: Images | Next.js

Benzer konular