November 12, 2014 at 5:45 pm #188192
Anyone have any insights as to why this would be happening? I need the images to scale like this for fluid responsive design…
Thanks in advance :DNovember 12, 2014 at 6:04 pm #188194
Well rastered images when scaled in either direction are going to have some anomalies. When you make them bigger, it’s obvious – things get pixelated quickly. When you shrink them down, whatever is rendering it has to guess on what pixel goes where.
When you come across things like text when you’re dealing with thin lines going every which way, things get messed up quickly.
How you save out the image from the original matters too.
If you want to do it right, use
srcsetand picturefill.November 12, 2014 at 6:19 pm #188195
Thanks for that insight. I am using picturefill but it’s not practical to have a different size image generated for every image size required inside a fluid width element. Is there any best way you can advise on saving out the image?November 12, 2014 at 6:27 pm #188196
Under normal circumstances you’d have one for each break point, and normally you should only have a couple. Then, you’d need a few for high dpi screens.
As for creating them, you can automate that if that’s not the case for you:
As for saving them out, if you’re using Photoshop just save for web and adjust the quality. If you’re saving out a .jpg make sure the progressive box is checked. If you’re not using Photoshop I’m afraid I’m not sure!
For me personally, I try to never put text in raster images I always try to keep it live. I understand you can’t always, but you might want to try.November 15, 2014 at 11:33 pm #188405
Text like that in images is simply not going to work, end of story. If you can’t actually build a layout combining images & text (which wouldn’t be that hard) you’re going to have the problem whatever responsive image “solution” you try.November 15, 2014 at 11:42 pm #188406
@deeve007 the images are screenshots of websites, for a design agency portfolio, so they kinda have to be images. Thanks for the help guys :)November 15, 2014 at 11:47 pm #188407
That’s simple then, simply have a max sized image for different screen sizes.
Smallest image 300px wide
Screens 600px to 800px get a 550px image.
800 to 1200 = 750px
Have 4 or 5 different versions for each.November 15, 2014 at 11:54 pm #188408
I do have an arrangement like that. But it doesn’t help the fact that an image at any size scaled down even 2px smaller than its natural size gets blurry/defected.November 15, 2014 at 11:56 pm #188409
But don’t scale it down. Once a screen size gets to a certain size, display the next image down. The image should always be at 100%.November 16, 2014 at 12:00 am #188410
Ah right, that’s not really an option with this design unfortunately as the layout is fluid, meaning the image needs to scale px for px.November 16, 2014 at 12:03 am #188411
Then you have what we call a design challenge. If you need to show that image within a layout, and at a quality that responsive images do not provide, then you need to revise the layout to address that technical limitations.
Or change the image to allow for the technical limitations that exist.November 16, 2014 at 12:10 am #188412
Yes indeed. Thanks :)November 16, 2014 at 12:31 am #188413
you could combine the breakpoint approach with images that never scale. it would take some planning and design work. something like so:November 16, 2014 at 2:15 pm #188452
Good suggestion, might be a good one for other cases but cropping isn’t really an option with this design. I think we might just have to put up with slightly blurry images.July 18, 2016 at 12:49 pm #243683
To anyone coming across this same problem years later, this is how you can fix it:
image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */ image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
You must be logged in to reply to this topic.