TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Adaptive Images in HTML

35 pointsby orofinoabout 13 years ago

8 comments

kijinabout 13 years ago
Urrggghhh, PHP?<p>But this is exactly the kind of thing that PHP is good at. Dump a file in a directory that does one specific thing, and you're good to go. No need to integrate it with the rest of your web site. It's just a little CGI-like script that does its own thing.<p>But if you use this on a smallish VPS, keep an eye on memory usage. Image processing in PHP tends to hog a lot of RAM, and even a small number of simultaneous requests can crash a server. You might need to warm your cache a little bit before going public with new images.
评论 #3873484 未加载
orofinoabout 13 years ago
I'm not terribly well versed with nginx, but the creator mentions only support for .htaccess, I was able to get this working with the following in my config for nginx:<p><pre><code> if ($request_filename !~* ai-cache) { rewrite \.(?:jpe?g|gif|png)$ /adaptive-images.php last; }</code></pre>
dmethvinabout 13 years ago
All of these adaptive image solutions are heroic but incredible hacks. They load two images, load no images when JavaScript is disabled, depend on userAgent sniffing, and/or only work with specific backend technologies.<p>What we need is the ability to tell the client what we have, then let the client choose the right one based on screen size and bandwidth. Browsers should be able to do that for us. Here's one solution along that line:<p><a href="http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/" rel="nofollow">http://www.alistapart.com/articles/responsive-images-how-the...</a>
评论 #3873429 未加载
评论 #3873309 未加载
评论 #3874375 未加载
评论 #3873140 未加载
dwdabout 13 years ago
This approach was also put forward by Stephanie Rieger. Specifics start at slide #83:<p><a href="http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server" rel="nofollow">http://www.slideshare.net/yiibu/adaptation-why-responsive-de...</a>
fppabout 13 years ago
Also have a look at the discussion reg. server-side vs client-side adaptive images hacks at:<p><a href="http://24ways.org/2011/adaptive-images-for-responsive-designs-again" rel="nofollow">http://24ways.org/2011/adaptive-images-for-responsive-design...</a>
huhtenbergabout 13 years ago
That lowercase /t/ in their choice for the body font is really annoying.
atjoslinabout 13 years ago
this is cool:)
goggles99about 13 years ago
Just in time for 4G to be everywhere in my area :/ Where were you 3 years ago? Now I would just be annoyed by this when I tried to zoom in on an image and got a pixellated mess.