Dynamic Image Sizes - Responsive Design?

Carly Stemmer asked on November 24, 2015 17:05

We are in the process of redesigning our website/moving to a responsive design with Kentico. I have seen a few websites where the images seem to have a number of different set sizes based on screen size, where some have image sizes set for a desktop, mobile and tablet.

One example of where I have seen more dynamic/fluid images is - http://www.wired.com/category/magazine/. As your browser screen size shrinks, the images rotate position and change size several times.

I would love any insight on how this works...are a series of different image sizes uploaded or are there settings in the code that allows these images to change sizes multiple times? This seems to be more advanced that responsive design (allowing for only a desktop, tablet and mobile design).


Recent Answers

Charles Matvchuk answered on November 24, 2015 18:56

You can achieve that effect with a responsive framework. Bootstrap will do that exactly, you just need to determine your grid breakpoints and decorate your images or divs with the proper classes. Very simple to implement. www.getbootstrap.com

1 votesVote for this answer Mark as a Correct answer

Carly Stemmer answered on November 24, 2015 22:37


A semi-related question...when creating a responsively designed page, is it a best practice to upload multiple sizes/shapes of the same image so it displays properly on a given screen size? Or is just one image used, and the image proportions change based on the screen size?

0 votesVote for this answer Mark as a Correct answer

Charles Matvchuk answered on November 25, 2015 03:50

Carly, there really isn't a best practice. You need to look at the entire scope of what you are trying to accomplish as well as the resources that you have and define what your end result needs to be.

For instance, if your layout will accept dynamically resized images on the fly as the layout responds to different screen sizes, as well as "Properly" prepping the image for web (size, pixilation and color) then one image would be the way to go.

On the other hand, if your images are significantly larger (size and loading), then you may want to think about using multiple images depending on size, for different viewports. Remember you will not really achieving smooth scaling this way since you are basically determining viewport, etc. and selecting the correct image. Definitely more work this way. Also, this is considered "Adaptive" not "Responsive". The first example is responsive.

Personally, I prefer responsive whenever possible, this way I have smooth scaling and 1 image.

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.