Responsive

How responsiveness impacts the images?

Responsive web design resizes or changes the orientation of the window without losing content quality. Images scale responsively.

Background image

Depending of the settings, image used as background may be clipped. To cover the area with the background image and keep its aspect ration some part of the background image may be clipped.

Different images for different devices

A large image can be perfect on a big computer screen, but useless on a small device. Large images on small screens can make the user-experience worse by loading the page longer. For this reason, we use, we’ll use a scaled-down version of the image file, depending of the devices/breakpoints.

As we use different images depending on the device, it's also possible to display an image in a large device and hide it in a smaller screen.

On the other hand, when an image is scaled up above its natural dimensions, image quality is affected. Keep that in mind as you choose which image you’re going to use.

---

Our breakpoints

A breakpoint is the dimension at which a predetermined screen size range having a specific layout requirement switches to another range. At the given breakpoint, the layout adjusts to suit the screen size and orientation of the new range.

Width	Breakpoint Range (px)
small	0 - 640
medium	641 - 1024
large	1025 - 1440
xlarge	1441 - 1920
xxlarge	1921 +

Eventhough modern screens resolutions go far beyond the 2560px width, the browsers of those devices are "artificially blocked" to 2560px max.