Re: [css-d] Adaptive Background images ?
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. /MiB __ 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/
Re: [css-d] Adaptive Background images ?
I usually have my smaller images at 600 and 800 wide approximately. I use 600 wide for mobile and at around 600 breakpoint, switch to the next size image. This way, usually, the image is never bigger than its natural size. This is design dependent obviously, and isn't taking background-size into account such as background-size:cover. On Sunday, August 16, 2015, MiB digital.disc...@gmail.com wrote: aug 16 2015 05:23 Crest Christopher crestchristop...@gmail.com javascript:;: 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. /MiB __ css-discuss [css-d@lists.css-discuss.org javascript:;] 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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ 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/
Re: [css-d] Adaptive Background images ?
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 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 Christophercrestchristop...@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. /MiB __ 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/ __ 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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ 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/
Re: [css-d] Adaptive Background images ?
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 Christophercrestchristop...@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. /MiB __ 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/ __ 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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ 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/
Re: [css-d] Adaptive Background images ?
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 Christophercrestchristop...@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. /MiB __ 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/ __ 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/
Re: [css-d] Adaptive Background images ?
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 mailto: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 Christophercrestchristop...@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. /MiB __ 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://evolt.org -- http://www.evolt.org/help_support_evolt/ __ 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://evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com http://medialogic.com #663399 __ 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/
Re: [css-d] Adaptive Background images ?
I know; but do what retina image do for retina display. Tom Livingston wrote: Yep. Media queries. On Sunday, August 16, 2015, Crest Christopher crestchristop...@gmail.com mailto: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 Christophercrestchristop...@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. /MiB __ 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://evolt.org -- http://www.evolt.org/help_support_evolt/ __ 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://evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com http://medialogic.com #663399 -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com http://medialogic.com #663399 __ 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/
Re: [css-d] Adaptive Background images ?
Hello again, Reply is below thread: On 8/16/15 1:50 PM, Crest Christopher wrote: 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 Christophercrestchristop...@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! :( Before automated tools like Grunt, Gulp, ImageMagic, etc. came out, I used IrfanView. It will bulk resize/rename images nicely. http://www.irfanview.com HTH -- 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/
Re: [css-d] Adaptive Background images ?
What is desperately needed, I'm strictly a Photoshop guy when it comes to anything photo or web graphics is the ability to proportionally scale the layers in a Photoshop document to whatever size is needed, if I found such a tool I'd buy in a heart beat, it would save me so much time. Christopher David Hucklesby wrote: Hello again, Reply is below thread: On 8/16/15 1:50 PM, Crest Christopher wrote: 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 Christophercrestchristop...@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! :( Before automated tools like Grunt, Gulp, ImageMagic, etc. came out, I used IrfanView. It will bulk resize/rename images nicely. http://www.irfanview.com HTH __ 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/
Re: [css-d] Adaptive Background images ?
Sorry. I don't understand your question. On Sunday, August 16, 2015, Crest Christopher crestchristop...@gmail.com wrote: I know; but do what retina image do for retina display. Tom Livingston wrote: Yep. Media queries. On Sunday, August 16, 2015, Crest Christopher crestchristop...@gmail.com javascript:_e(%7B%7D,'cvml','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 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 Christophercrestchristop...@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. /MiB __ 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/ __ 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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ 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/
Re: [css-d] Adaptive Background images ?
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 Christophercrestchristop...@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/
Re: [css-d] Adaptive Background images ?
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 Christophercrestchristop...@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/
Re: [css-d] Adaptive Background images ?
On Sun, Aug 16, 2015 at 4:50 PM, Crest Christopher crestchristop...@gmail.com wrote: 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 :-) Maybe you need to rethink how you are handling the situation? -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ 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/
Re: [css-d] Adaptive Background images ?
On Sun, Aug 16, 2015 at 5:29 PM, Tom Livingston tom...@gmail.com wrote: On Sun, Aug 16, 2015 at 4:50 PM, Crest Christopher crestchristop...@gmail.com wrote: 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 :-) Maybe you need to rethink how you are handling the situation? A link is always better when asking for help. -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ 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/
