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

muneeb qadar answered on November 14, 2017 09:17

Playing around with media queries is one of the main responsibilities of responsive web designers. One of the biggest issues with images in media queries is browser compatibility. They don’t work on every browser as browsers tends to reload all the assets. The best way to resolve this problem is to add a smaller version of the image and then replace it with high resolution version if the screen space allows you to because media query is matched using match media.

0 votesVote for this answer Mark as a Correct answer

Lee Sharleen answered on December 20, 2017 07:33

Responsive web design is always been a tricky subject. There are so many variables that you have to consider and take into account while changing a single line of code. This is mainly due to the reason that there are so many browsers and platforms and as the mobile internet is taking on the desktop this has become even more challenging. The key to image size is first you have to try it on smaller version and then gradually tick all the boxes.

0 votesVote for this answer Mark as a Correct answer

Bilal zaidi answered on January 2, 2018 12:31

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation by Team KvTech.

0 votesVote for this answer Mark as a Correct answer

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