How to reduce image HEADERS ? Tips on faster image transfers.

[stevieosaurus]

I notice every image (jpg, gif), no matter how small is 575 bytes larger when transferred, this due to OLS adding headers to it. Might not seem a lot, but it adds up when you have lots of small images.
Is there any way of reducing the header size being added, dare I ask even removing headers from image transfers?

 

[stevieosaurus]

While on the subject: any tips for faster image transfers under OLS would be greatly appreciated.
As you can see, they all take way too long to transfer (see the turtle next to each). What am I doing wrong? (default OLS config)



OLS 1.7.19 on Alma Linux 9.4 x64
no cookies, all static content put on a separate subdomain

 

[LiteCache]

It's the nature of every HTTP request that a response header must be added, so you can't request a source without a response. If you want images to be loaded faster optimize images or use a better image type like webp or much better use avif. avif images are up to 50% smaller in size than webp images.

 

[stevieosaurus]

I understand. They are all small (PNG) images however, so converting them to AVIF won't help much (or at all). As far as image optimization goes, I found a solution in either to:

1. merge them all into 1 big PNG image, then display them as sprites, with CSS offset & slicing - this way only 1 HTTP request & header is being generated and received.
2. scrape them completely and replace them with SVG vector images (or fonts) instead.

I am still open to header, caching and web server optimization suggestions, if anybody is willing to share their wisdom. Much appreciated.

 

[LiteCache]

png images are bigger than jpg, jpg images are bigger than webp and webp images are bigger than avif images, so png images are not a good choice.

Compare the difference:
https://www.cachecrawler.com/WP-Plu...e-Conversion-for-LiteSpeed-LScache::6574.html

I am still open to header, caching and web server optimization suggestions, if anybody is willing to share their wisdom. Much appreciated.

Images are cached by the browser, so the only important thing is to set correct TTL for cache-control. Headers can't be removed, because no headers no response, meaning there is nothing you can optimize at the server.

 

[LiteCache]

and replace them with SVG vector images

svg is not an image, it's a document.