What is the correct rule for images being the correct size?
I always find it confusing as to how to tackle images.
I have imageGen installed and i pass in the width and height or just the width for the image. Usually a large image and i try to reduce it to the correct size.
On some sites i have seen no width or anything as such passed in and the image is displayed perfectly without it looking squashed/stretched etc.
Is there a rule i can follow so images always look perfect? What do you guys do? Do you get the correct image size from the beginning and advise your client to use those sizes or get the largest image and resize it using imageGen?
If I understand your question correctly, you're asking for some advice about serving images on the frontend - to your web visitors.
First and foremost is using the right image format. I often see websites using PNGs for every image on the site. A good rule of thumb is for photos + text use PNG, transparency use PNG, most photos will be JPEG, and any other file should be SVG/GIF.
You could also take a look at the HTML Picture element. It allows you to offer the browser a selection of images appropriately sized for the breakpoint based on a media query.
Based on the breakpoints in your frontend framework, you'll want to pick some sizes that make sense. Every now and again I will research which screen resolutions are the most popular, and optimize our media strategy for these breakpoints. If you aren't reporting on this information (from a source like GA) then you can use this tool. I sort the data and pick some of the top resolutions that fit within my breakpoints:
360x640 (xs)
1366x768 (m)
1920x1080 (l)
So for the (xs) breakpoint I know the max image I need to serve is 620px. That's because small mobile devices usually have a higher DPI so I multiply the width of the screen by 2. For desktop browsers I simply use the width of the next breakpoint. For the (m) breakpoint I'll serve a max of 1920px, and for the (l) breakpoint I'll serve a max of 2040px.
This is just one example, used in a responsive framework in which I serve images based on the breakpoint of the browser. Hope this helps! Make sure you read about the next-gen image formats too!
Here is a screen capture of some of our current values - this is on the Image Cropper property in Umbraco. Obviously our solution uses the default and OOTB solution Umbraco provides. Maybe useful as a starting point / talking point.
I apologize for not following this conversation more closely.
Rendering media can be one of the most complicated parts of FED. This question almost always comes up in a project because the client doesn't have a graphic designer on staff (or one who has been designing for the web).
There's no 1 single method that's going to work everytime.
We design front end components in one of two ways:
The media is important, and the whole image needs to be shown.
This approach is the simplest as you don't need to do anything to the image or your HTML (generally). As Benjamin pointed out, you can even use a <picture> element to provide appropriately cropped images between breakpoints. That way you can (try) to provide the best image to fit the screen and intended design. The crop itself may cut off a part of the image, but the content author can use the media center to adjust the crops his/herself.
Here is a codepen of Benjamin's example using the picture element and source sets.
The content is important, and the image can scale as necessary.
With a bit of CSS like object-fit: cover you can tell an image to fill all of the available space (with respect to it's original proportions) but cut off some of the width / height. The goal here from a design aspect is to fill the container with bold and meaningful imagery.
As an example, let's say you wanted to fill the entire screen with an image, treat it like a background. Some of it may be cut off client-side (by the browser). Here's a codepen.
What is the correct rule for images being the correct size?
I always find it confusing as to how to tackle images.
I have imageGen installed and i pass in the width and height or just the width for the image. Usually a large image and i try to reduce it to the correct size.
On some sites i have seen no width or anything as such passed in and the image is displayed perfectly without it looking squashed/stretched etc.
Is there a rule i can follow so images always look perfect? What do you guys do? Do you get the correct image size from the beginning and advise your client to use those sizes or get the largest image and resize it using imageGen?
Hi J,
If I understand your question correctly, you're asking for some advice about serving images on the frontend - to your web visitors.
First and foremost is using the right image format. I often see websites using PNGs for every image on the site. A good rule of thumb is for photos + text use PNG, transparency use PNG, most photos will be JPEG, and any other file should be SVG/GIF.
You could also take a look at the HTML Picture element. It allows you to offer the browser a selection of images appropriately sized for the breakpoint based on a media query.
Based on the breakpoints in your frontend framework, you'll want to pick some sizes that make sense. Every now and again I will research which screen resolutions are the most popular, and optimize our media strategy for these breakpoints. If you aren't reporting on this information (from a source like GA) then you can use this tool. I sort the data and pick some of the top resolutions that fit within my breakpoints:
So for the (xs) breakpoint I know the max image I need to serve is 620px. That's because small mobile devices usually have a higher DPI so I multiply the width of the screen by 2. For desktop browsers I simply use the width of the next breakpoint. For the (m) breakpoint I'll serve a max of 1920px, and for the (l) breakpoint I'll serve a max of 2040px.
This is just one example, used in a responsive framework in which I serve images based on the breakpoint of the browser. Hope this helps! Make sure you read about the next-gen image formats too!
Here is a screen capture of some of our current values - this is on the Image Cropper property in Umbraco. Obviously our solution uses the default and OOTB solution Umbraco provides. Maybe useful as a starting point / talking point.
Thanks Mark, great set of info and i will look into the links and have a play around.
One common problem i come across is i have an image which is 2133x1600. Applying this to my site has the bottom few inches missing until i scroll.
On a xs device it looks great.
So how should i go about this image looking correct on both device?
Thanks
I apologize for not following this conversation more closely.
Rendering media can be one of the most complicated parts of FED. This question almost always comes up in a project because the client doesn't have a graphic designer on staff (or one who has been designing for the web).
There's no 1 single method that's going to work everytime.
We design front end components in one of two ways:
This approach is the simplest as you don't need to do anything to the image or your HTML (generally). As Benjamin pointed out, you can even use a
<picture>element to provide appropriately cropped images between breakpoints. That way you can (try) to provide the best image to fit the screen and intended design. The crop itself may cut off a part of the image, but the content author can use the media center to adjust the crops his/herself.Here is a codepen of Benjamin's example using the picture element and source sets.
With a bit of CSS like
object-fit: coveryou can tell an image to fill all of the available space (with respect to it's original proportions) but cut off some of the width / height. The goal here from a design aspect is to fill the container with bold and meaningful imagery.As an example, let's say you wanted to fill the entire screen with an image, treat it like a background. Some of it may be cut off client-side (by the browser). Here's a codepen.
BUMP
You could do something like this
is working on a reply...