I am completely confused by why the header image for this webpage here is high resolution, yet when I create it in my HTML is comes out lower resolution. I am linking to the exact same img link. Although when I inspect the code this image has been linked by img data-src, could this affect the quality of the image?
If anybody knows anything around this it would be much appreciated.
The image's address is:
https://static1.squarespace.com/static/57c0dbb31b631b53bedecc7e/t/57c29deb6a4963efc2c2eced/1472372377741/uxuihero.jpeg
but if you look closely the actual src attribute of the <image> element is to
https://static1.squarespace.com/static/57c0dbb31b631b53bedecc7e/t/57c29deb6a4963efc2c2eced/1472372377741/uxuihero.jpeg?format=2500w
Notice the ?format=2500w at the end - it's a common practice for servers to to be asked to provide the image with a fixed width (this saves network traffic on mobile devices).
Once you add the query parameter to your own code you'll see the same image.
The photo on this page has added background color with transparency. It works as photographic philtres. It is that sample of code:
background-color: rgba(0,0,0,.3);
Related
I am developing a web site for selling handy crafts so users expect high quality images for per product. because of SEO related problems, I think about loading image asynchronous and just when user reach to per product thumbnail.I don't know how find out that when each user reach to per prouct thumbnail when scrolling page to load main and hight quality image for it; are there any event in javascript for detect that? or I have to calculate by pixels or some way like that?
What you are looking for is called "lazy loading". Lazy Loading means that the required resources are only loaded once the user actually needs it. In this example, the user only needs the image once the image is actually in the viewport (the elements visible on the screen)
The easiest way for Chromium-based browsers and Firefox is using the "loading" attribute of the img-tag and setting the value to "lazy". Example: img loading=lazy src="link"
This will work for most cases. However, if you want to be in control of the functionality behind it what you are searching for is called a "Intersection Observer". With this you can do alot of stuff related to elements and the viewport. E.g. how far is an element away from the viewport, or how much percent of the element is actually in the viewport.
If you want a really short 15 minute video that explains the Intersection Observer basis I can recommend this YouTube video:
https://www.youtube.com/watch?v=2IbRtjez6ag
I hope that this will be enough to help you with your problem!
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.
The logo image for my site appears after the page is loaded.
Because of the way the image was designed to fit into the context of the page, it leaves a gaping hole in the appearance of the page.
Is there a workaround for this maybe using JavaScript or jQuery?
You'll need to explain better, but you might consider some of the following options:
Compress your image better
Find a better webhost if bandwidth
is a bottleneck
Preloading wont help probably in
this situation, if however you are using multiple images preloading will help
Consider a placeholder image/div
that lies underneath the logo (IE.
please wait, logo loading, and the
logo loads ontop with a higher
z-index)
Consider a new page design if it is too resource intensive
Have a please wait loading message, this is probably going to put off your visitors though
If you provide a link to your website we can help more, the problem is too general to give and specifics.
Are there any differences in performance or load/caching behavior when displaying images in img tags vs divs with image backgrounds?
My example:
I have a site with many overlapping images, some of which I will need to load dynamically with javascript. One issue is that I need to anchor the images to the right of the element, so that I can do a nice wipe-to-right effect. Because of this I was using a div with background image positioned right. Couldn't figure out how to do this with img but since divs are working for me I didn't know if this would matter...
AFAIK, browsers cache images the same whether they're in a DIV or an IMG. In any case, I think this one of those cases where specific performance is defined as an implementation detail internal to each rendering engine (and possibly the browsers built around them). As such, it's both out of our control as designers/developers and subject to change from browser to browser and version to version. In other words, I wouldn't spend too much time worrying about it.
The main performance difference is using background images allows you to use CSS sprites. Having one image contain a large number of images from your page means the user only has to make one request instead of one for each image.
Another difference is with responsive layouts. If you have an element that is only shown at certain screen widths (ie, not on mobile phones), it will still load the image if it is specified in the html (using display:none for instance), but most all browsers now will NOT load the image if is a background-image specified in unused media query-CSS rules. A lot of early responsive layouts got criticized because they still used the same bandwidth as the full size sites.
It is also useful with such designs because you can easily specify different images for different screen sizes. "Retina" displays on tablets and even laptops now won't look their best without 2x res graphics. So... even if you don't do such things now, it is probably a good practice to get into, because you might find yourself needing it soon!
I think by using background-image attribute in the div, the page layout gets loaded first and image present in the divs loaded later after the dom is loaded. so by using background-image the html layout is loaded faster on the web browser.
The only difference I can conceive of it this:
You can't scale images as backgrounds, although you can for img tags. This would open a scenario where background images loaded faster becuase it forces you to have the correct native size as opposed to downloading the entire image and scaling it. However, the converse could be true: given that you didn't care about image quality so much, you could deliver smaller imgs to your page and scale them up.
I'd stick with whatever rendered cleaner (and more consistently -- IE/FF/Chrome/Safari/etc).
Technical differences yes, most notably you can set the width/height of an IMG tag and it will stretch the image, which can be useful in some situations.
The main thing you've got to keep in mind though is the context of the image within the HTML document. If the image is content, say an image in a gallery, I'd use a IMG tag. If it is just part of the interface I might use a div instead.
I gave up on trying to center an image vertically and horizontally. I seen solutions that require you to know the size of the image. I do know background-image will center it properly. However i cannot right click the image and hit save as. Is there a trick i can use to allow this?
You can always add an <img> in the <div> that you are setting the background for. And set the opacity to 0.
Users can't see it but they can still right click and save it.
No, this is not possible.
Background images are not intended to be any more than a pretty surrounding for the important parts and there is no reason why they should be easily downloadable.
Have you taken a look at this potential answer?
http://www.brunildo.org/test/img_center.html
His solution is pure HTML+CSS, doesn't require foreknowledge of the image height and works in: Opera 6+. Safari, IE5+/Win, and IE5/Mac.
In firefox you can view background images. Then you can save the image
Use Firebug plugin for Firefox. You can browse to the DOM element and then find the background image. Then there's an option to "open image in tab". From there saving it is simple.
I assume this is for development purposes and not something you want end users to do.
That depends on your browser -- in Firefox3, you may use Tools->Page Info->Media, locate the image from the list and hit "Save As..."
I think an HTML/CSS option is not possible, but I'm not completely sure.