I’ve got some images composed in Adobe Photoshop that contain a background layer and an object in a foreground layer. These images I would like to use in webp format in a website project:
The image should be displayed with transparency — i.e. the background of the image should be transparent, showing the underlying color of the html element — but when hovered over the image, the transparency should be disabled and therefore the background layer of the image is shown.
How can this reliably be done with JavaScript or any other web technology?
Note: I would like to avoid uploading two image versions
Related
I have some images in my web which linked from image hosting sites. All the images require 100% in width.
However, some images have extremely large pixel and therefore load slow.
How I can set the style to reduce the pixel of images while keep the images in 100% width in order to load faster?
For example, fix the horizontal pixel to 1440px and adjust the vertical pixel and keep it in 100% width?
You have very little control over an image that is hosted elsewhere. Some alternate ideas:
Cache them on another server and load from there
Preload for faster results (which might not work if the image is "above the fold") How exactly does link rel="preload" work?
Use the <picture> tag to specify a different image based on screen size: load images using the picture tag
Load a placeholder image first: How to load a small placeholder image before loading the actual content
you need to have 2 versions of each image, one with the original size and you can use this when user request to download the photo, and the other for the display and the UI, this will make your page load faster and less data bandwidth.
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.
I wanted to prioritize loading of the logo of our website. I've found preload or prefetching images but this just loads the image after css has been loaded and evaluated. How could I force the image to load in parallel with the css assets so that on first page paint, the image immediately shows?
Two options come to mind:
Use an SVG version of your logo right in your html.
Use a Base64 encoded version of your logo if the size is small enough.
I wrote a module where you can perform image manipulation.
There is also always a preview of different filters and so on.
The prolbem is that it should all pictures fast. There also can
be a picture with like 3000 x 3000 pixels. For the previews that
would take too much time.
Is there a way to resize the pictures to for example 200 x 200?
I mean a real resizing of the image.
You can resize images in JavaScript using canvas.
The image must be hosted on same domain as your domain.
First you draw the image on the canvas you createing.
You can set the width&height
document.getElementByTagName('canvas')[0].getContext(2d).drawImage....
After that you can restore the image from canva to your image tag.
document.getElementByTagName('img')[0].src= document.getElementByTagName('canvas')[0].toDataUrl()
You can see this example:
http://www.html5canvastutorials.com/tutorials/html5-canvas-image-size/
I want to embed some video into my HTML page. As background I want to use big picture. And above it I want to insert loop video with (i.e.) walking man.
So, can I embed video (without flash and any player controls) in page?
Can I decode video with transparent background? Is there any codecs which support transparent background (alpha-channel)?
Now I see this solutions:
Making flash (that I don't want to use)
Create gif animation (and it will be big file size and quite bad quality)
I don't believe that's possible with anything beyond GIF (over sized and would have a horrible border between opaque and transparent), MNG (not widely supported), and scripted SVG.
Have you thought about figuring out where in the background this video would appear and putting THAT section of the background into the video as a static background behind the man walking?