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/
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 am working on a project in which I render over 4,000 photos to a web page. The photo sources are online links, so I cannot resize them myself locally as I don't have them saved to my computer.
Each photo is about 800px x 800px, but the image objects I'm creating only need to be 200px x 200px. The loading time for the page is pretty slow, especially on mobile, and I'm hoping resizing the photo after sourcing them but before rendering them will speed up the load time.
Is it possible to:
(1) source an image from a link then
(2) resize / compress the photo before
(3) rendering the photo in an image object on the webpage?
All without needing to touch the original photos as they are on the web and without needing to download directly to my computer?
I think the load time will actually increase because first you have to fetch the full image from the remote source and then you also have to crop it! You definitely need to load already compressed images!
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've looked at a number of similar questions, and tried implementing those solutions, but I'm still having the same problem, I believe primarily because I have an additional complication (and the fact that my understanding of image manipulation is limited).
Here's the situation: in a web app I have a webcam picture capture (using getUserMedia). The <video> element which displays the feed, as well as the <canvas> are sized to 640 pixel width as default. This works fine on desktop browsers.
On devices with screen width under 700px, the site responsively resizes everything, including the picture capture dialog, which resizes to 95% of the screen width, thus the <video> element display the camera feed is less than 640px in width most of the time (those are the times that matter here). The video feed displays fine, you can see the entire camera field. But every you take a picture, it gets displayed on the canvas (which resizes the same as the video feed) clipped, depending on the size of the screen. That is to say, the canvas displays as much of the original image, which remains 640px wide, as it can.
I don't want to resize the actual image; I'd like the uploaded data at the end of the day to be a 640px image regardless of the screen width. I just want the user to be able to see the whole thing before s/he saves it.
I've already tried playing with width attribute (element attribute, not CSS) on the canvas, but that did nothing, and changing the width of the video display will shrink the actual image, so that's not what I want.
I also played with the drawImage method which should resizing, but I couldn't quite get what I wanted. This is the line I thought should work, but still gives me a clipped image:
if($(window).width()<701){
var ratio = videoHeight/videoWidth;
var canvasWidth = $(window).width()*.86; // calculated width after CSS resizing
context.drawImage(video, 0, 0,width,height,0,0,canvasWidth,canvasWidth*ratio);
}
Update
The following code will show the entire picture on the canvas, but shrinks it, and I get a much smaller image file, depending on the screen width it was taken on:
context.drawImage(video, 0, 0,canvasWidth,canvasWidth*ratio);
Many thanks!
I've been having a lot of issues with displaying images on mobile devices. It has something to do with pixel ratios and scaling.
The idea is that I want to prevent billiniar filtering on my images. On desktop this is easy, just display the image at 1x, and it looks perfect.
There are some issues with desktop, such as when you try to scale up using the browser it filters the image, but you can at least upload a scaled version and it will look perfect.
Here is my test page: http://stage.samkeddy.com/test/
You can see that all but the second one are perfectly crisp.
But here is what it looks like on my phone: http://imgur.com/a/4rMKj
It's not even close to the right size. The image should be 70 pixels wide, but it comes out to either 53 or 63 pixels wide (one is page loaded, second is after double tapping).
I want my image to line up exactly with the pixels on my phone, is there a way to even achieve this?
Actually you should forget pixel in mobile device, like android, the screen density is barely same, a picture looks different at different density screen.
I suggest using some responsive design, use min-width parameter for a img tag, and the image from server side should big enough to prevent blur.
There are also some image service which provide scale function, you can add ?w=100&h=100 to thre image url for compressing a big picture to a small one.