Contents
How big should an image be on a mobile website?
Not only does it slow the page load time, but you can see how it stretches and tries to squeeze into the mobile view. On the right, the image was resized to 250 pixels and set to display at 100% width on any device, so it looks great both on a desktop and on the mobile version here.
Why do large images look grainy on mobile?
In addition, there is no need to embed such large images on the page if it is being viewed on a mobile screen. And conversely, a small raster image starts to look grainy when displayed larger than its original size (a raster image is a set number of pixels wide and a set number of pixels tall, as we saw when we looked at vector graphics ).
Which is the best image size for desktop?
On the right, the image was resized to 250 pixels and set to display at 100% width on any device, so it looks great both on a desktop and on the mobile version here. An example of a too-big image on a mobile device. Where’s the content?! Here the same image has been cut down to size.
How are images displayed on a narrow screen?
An improvement would be to display a cropped version of the image which displays the important details of the image when the site is viewed on a narrow screen. A second cropped image could be displayed for a medium width screen device, like a tablet. This is commonly known as the art direction problem.
How to display different images in Mobile and desktop devices?
Hi can anyone tell me how to display differnet banner images in desktop and mobile devices.Here is my code. Right now in my desktop version it is displaying this image i need to change another image in mobile version. I cannot remove my accepted answer, so please don’t use it. The best way is using tag picture with sources, like Ron.Basco post:
How to change image depending on mobile browser?
Another trick would be to have two img tags, and hide one depending on the device. If you want to live in the future, the element is the way to go. It still has really bad browser support (only blink based browsers, and firefox beta as of now).