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.

[mƎALLEm]

Hello,

What STM32 part number are you using? 

[robert3]

I am using the STM32F4 series. It’s been great, but I am running into issues with slow image load times when displaying multiple images on a single page.

Would appreciate any STM32F4 specific suggestions on improving this.

[mƎALLEm]

---

@robert3 wrote:

I am using the STM32F4 series. It’s been great, but I am running into issues with slow image load times when displaying multiple images on a single page.

Would appreciate any STM32F4 specific suggestions on improving this.

---

Hello,

You still need to provide the part number: How to write your question to maximize your chances to find a solution

[Andrew Neil]

Is a microcontroller really an appropriate platform for this type of application?

Remember that the "Lw" in "LwIP" stands for Lightweight: it is targetted and optimised for low resources - not high performance!

 

---

@robert3 wrote:

 I notice slower load times .

---

Slower than what?

What profiling/debugging have you done to find what's going on?

LwIP Debugging & diagnostics

[robert3]

Hi @Andrew Neil,

You’re right, LwIP is lightweight and might not be the best for high-performance tasks.

By "slower," I mean delays when loading several high-res images. I have done some profiling, but looking for suggestions on optimizing memory or using external resources like flash or SD.

[TDK]

How large are the images? They don't look like they need to be large files. How long does the page take to load?

Easiest approach would be to use smaller sized images. Not many knobs on the STM32F4 in terms of increasing speed.

[robert3]

Hi @TDK ,

The images are about 500KB-1MB each, and the load time can reach 3-6 seconds.

I’m looking into compression, but any tips on improving LwIP’s handling of larger files would be helpful without losing quality.

[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...

[mƎALLEm]

As others said, may be STM32F407 is not the right MCU for that purpose. You need something more performant. STM32H7 or STM32N6 or even STM32MPx series.