I usually try to find solutions on my own, however for this particular case I don’t know what to search for to reach my goal.
Alright, so here’s the thing: I’m trying to find a server-side script (preferably in PHP) that crops an image (the background) down to the client’s screen resolution before being downloaded by its browser.
My goal is that the browser shouldn’t have to download parts of the image that won’t fit in its screen.
Ideally, if it could crop using center-top as origin, it would be perfect.
I’m not a big fan of asking for such things, but I don’t know how to code it myself and like I said, I don’t know what to search for.
Thanks a lot if you can help.
You can’t do it in a single step. Browser/window size data is NOT available in standard HTTP requests. It has to be retrieved using some Javascript and sent to the server. This means the user has to load a page from your site before you can know anything about the browser. The script COULD dynamically rewrite all image tags in the page to include the window specs as part of the image url
e.g. src="resizer.php?id=logo.jpg&x=1024&y=768".However, remember that mere browser size isn’t a good determination of the display environment. The user could resize/maximize their window and now they’ve got empty spaces around the edges of the background because it was resized only to the original window/desktop size. They can zoom the page in/out, which again invalidates the actual pixel sizes, etc…
Instead of worrying about offscreen image portions, try to simply reduce the filesize of the background to as small as possible by playing with compression levels. Find a compression level that leaves the background at a nice looking image quality, but also as small as possible a filesize.