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

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
mahmutxd07

mahmutxd07

Decipat
Katılım
4 Kasım 2022
Mesajlar
1.108
Çözümler
1
Daha fazla  
Cinsiyet
Erkek
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?
1674068770908.png
 
Çözüm
Kxaan
mahmutxd07 dedi:
Hocam next.js ile eklediğimiz fotoğraflarda net bir width ve height değerleri vermemiz gerekiyordu değil mi?
Genişletmek için tıkla...
Otomatik ayarlıyor diye biliyorum. Bu arada sorununuz çözüldü mü?
nextjs.org

Optimizing: Images | Next.js

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

Edit: "Next.js will automatically determine the width and height of your image based on the imported file". Evet otomatik ayarlıyormuş.
Tarihe göre sırala Puana göre sırala
TinyPNG ve react-optimized-image npm paketini kullanmayı deneyebilirsiniz. Next.js üzerinde halihazırda resim optimizasyonu var.
www.npmjs.com

react-optimized-image

React component for serving optimized images.. Latest version: 0.4.1, last published: 4 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 www.npmjs.com

TinyPNG – Compress WebP, PNG and JPEG images intelligently

Free online image compressor for faster websites! Reduce the file size of your WEBP, JPEG, and PNG images with TinyPNG’s smart lossy compression engine.
tinypng.com tinypng.com
 
Artı 0 Eksi
Kxaan dedi:
TinyPNG ve react-optimized-image NPM paketini kullanmayı deneyebilirsiniz. Next.js üzerinde halihazırda resim optimizasyonu var.
www.npmjs.com

react-optimized-image

React component for serving optimized images.. Latest version: 0.4.1, last published: 4 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 www.npmjs.com

TinyPNG – Compress WebP, PNG and JPEG images intelligently

Free online image compressor for faster websites! Reduce the file size of your WEBP, JPEG, and PNG images with TinyPNG’s smart lossy compression engine.
tinypng.com tinypng.com
Genişletmek için tıkla...

Hocam next.js ile eklediğimiz fotoğraflarda net bir width ve height değerleri vermemiz gerekiyordu değil mi?
 
Artı 0 Eksi
mahmutxd07 dedi:
Hocam next.js ile eklediğimiz fotoğraflarda net bir width ve height değerleri vermemiz gerekiyordu değil mi?
Genişletmek için tıkla...
Otomatik ayarlıyor diye biliyorum. Bu arada sorununuz çözüldü mü?
nextjs.org

Optimizing: Images | Next.js

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

Edit: "Next.js will automatically determine the width and height of your image based on the imported file". Evet otomatik ayarlıyormuş.
 
Artı 0 Eksi
Çözüm
Kxaan dedi:
Otomatik ayarlıyor diye biliyorum. Bu arada sorununuz çözüldü mü?
nextjs.org

Optimizing: Images | Next.js

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

Edit: "Next.js will automatically determine the width and height of your image based on the imported file". Evet otomatik ayarlıyormuş.
Genişletmek için tıkla...

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.
 
Artı 0 Eksi

Benzer konular

mahmutxd07
  • Çözüldü
Çözüldü  React ile slider nasıl yapılır?
2
Mesaj
11
Görüntüleme
585
oynozan
oynozan
mahmutxd07
  • Çözüldü
Çözüldü  React ile Sayfayı bölme işlemi nasıl yapılır?
Mesaj
8
Görüntüleme
478
RaSGooL
RaSGooL
Jarvis0
  • Soru
React ile API çekme
Mesaj
3
Görüntüleme
1B
Jarvis0
Jarvis0
B
React ile if yazamamak
Mesaj
3
Görüntüleme
353
BreaKSooN05
B
Speste
React ile JSON apisi yapıp nasıl sitede döndürülür?
Mesaj
4
Görüntüleme
97
bitwise
bitwise

Yeni konular

Yeni mesajlar

Geri
Yukarı