I've been working on a new responsive website design and I have a gallery containing a grid of images which when the browser viewport is 768px or above spans 4 columns wide (so each image is about 25% of the viewport). Anything 767px or lower is only 1 column wide (making it full width at lesser resolutions).
The images at desktop size (over 768px) should be 220px wide (4 image columns).
Between 480px and 767px should be upto 420px wide (1 image column).
And mobile size (under 479px) should be upto 260px wide (1 image column).
I have three sources for each image. 220px, 260px and 420px.
As you can see from the above, the sizes don't follow the normal conventions of the smaller the viewport the smaller the image, so I've been researching and trying various options.
Following suggestions, I've been using Google Chrome in incognito mode and also inprivate browsing for internet explorer, with the browser viewports started small before loading the page, etc... to ensure any changes I've been making get updated.
The current code I've come to is the closest I've got to making it work and it is following an answer to someone's query (similar to mine) here on stack overflow. However, when trying to implement it I can't seem to get the browser to load the right images still, it always loads the larger 420px wide image.
my code is currently like so:
<img sizes="(min-width: 767px) 420px, 100vm"
srcset="images/thumbs/image_420.jpg 420w,
images/thumbs/image_260.jpg 260w,
images/thumbs/image_220.jpg 220w"
src="images/thumbs/image_220.jpg"
alt="example image"
/>
A second query whilst I'm on the subject. Would it be best to set the default img src in my scenario to the 260px image? As this would cover both desktop and mobile browsers in the event the srcset isn't understood and only the middle sized viewport (460-767px) would suffer. Or is it always best to set the default image to the smallest size?
Any suggestions would be appreciated, thank you.
-- EDIT --
Just a quick update, I thought I'd logically figured it out yesterday but it didn't work so I'm not sure I still understand the whole concept of the calculations. My latest edit looks like so:
<img sizes="(min-width: 460px) 420px, (min-width: 768px) 220px, 100vm"
srcset="images/thumbs/image_420.jpg 420w,
images/thumbs/image_260.jpg 260w,
images/thumbs/image_220.jpg 220w"
src="images/thumbs/image_260.jpg"
alt="example image"
/>
So in my mind I think that the sizes section I've listed states... if viewport is at least 460px then use the 420px image, else if viewport is at least 768px use the 260px image. Then the last 100vm means otherwise use whichever is best at full viewport width.
I've also amended the default file to be the 260px file as this fits most of the viewport sizes if something hasn't been recognised.
However, the above edit still loads only the 420px image.
Any suggestions would be very appreciated. Even if its just to correct my logic!
sizes is evaluated left-to-right. So the order is important. If the viewport is 1000px, then the first media condition (min-width: 460px) will match, and so that size 420px is chosen, and the rest of the sizes attribute is not evaluated at all.
Also, the unit should be vw, not vm.
So it should be:
<img sizes="(min-width: 768px) 220px, (min-width: 460px) 420px, 100vw"
srcset="images/thumbs/image_420.jpg 420w,
images/thumbs/image_260.jpg 260w,
images/thumbs/image_220.jpg 220w"
src="images/thumbs/image_260.jpg"
alt="example image"
/>
As for your second query, technically you can choose any image you like (even one not listed in srcset), but your reasoning makes sense to me. The only thing I would recommend is to put your chosen src image first in srcset, because older WebKit with partial x-only srcset implementation will pick the first item when it doesn't understand the descriptors.
Related
I am trying to implement a full screen responsive image solution with the following loose requirements
0-600px > displays small image
601-900px > displays medium image
901-2000px > displays large image
After a bit of digging, I decided to work with the dimensions for:
iphone 6 > 414x736
ipad > 768x1024
I created separate images for each screen size (art direction purposes) and used the following srcset code
<img src="/assets/images/414X736/artGallery.jpg"
srcset="/assets/images/414X736/artGallery.jpg 414w,
/assets/images/768x1024/artGallery.jpg 768w,
/assets/images/1920x1080/artGallery.jpg 1920w">
The images have the following CSS (so it behaves like background:cover)
img {
display:block;
height:100vh;
width:100vw;
object-fit:cover;
}
I sized my desktop monitor small, and resized until full screen, the images where substituted at the right place
However, on my phones and tablets, it consistently showed the 1920 image
Ideally, I would like to substitue the images when scaling the browser window from small to large and large to small
My understanding of srcset is that once it's loaded the largest image, it doesn't load smaller ones
Help and suggestions appreciated
If you want to make some sort of Art Direction, you need to use <picture> instead of srcset-w.
By the way, your code misses a sizes attribute, which is mandatory if you use the srcset attribute with w descriptors.
I have a webpage with different images of different proportions. I want to display in the best format for different devices: desktop, tablet, smartphone, etc.
Is it best to use CSS3 #media (mx-width: ** px ) or jQuery $( window ).resize(function() and $( document ).ready(function() { with a change in the size of the image?
The last step works very well and does not require to set a lot of different media sizes as in the case of CSS3, but if Javascript is disabled it will not work.
Basically, I want the images to be responsive, but not with re-scaling of the screen of the device, which is what I get with the Javascript code, but offering the full width of the container div when the page and images are displayed in a smartphone. I think that the approach would involve PHP code to get the Client data ( $_SERVER['USER_AGENT'] ) because don't want images to be too big to go outside the screen, and when using a smartphone I don't want the images to be too small to be seen, and here I have the problem of screen resolutio: the pixels of the image can be 1200 px, but it is shown very small because of screen pixel density or resolution.
The best approach these days is using a technique called "responsive image sizes" along with good old CSS to handle image scaling on devices with similar screen sizes.
Using 'resize' event to manipulate the DOM with jQuery is a staging way to bad performance and bad user experience.
The core idea is to load smaller images on smaller screens and down-scale them in browser if image is bigger than required, using:
img {
display: block;
/* You should never upscale raster images in browser */
max-width: 100%;
height: auto;
}
Here is a good article, that covers the concept in details: Responsive Images in Practice
I would recommend checking out lazysizes, it implements lazy-loading as a bonus.
This is how you use it in your markup:
<img
data-sizes="auto"
data-src="image2.jpg"
data-srcset="image1.jpg 300w,
image2.jpg 600w,
image3.jpg 900w" class="lazyload" />
I am making a responsive portfolio website using WordPress. I have a small issue that is breaking the layout. All images are meant to be 300px wide by 200px high.
I have also used the WordPress API to crop images if the user uploads images that are larger than the above mentioned dimensions
add_image_size( "portfolio", 300, 200, true );
What this does for me is that it inserts the width="300" and height="200" attributes to the images automatically (but the original dimensions of the image stay the same they are just being resized) This works well except when i try to resize my browser window..
Here is a senario: The client uploads an image with dimensions 300px wide and 210px high.. initially it is being resized and shown hence the layout is perfect but when i resize the browser the images gets resized as well but with respect to its "original dimensions".. hence the image with the original height of 210px is larger that the rest of the images.. and as i am floating all the images to form a 3 column layout the difference in height breaks the layout (shifting the column below this large image to the right and leaving an empty column below itself.)
How do i fix this issue? I thought of using timthumb to resize all images before they are display.. hence changing the original dimensions of the image on the fly but i think this is not an efficient way? Any other solution to this problem ? Also i dont want to using anything like jQuery Masonry as i have a specific layout to maintain.
Thanks
You can use the max-height rule from css to limit the height of all images equally.
eg:
.gallery img{
max-height: (some height);
}
Use % or em for the height, pixels might not work as well in a responsive design.
I have an MVC 4 View where I am displaying a table of data. This table is rendered inside a <div> tag. What I would like to do is to display a background image that the div contents sit on top of. The image should comprise most, or all, of the div and be somewhat faint and subtle. In other words, it shouldn't stand out. It should almost look like a watermark. I don't have a lot of experience with MVC and HTML/CSS and am not sure how to do this.
I'm not sure what sort of image I should use (PNG, JPG?), or if it even matters and how to make it transparent enough to make it look subtle etc. I'm assuming CSS can handle much of this for me, just not sure where to start.
Oh it's easy. Give the div a class, eg:
<div class="table-wrapper">
At the end of the css file being used on your page, if their is one, write css like this:
.table-wrapper{
background-image: url(/path/to/image);
/* if the image repeats nicely, tile it, using background-repeat */
background-repeat: repeat; /* repeat-x, repeat-y and no-repeat are options */
/* alternatively, you could stretch it to fit the div, using background-size */
background-size: 100% 100%;
}
You shouldn't see much difference in size between a png or a jpg, as long as you don't use transparency. .pngs with transparency can get make a file big very quickly.
I suggest picking an image that matches the colour of the surrounding area quite closely. This way you can give the impression of a low-contrast or translucent image, without the file-size cost.
Just wondered if anyone using the Flexslider has found that when switching back and forth from different size browser windows the slide images do not automatically adjust to new height and widths.
Let me clarify - they do shrink correctly but when scaling back up the first image in the slideshow gets stuck at the previous aspect ratio until the next slide comes in, at which point the whole thing adjusts.
To stop my content from being affected I have created a fixed height container for the flexslider and have used media queries to change its height as it is scaled down. This works perfectly scaling down.
It seems to be on the way back up that it has trouble sorting the image heights out.
I would provide links but it is a new client project in confidence.
All coding is exactly as is from the demo files, with exception to the fixed height and media queries on the container div.
I had the SAME problem - I found that not all my widths were of the same value.
e.g.
.clone { display: block; float: left; width: 994px!important; }
<img src="http://www.website.com/images/panel1.jpg" alt="" width="980px">
There were about 4 instances in my css that had different widths [shame shame] so I went in there and raked the css file.
I hope this helps
Good Luck