0

enter image description here

Above image is a wireframe layout of my portfolio website. The navbar is at the bottom while the 2 images fill the remaining screen. The left and right picture will be contained in their own DIV (something like left picture DIV width set to 65% and right one set to 35%)

Based on this, I guess I need to prepare 3 different sets of images, one for large screens, one for mobile portrait and one for mobile landscape?

At first I was thinking just 2 sets would be enough, as large screens and mobile landscape can share the images, but then, some mobile landscape views (depending on device) have a very wide width to short height ratio, so the images won't look that good.

Improve this question
1
  • 1
    Just create two images one small for mobile ( max width: 600px & max-height:400) and another large for desktop. In landscape mode of mobile, you can set first image width to 65vw and height 100vh.
    – Jivan
    Commented Oct 16, 2015 at 5:54

3 Answers 3

Reset to default
1

Is this a good design ? Depends in what image you put there and what your requirements are.

Is this a good design methodology ? Yes and No.

NO - One approach is to use the same image , change the css properties (background-size,background-position etc) to make the same image fit into different dimensions. In this case you might have to make little sacrifices on the coverage of overall picture. A sample is https://www.uber.com/.

Careful selection of image is required in this case. Because even when a part of image is clipped of the image looks complete , at any point of time irrespective of any device.

YES - this depends on the requirement of the site. From your question you are building a portfolio. Speed and loading time is secondary to the UI of the site. You need to do a benefit analysis , what do you need here better looking site or faster site. If i'm making my portfolio i would go for looks and will use different images to make it look perfect.

Improve this answer
2
  • Tks for your reply. For the Uber site, I notice when I shrink the width, the header image is adjusted automatically such that regardless of how you shrink, the lady's face is always visible. How do they achieve this? Most of the other responsive sites with similar header images like this don't behave like Uber's.
    – Xeon
    Commented Oct 16, 2015 at 6:02
  • @Xeon as said in the answer , you can play around with background-size and background-position to achieve this. I cannot give a hard value , depends on the image size, screen size and others.
    – Sooraj
    Commented Oct 16, 2015 at 6:07
1

Normally we create different sized images on the basis of Responsive Breakpoints...

Step 1) First test by sqeezing your website from full desktop view up to iphone4 width of 320px at least

Step 2) Determine how many breakpoints you need

Step 3) Produce set of images (If needed) at least 2 or 3

Step 4) Only load one image for one breakpoint to optimize loading speed and time

Few things to consider

  • Apply responsive image method which loads only specific image for that specific break-point to optimize loading time e.g use PictureFill

  • What about Retina Images or @2x images, keep that in mind too. Use Retina.js for that

Improve this answer
1
  • Tks! Will look into those.
    – Xeon
    Commented Oct 16, 2015 at 8:26
1

You can use multiple breakpoints and images for your landing page, it's the common solution used nowadays. You can also use the srcset attribute to define the breakpoints instead of using CSS rules. This will be better for network usage.

In this example you can see breakpoints using srcset at 1024px and 2048px:

<img 
    srcset="https://s3-us-west-1.amazonaws.com/piio-test/blog/bird-square-1024w.jpg 1024w,
            https://s3-us-west-1.amazonaws.com/piio-test/blog/bird-square-2048w.jpg 2048w"
    sizes="(max-width: 1024px) 1024px, 2048px"
    src="https://s3-us-west-1.amazonaws.com/piio-test/blog/bird-square-2048w.jpg" id="bird" />

The thing is that it'll require maintenance and it'll be hard to scale the solution to work on every device.

I recommend you to read this article I wrote about using Responsive Images on your website -> https://medium.com/@nicolasbistolfi/how-to-use-optimized-responsive-images-aa6b9452e6ce

Improve this answer
3
  • could you copy and paste some the relevant information into your answer?
    – Mayo
    Commented May 24, 2018 at 15:20
  • I added an example on how to use srcet on an image with breakpoints
    – Nico Bistolfi
    Commented May 25, 2018 at 12:43
  • You're giving a development solution as opposed to a UX one.The question is not how to create a breakpoint but on the design scheme.
    – Mayo
    Commented May 25, 2018 at 12:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.