Photoshop ile nasıl kaliteli mockup hazırlanır

https://www.freepik.com/premium-psd/...p_39280102.htm örneğin bu tasarımı indirdimve photoshop ile açtım, ardından sitemden öğeyi denetle kısmından ekran fotoğrafı yakalama özelliğiyle sitemin görüntüsünü indirdim, sitemde mockup ı 500 genişlikte kullanıyorum diye bu boyuta indirip png çıktı aldım ama görüntüdeki site resmen belli bile olmuyor, orjinal boyutta çıktı alırsamda normalde çok net ama siteye atınca 500 küsüre düşürdüğü için yine kalitesiz kalıyor ekstradan bi de 4.5mb gibi bir boyutu oluyor. bu sorunu nasıl çözüyorsunuz şuanki durum aşağıdaki gibi baya bi çamurlaşma var ama orjinalde ss ler baya kaliteli zaten direkt tarayıcının verdiği ssler

Webp kaydetmeyi dene. Ama kalite ayarını yüksek tut. Bu şekilde sorunu çözebilirsin.
ama 500px çözünürlük çok küçük. Bunu da büyüt biraz. 1280x720 felan kullan. 16:9 oranına sadık kal. Ya da kare kullanmaya özen göster. Ya da 4:3 oranını tercih et. İhtiyacın olduğu alana göre.

deniyim hocam teşekkürler, web siteden peki kaça kaç resim indiriyim