Optimizing image loading on STM32F407 embedded web servers for product-style pages

[robert3]

ST moderator: updated the title with the MCU part number.

I am working on an embedded web interface hosted on an STM32-based system using lwIP. The interface serves basic HTML pages along with multiple product images for browsing and preview.

On pages that contain several high-resolution images, similar in structure to pages like  this:

I notice slower load times and occasional rendering delays when everything is served directly from the MCU web server.

For those with experience building embedded web servers on STMicroelectronics platforms, what techniques have you found most effective for improving image delivery and overall page responsiveness?
Examples could include compression approaches, external memory usage, filesystem choices, or caching strategies.
Looking for practical guidance based on real implementations.

[Andrew Neil]

---

@robert3 wrote:

I am running into issues with slow image load times when displaying multiple images on a single page..

---

So everything is fine with just a single image?

When you say, "running into" - does that mean this is a new issue? ie, you once had faster load times?

If so, what have you changed?

---

@robert3 wrote:

the load time can reach 3-6 seconds.

---

Is that per image, of for the whole page?

---

@robert3 wrote:

I have done some profiling

---

So what did you learn from that?

There's no point trying to "optimise" LwIP if it's not the bottleneck ...

Have you tested the performance of your ethernet?

What PHY are you using?

Where are you storing the images?

Again, none of this seems well-suited to your task - so what drives the choice of microcontroller + LwIP?

PS:

You also haven't said what browser you're using to test this, and on what platform.

You might want to look into any performance tricks that the browser uses, and make sure that your system supports those...

[TDK]

I don't share the opinion that you're using the "wrong" chip for this. It can be fine for a simple webpage.

I think you're trying to optimize the wrong thing though. You should focus on making the assets fewer and smaller in size rather than trying to brute force some LWIP improvement. I don't think you will find one, unless your implementation is done poorly. Even so, 3-6 seconds seems like a long time.

These are larger than the internal flash, so they must be being stored on some external memory. That could also be a bottleneck.

[Andrew Neil]

---

@TDK wrote:

It can be fine for a simple webpage..

---

Sure.

But I'm not sure that what @robert3 is describing is a simple webpage?

The example shown certainly isn't! 

He talks about "multiple product images", and "pages that contain several high-resolution images". The one in the example also scales itself to fit the browser window. It is an e-commerce site.

PS:

---

@TDK wrote:

You should focus on making the assets fewer and smaller in size .

---

Indeed - which is what the example in the OP actually does.

The images in the OP are not high-resolution - they are just thumbnails!
If you want higher resolution, you click the thumbnail and it takes you to a page with just one image, at higher resolution.