Response is below:
On 8/16/15 9:09 AM, Tom Livingston wrote:
> Yep. Media queries.
>
> On Sunday, August 16, 2015, Crest Christopher
<[email protected]>
> 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
<[email protected]
>> <javascript:_e(%7B%7D,'cvml','[email protected]');>> 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<[email protected]>:
>>>>
>>>> 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! :(
