Page 1 of 1

Image in RWD

Posted: Wed May 08, 2019 10:55 pm
by petejos
Hi there,

What is the best suggestion to insert images for a RWD web pages and make they are able to display properly across all major devices? Much appreciated if I could get help? Thanks.

Re: Image in RWD

Posted: Wed May 08, 2019 11:41 pm
by crispy68
In regards to images themselves, here are a couple of my suggestions:

1. Only insert an image as big as it is needed in your largest breakpoint. In other words, if the image is not going to be larger than 600px wide, then make sure the image you use is around 600px wide. Dont insert the image at 1920px as this will be larger than needed and slow down load times.

2. Optimize the photo. Even if you insert the image at optimal size (height/width), you need to make sure the image is compressed as much as possible so that it loads quickly. Many programs can do this (photoshop) but there are free places online that will do the same.

Re: Image in RWD

Posted: Thu May 09, 2019 8:46 am
by petejos
Do I need to use layout grid when inserting image?

Re: Image in RWD

Posted: Thu May 09, 2019 8:54 am
by Pablo
Do I need to use layout grid when inserting image?
Yes, if you want to the image to be flexible.
But images can also have different (absolute) size in breakpoints.