There is an image tag with srcset attribute that looks like this:
<img src="..."
srcset="small.jpg 300w, large.jpg 900w"
sizes="300px" />
On normal 1x dpi screen it loads small.jpg, but on high DPI screens (such as retina) - it loads large.jpg.
Is there some way to make it load small.jpg on high DPI screens?
This is how srcset works, intentionaly.
If you want to prevent the browser from downloading the relevant image you provide, as your sizes value shows that supporting variable viewport widths is not required in your use case, you should use a simple src without srcset:
<img src="small.jpg" width="300" />
But it means you always show the image as 300px wide, and users with screen density above 1dppx might see a low quality rendering.
Could you explain why you want this to happen?
Related
I have converted the uploaded image into progressive in backend using Node GM and stored in the file. After that, I want to show that converted progressive images in front-end. My problem is when I rendered that image its getting rendered line by line. But compared to normal image these progressive images are loading first.
But I want to load that images from blur to normal.
How can I do this?
In the frontend, I have written the code using HTML like this.
<html>
<head></head>
<body>
<h1>Hello</h1>
<img style="width:50%" src="https://www.dropbox.com/s/p57ik1kl04k1iax/progressive3.jpg?raw=1" />
<img style="width:30%" src="https://www.dropbox.com/s/3nnc03tfwxrpu5q/Porsche-GT2-4K-UHD-Wallpaper.jpg?raw=1" />
</body>
</html>
At first I couldn't understand why this seemed to be loading in as a baseline image but using Chrome's developer tools, zooming in and throttling the connection showed me what was going on.
Your progressive image is loading in the way you expect, with an initial low resolution image, followed by progressively more detail. The first pass loads in line by line and therefore behaves like a baseline image.
The problem is that the image is so huge, at over 5000 pixels wide, that it's being resized in the browser to the extent that there's no visible improvement in picture quality after the initial image has been downloaded.
In order for the blurred-to-sharp effect to be noticeable, the image would need to be much smaller in pixel dimensions. If it's being embedded on a web page, resize it to the largest size you'd expect it to be viewed at, so at 50% of screen width on a 1920 wide screen, you would want to resize to 960 pixels across. Now the file size will also be much smaller and the image will download faster, so unless you are on a very slow connection it still might not be obvious that the jpeg is loading progressively.
If you need the full size image available to users for printing or some other purpose, then you can always add a separate link on the page along with a warning on the file size.
Eg.
Print quality image (11.1 MB)
You need to have two images
Big sized image
Small image
You need put
<img id="image" style="width:100%, height: auto; filter: blur(5px); transition: 1s filter linear;" src="small image source" />
then do
fetch('big image source').then((response) => response.blob()).then((blob) => {
let img = document.querySelector('#image');
img.onload = () => URL.revokeObjectUrl(img.src)
img.src = URL.createObjectUrl(blob)
img.style.filter = 'none';
})
I don't think it is possible to achieve whatever you are asking. While requesting for a static file, the response will be a stream which is sent in a linear manner (pixel by pixel, left to right, top to bottom). To achieve your desired style, you have to control how image is being streamed to the client. So, it is not possible to achieve this by just hosting a single static file.
But, can simulate this effect by hosting multiple copies of your image (of various resolutions) and load all those files one after the other.
Here is an article on how Medium does this.
Also, lazysizes might come in handy. Here is an example usage of lazysizes. If you inspect the network tab on this page, you can actually see two different sizes of same image being requested simultaneously.
We have a product details page on our website and it has a preview of a large image of the product. The problem is because of it being too large and hi-res, it takes time to load and render on our page. Now I've read about something called image upscaling or from what I've understood it works a bit more like lazyloading the images. So the concept is they generate a very small, in terms of file size and image dimension, version of the large image and set it as the initial preview of the image. Then size it up to same as the large image's original dimension. So it is stretched and they blur it out. They wait for the larger image to load then replace the smaller one with it once it is done loading. I've seen this in multiple blogs and news website and it seems like a very good solution. But my concern is, does this affect our page's SEO? If so, is there a way to implement this kind of behavior without hurting our page's SEO?
I understand that you have a problem with optimizing your images. To solve this, I recommend that you apply the following techniques:
Add the srcset attribute to the img element. The srcset attribute extends the functionality of the img element. If the browser does not support the srcset attribute, by default the image file is imported using the src attribute. If the browser supports the srcset attribute, you can specify a list of image sources and conditions (comma-separated) before the request is received. As a result, only those images that match the parameters of the device are downloaded and displayed.
Art direction in the responsive images with the element picture. If you want the images to vary depending on the characteristics of the device (art direction effect), use the element picture. The picture element specifies a declarative solution to provide multiple versions of the same image, depending on the various characteristics of the device: size, resolution, destination, and so on.
<picture>
<source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
<source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
<img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>
In the above example, if the width of the browser is not less than 800 pixels, the head.jpg or head-2x.jpg format will be used (depending on the screen resolution of the device).If the width of the browser is from 450 to 800 pixels, the formats head-small.jpg or head-small-2x.jpg (also depending on the screen resolution of the device) are applied. If we are talking about a screen width of less than 450 pixels and a device with downward compatibility, the picture element will not be supported. In this case, the browser uses the img element to display the image on the screen (it must be enabled).
Images with relative dimensions. If the final image size is unknown, it is difficult to select the pixel density descriptor for image sources. This, in particular, refers to images that are stretched proportionally to the width of the browser and change their size depending on it. In this case does not indicate the fixed image size and pixel density. Instead, you can determine the size of the image being processed by adding a handle to width. This will allow the browser to automatically calculate the optimal pixel density and select the correct image to load.
<img src="lighthouse-200.jpg" sizes="50vw"
srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
lighthouse-1800.jpg 1800w" alt="a lighthouse">
This example shows an image that takes half the width of the viewport (sizes = "50vw" when applying the viewport) and depends on the width of the browser and its ratio of logical and physical pixels. As a result, the browser can select an image that will be displayed correctly in a window of any size.
Please note that images of the JPG-JPEG format have approximately 50% less volume than PNG. Therefore, they are easier and faster to load. To change the image format and resize images, you can use this tool Photo Editor Online. To compress images, you can use this tool - JPEG and PNG compressors.
The best solution is the use of Accelerated Mobile Pages AMP. Please note that in their implementation of the image element is also used the srcset attribute.
Original source ++ Use Cases and Requirements for Standardizing Responsive Images ++ Responsive images of MDN.
You can use for preloading images of the current web page with meta preload, eg: <link rel="preload" href="//examples.com/images/img1.jpg" as="image">
Read more Preload of W3C ++ Preloading content with rel="preload" of Moz.
For SEO I'm going to assume you want to go by googles standards for my answer.
lazy loading will help your bandwidth, not your SEO google will judge your website by full page load time.
I recommend you compress your images and that will be all the difference.
if you have any pictures you can load 20 pics and the have a button saying load more, then lazy load from there.
this would be a big SEO boost as your now loading half your website.
I read about retina ready sites and I get some information like In retina ready sites images, slider,font and other elements are more sharper, more density and high resolution...
My Question is:
How I convert Normal Site to Retina Ready with Images, Fonts and other things...
<img src="image1#2x.jpg" width="660" height="440"/>
Original width: 660px and height: 440
And I already import retina.js
Download RetinaJS from Here
Thanks in Advance
If you want to use high density images, you have to set another attribute : srcset.
In this way, src attribute is usefull for old browsers that don't support srcset attribute. srcset attribute is used by modern browsers that will use it in order to load high density "#2x" image if the screen is ready for it. If the screen is not retina, the browser will automaticly load the low density image "#1x".
<img srcset="image#1x.jpg 1x, image#2x.jpg 2x" src="image#1x.jpg" alt>
You can look at this article from MDN if you need more information about it. There are more attributes that can help you like size.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
I'm designing a responsive site using media queries to change the layout as the viewport size changes.
For mobile, I think it would be beneficial to use a lower resolution image to save on page loading times and bandwidth.
How would I disable the high quality image and replace it with the lower quality image using CSS?
Thank you.
Using the HTML5 picture element, you can specify inline media queries to size your images:
<picture>
<source srcset="sm.png" media="(max-width: 400px)">
<source srcset="mid.png" media="(max-width: 800px)">
<source srcset="lg.png">
<img src="lg.png" alt="MDN">
</picture>
The element will degrade gracefully to show the image tag in browsers that don't support it.
Read more about the picture element on MDN.
Also, a JS polyfill in case the img tag fallback isn't enough!
At the time of this writing, the picture element has virtually no browser support.
So here are two alternatives:
If the image is sourced in the CSS you can prevent it from loading with display: none.
If the image is in the HTML img tag consider that the browser calls images from the src attribute. You can work around this by using the the data attribute instead. Apply data to all images and add src only when you want to load them.
HTML
<img data-src="http://i.imgur.com/60PVLis.png" height="100" width="100" alt="">
JS
$(document).ready(function() {
$(this).find('img').each(function() {
$(this).attr("src", $(this).data("src"));
});
});
you can develop your css spreadsheet file by adding display none for large images in mobile view, the new mobile browsers wont load large images if they contain display:none in css, allowing the page to load faster and also adding display non for small images in desktop view will do the same .
It's simple - create another image with less resolution, and put it with media queries.
Media Queries can help you hide and show elements based on screen resolution and media type.
A great resource would be this article about media queries on CSSTricks which covers different devices, platforms and res
I have an HTML page. There is a base64 encoded image in it. I am planning on writing a javascript to increase the size of the image and content on the page. So everything on the page will appear bigger. I am able to increase the font size but not sure about the embedded image.
If you have
<img id="myImage" src="" />
Then you can do it like this:
$('#myImage').attr({
width: 150, // new width
height: 150 // new height
});
Well, you can just adjust the css for that image or the attributes. Use either height or width, just not both so they scale properly.
Jquery:
$("img").css("width","150px");
I may be confused but don't all modern browsers support Ctrl + scroll to zoom?
With images referenced by URL, you can change height and width (either the HTML attributes or CSS styles) and the browser will resize the image. I imagine it will work the same with an embedded image.
This functionality is available in most modern browsers, and as such it is unnecessary to duplicate it using client-side scripts. Consider simply informing the user that most browsers have text size controls built in (so that they may use this tool on other sites as well).