Response is below: On 8/16/15 9:09 AM, Tom Livingston wrote: > Yep. Media queries. > > On Sunday, August 16, 2015, Crest Christopher <crestchristop...@gmail.com> > wrote: > >> If there was an intelligent method that would only feed the large image; >> when it was between the threshold (small <-> medium), typically on a >> phablet or tablet device, load it into the browsers cache and the user is >> good, unless there is a change to the image, or the user clears there >> cache, which I know some people are notorious for doing cache cleaning, >> upon browser close, which I do on my desktop browsers but you can't assume >> all, or you have to atleast hope, not all. >> >> Tom Livingston wrote: >> >> Don't use a huge image for mobile users just to avoid image degradation. >> There are other ways. >> >> >> >> On Sunday, August 16, 2015, Crest Christopher <crestchristop...@gmail.com >> <javascript:_e(%7B%7D,'cvml','crestchristop...@gmail.com');>> wrote: >> >>> I understand sharpening can or will pixelate an image; it sounds as if >>> you're saying, that I should display the largest image at the inbetween >>> points, as in between, small and large ? >>> >>> Another idea that has come to mind is; if retina display requires an >>> image double or triple it's actual size, if it was possible to use this >>> technique on non-retina devices, basically eliminating pixelation since if >>> you take an image and scale it down, you won't loose resolution which will >>> retain quality and you still only need one image. >>> >>> MiB wrote: >>> >>>> aug 16 2015 05:23 Crest Christopher<crestchristop...@gmail.com>: >>>> >>>> The problem is when those images are scaled; when an image is scaled >>>>> between small and medium there is pixelation, how can one sharpen the >>>>> images when, and only when there is a threshold between a small and medium >>>>> image ? I've been searching online and the most I found dealt with the img >>>>> tag, not background images. >>>>> >>>> >>>> I’m not sure I understand the problem nor why you think some sharpening >>>> will work, but the problem is interesting. I’m thinking that increased >>>> sharpening will only make pixelation worse. What you could do is move the >>>> break points, so that the largest an image is shown is at a stretch level >>>> where pixelation isn’t very noticeable. The largest image is typically >>>> beyond your control as you never can control how big display users will >>>> show your design on, unless you use a max size which I wouldn’t do as a >>>> designer. >>>>
I imagine the pixelation is caused by stretching the image. I suggest using media queries to prevent that happening. For example, assuming a break point of, say, min-width: 400px, use an image 400px wide below that break point, and a larger image when that MQ kicks in. FWIW I use four sizes of image on my old blog. The WordPress theme has a maximum container width of 1280px, otherwise I would need additional sizes. Retina was not considered at the time, or even larger images would be needed. As for caching the image, the downside is that if you open a page in portrait mode, then switch to landscape, you get stretching again! :( -- Cordially, David ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
