David, your procedure is one extra image I'll have to create :-( I'll
already have an array of images one more set may cause insanity :-)
David Hucklesby wrote:
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! :(
______________________________________________________________________
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/
