Skip to main content

Forums

This topic contains 20 replies, has 10 voices, and was last updated by  pedro380085 2 years, 3 months ago.

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #188192

    sheadawson
    Participant

    Anyone have any insights as to why this would be happening? I need the images to scale like this for fluid responsive design…

    http://jsfiddle.net/ygutz4wm/2/

    Thanks in advance :D

    #188194

    shaneisme
    Participant

    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 srcset and picturefill.

    #188195

    sheadawson
    Participant

    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?

    #188196

    shaneisme
    Participant

    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:

    http://addyosmani.com/blog/generate-multi-resolution-images-for-srcset-with-grunt/

    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.

    #188405

    deeve007
    Participant

    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.

    #188406

    sheadawson
    Participant

    @deeve007 the images are screenshots of websites, for a design agency portfolio, so they kinda have to be images. Thanks for the help guys :)

    #188407

    deeve007
    Participant

    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
    …etc

    Have 4 or 5 different versions for each.

    #188408

    sheadawson
    Participant

    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.

    #188409

    deeve007
    Participant

    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%.

    #188410

    sheadawson
    Participant

    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.

    #188411

    deeve007
    Participant

    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.

    #188412

    sheadawson
    Participant

    Yes indeed. Thanks :)

    #188413

    __
    Participant

    you could combine the breakpoint approach with images that never scale. it would take some planning and design work. something like so:

    http://codepen.io/adrian-enspired/pen/VYwGBR

    #188452

    sheadawson
    Participant

    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.

    #243683

    scragz
    Participant

    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) */
    
Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star