Best export settings in Photoshop for web images on a gaming platform without losing quality?

[johndev123]

Hello,

I’m working on a gaming platform website where I use Photoshop to design graphics, banners, and game-related illustrations. Since the site has a lot of media, I need to make sure that my images:

• Load quickly on both desktop and mobile.

• Maintain sharpness and quality for gamers who notice even small details.

• Do not increase page load time or negatively impact performance scores.

My scenario:

• Most graphics are saved in PNG or JPEG format.

• File sizes are still large (sometimes 1–2 MB).

• I’ve tried the “Save for Web (Legacy)” option, but sometimes the images look blurry.

My questions:

👉 What are the best export settings in Photoshop to balance quality and file size for web use?
👉 Should I stick to JPEG/PNG, or is it better to export to WebP or SVG when possible?
👉 Are there Photoshop workflows or plugins that can help with automated optimization for multiple graphics?

Any recommended best practices or documentation would be really helpful.

Thanks in advance!

[creative explorer]

@johndev123 I save all my web images, whether for a client website or a tech blog, using the PNG24 format at the highest quality setting. Although, PNG8 supports a maximum of 256 colors, making it best for simple graphics, logos, and icons; I elect to use PNG24 because it supports up to 16 million colors, which is ideal for complex images and photographs where color fidelity is critical. After saving, I use a third-party optimization tool to significantly reduce the file size. This tool works by automatically stripping unnecessary metadata, intelligently reducing the number of colors in the image, and applying smart lossy compression techniques while preserving visual quality. This final step ensures the images are high quality but load quickly on the web. https://youtu.be/A6abu-ZW2UM?si=RRr7c_AlgrIJqroz