I've been searching everywhere without luck.
A simple way to reduce the width of an image picked with a simple <input type="file" /> without it losing it's aspect ratio.
I am using jquery to select the image before uploading like so: $('#image')[0] but I need a way to reduce the image width before uploading to reduce the file size and data being sent to the server and of course received when users download the image when visiting the website.
If you still need it you can use this library. It worked for me, because it lets you resize width, height and file size, obviously with a image quality loss.
Compress.js library
Related
On the main page it's showing blurry image in futured posts.
website link:- iguidu.blogspot.com
I tried different methods but it is not working. can anyone?
related script:-
Original image is only 72px and you're rendering into a large box, You're basically using thumbnails in the place of featured image, this is the reason it's blurry. try using larger images, ideally to the expected rending size, in your case 490 x 305px
In your case, this seens to occur because of the images size. If you open each image in a new tab you will see that teir original size are 72x72 although the display size (the size that us, clients, are seeing) is 490x305.
How to correct this ? The ideal is to get a bigger image, and also an optimized one. The most optimezed format for web is .webp. Check on THIS link what is this.
Another important thing when comes to resize image is to keep the aspect ratio, but I don't think you are experiencing any issue with that, although I will let a LINK talking about it.
I'm trying to 'lazy load' dynamic images. Their height/width ratio matters in the layout of the webpage. I have four options to prevent them from messing up the DOM when they load or render.
I can get the height and width of the image using Javascript, set an element in the DOM to place-hold for the image until I want to load it later. I would use...
var image = new Image();
var width = image.width;
var height = image.height;
I can simply not lazy load them and use an img tag with a src immediately. If #1 is just as slow as this method then there's no point even trying to load them later and I may as well do it in an HTML tag.
<img src='source' />
I can store the image dimensions in my database. This would mean I would continuously have the necessary dimensions of the image and could pretty easily set a placeholder. I don't know if this is common practice though. Edit: it should be noted, I'm accessing the database to retrieve the image url anyways.
<div>this elements width and height is set</div>
I could get the dimensions of the image through PHP. This is the same as the Javascript method, just at a different point in the process.
$size = getimagesize($filename);
My question is essentially which of the above is the most well established way of getting a pictures width and height to store a place for it in the DOM?
I'd say a combination of method 2 and 3 are your best bets. You should store the image size and other metadata in your tables describing the image. You can then either do some form of dynamic loading, or just place a bunch of <img> tags, with width and height already set to the sizes from the DB and decoding=async so the browser doesn't block the rest of the page on loading these images.
The end state is to send a document to the browser, which contains the clear list of images you wish to display, and as much info about them as you can (sizes, loading modes, various srcs for various screen densities etc).
Method 1 seems like a lot of work, most of which would duplicate what the browser would already be doing.
Method 4 would be a performance nightmare. getimagesize would need to access the disk and read some part of each image you're trying to display. If there's a set of well known images, you'd be saved by disk caches, but otherwise, if you're doing something like instagram/facebook/flickr where every user has their own images you'd be looking at O(n) random disk reads atop whatever I/O the database does.
I'm trying to create an online tool using html/javascript where users can upload their pictures that are imported into a canvas and then they can overlay other pictures on top of them, resize and move them around. To add this, I'm using fabric.js.
I do want to maintain the Image resolutions while I do this, so I have to resize the canvas according to the size of the base image which can get out of hand if the image is 4000px wide. What I'd like to do is display the images in a limited area such as 1000x1000 while maintaining the original size to provide the users with the original resolution when they are done. I tried messing around with CSS to limit the canvas display size but unlike img, canvas seems to override the limits I specify. I'm also using github pages to host this.
What would be the best way to do this?
I'd keep track of my images separately from my rendering layer. So, I'd either keep them in a hash or array in memory or, if that's too expensive, I'd persist them to storage (server side or in S3 or whatever).
Then, you just render low(er)-fidelity images to your canvas.
I have a problem with my project, and it is about converting the html file to pdf. I have one question, how can we alter the size of image in jspdf because when i'm downloading the pdf, it show that the image is not fit in the page and only show half of it for A4.then, i'm trying using the A0 size but the font will become very small even though the image is right. can some one tell how to fit the image or maybe changing the font size?
(and also i'm using HTMLfromPdf.js)
You can resize the canvas image using the method parameters,
pdf.addImage(imgData,'JPEG',0,0,canvas.width*0.2,canvas.height*0.2,"a","FAST");
You can calculate the required ratio and replace the image width and height parameters.
You can use dimensions for jsPDF directly from canvas object like described there
https://stackoverflow.com/a/65124814/9026103.
I have a page where I will be loading a couple of different sizes of the main image; although not all the large images will be loaded at once.
The scenario is this..
I have a slider which contains the thumbs for all the larger images; these all load when the page does.
The default large image loads when the page does, but the other large images only load if the user clicks on the thumbnail for that image and then I replace the src of the large image as so..
function changeMainImage(image) {
// Set big image
var big_image = image + '-big.png'
// Update main image url
jQuery('#main_image').attr('src', big_image);
}
Now because the large images don't load when the page does, this causes a small delay for the large image to show, which is rather undesirable.
Now I'm thinking that I could kill two birds with one stone with just loading the large image and no thumbs and just have the browser scale the large image into a thumbnail; I just kinda cringe at doing it this way as I have always hated sites that use this method for thumbs, but in my case it seems valid as I need to load the large image anyway.
This would allow me to reduce the number of http requests by 1 * amount of pics and also give me instant load of the large images once the thumb is clicked.
My only concerns are trying to figure out how to give the browser the correct dimensions so that the image scales to the correct proportions and also the fact that if the page has say 12 images; this way I am making the user download all 12 large images at once when they make not even be interested in looking at all 12.
Both versions have pros & cons - any advice what to do here?
The method you currently have is what I prefer to do. Load what is visible.
Now, to make the user experience better, many sites use a couple techniques. The first would be to pre-load the next image or two. If you have a slideshow-like display and have a good idea of what order the images will be displayed in, this is good.
The second is to display the thumbnail while the large version downloads. If your thumbnails are of a decent size, this lets the user get visual feedback that their click worked, and on decent connections the image will be downloaded soon after.
Finally, I recommend using progressive JPEG (if your images are photos) so that they are enhanced as they load.
For your data on sizes (and any other metadata), keep that in a JavaScript array of objects, or wherever else you store your image data. You can easily use JSON for transit from the server.