Compressing and Resizing Images for the Web - javascript

So I'm currently building a website using a php backend and polymer frontend. The client wants to be able to have a news feature for their own events. For this I want to convert all the images to webp and create a few different sizes so I can serve them quickly to different browsers (Mobile, Tablet, Desktop etc). However I haven't been able to find a good way of doing this in PHP or JS. Squoosh is great for static assets but not user generated content. Any help appreciated thanks!

PHP has functions for manipulating webp images. Try this.
<?php
$im = imagecreatefromstring(file_get_contents('path/to/image.jpg')); // Create image identifier
imagewebp($im, 'path/to/image.webp'); // Generate webp image and save to location
imagedestroy($im); // Free up image identifier
?>

The resizing must be necessarily done server side. The thing that you can do is to use the srcset and sizes attributes of the image tag to optimize the version to use:
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy" />
(directly from Mozilla documentation)

I would highly recommend using Adobe Photoshop. With this you can manually compress/resize images or submit them in batch.

I don't know if you have access to the server, but one way could be to call ImageMagick from PHP.
It would require for PHP to interact with the server, which can be dangerous, so please keep that in mind.
ImageMagick although don't support webm, to my knowledge, but Im sure you get the idea behind the though.
If you don't want PHP to interact with the server itself, you could also scan for non-converted / Resized images, and then convert them.
On linux it could be: find ./ -name "*.jpg" -exec CONVERT_FUNCTION{} \;

For resizing and compressing the image, you would need an image library installed with your PHP, like ImageMagick or GD
You can write your own resizing function as shown in https://stackoverflow.com/a/14649689, but you have to be careful with the image-types, as they may have their own function per type.
A maybe more easy way to resize is using the image intervention package. https://image.intervention.io/v2/api/resize (this also requires either GD or IamgeMagick to be installed):
// resize image to fixed size
$img->resize(300, 200);
// resize only the width of the image
$img->resize(300, null);
// resize only the height of the image
$img->resize(null, 200);
// resize the image to a width of 300 and constrain aspect ratio (auto height)
$img->resize(300, null, function ($constraint) {
$constraint->aspectRatio();
});
Using this library, you may also compress the image using encode or save function:
https://image.intervention.io/v2/api/encode
https://image.intervention.io/v2/api/save
// open and resize an image file
$img = Image::make('public/foo.jpg')->resize(300, 200);
// save file as jpg with medium quality
$img->save('public/bar.jpg', 60);
You may alsouse tinypng API's to compress your images: https://tinypng.com/developers, it compresses jpg, png and WebP and is free if you scale 500 images per month

Related

Is it possible to resize an image that is stored in a Uint8Array without using the browser's built-in canvas implementation?

I need to compress and rotate the image in the browser. Image sources can be drag'n'drop from a local user or the image can be downloaded from an URL with the same domain as the page with this script. But asking for permission to use HTML5 canvas doesn't fit into the design specification in any way.
The image can be in JPEG, PNG or HEIC format and in the current implementation is stored in Uint8Array. Is it possible to generate a thumbnail or change image orientation without using canvas?
No browser that I know of will ask for permission to use a canvas. Using a canvas is the quickest solution to do this (it's very simple indeed), and HEIC support is easy too: https://alexcorvi.github.io/heic2any/

Nativescript saveToFile is slow when file size is bigger

I'm using nativescrip-background-http plugin to upload images to a remote server.
The idea is that I use nativescript-imagepicker plugin to select the image, save it to a folder using saveToFile then upload it.
saveToFile works well with smaller files but there's a lug when the file size is big. Is there a way to reduce file size before saving it?
I was able to circumnavigate the issue by setting the image height, width and quality using getImage() as shown bellow.
getImage({maxWidth: 200, maxHeight: 200, quality: 100})
This makes all files saved using saveToFile method of a uniform quality thus no lugging while dealing with large or smaller files. A better suggestion would be great though.
You can check this Compress images on client side before uploading. But you will lose some data while compressing.
In the case of image, it will be the resolution.

jQuery upload that will resize the image with some resolution

I have a form input file, and when we upload an image, it will resize the image 2 times. First the original image will resize to square resolution(100x100), and second the original image will resize to landscape resolution(1000x500). After upload the square resolution will go to folder square and landscape will go for folder landscape.
So the original image won't be saved to the database, but the resized images will. Do you think a jQuery plugin for my case exists?
Javascript/Jquery is not the right choice there.
Javascript/Jquery work client side: they operate on users pc and not on your server. Maybe there are some plugins capable of resizing images, but surely you won't be able to store them in different folders using Javascript/Jquery
Such an operation must be done on your server, with a sever side language like PHP, NodeJS (still uses Javascript language), Java or many others.
The answer is based on the language off your choice, so i can't give a general one

How to compress .png images when exporting from Canvas using toDataURL()?

Need to generate .png images that are about ~20k in size using HTML5 canvas. Unfortunately, when creating .pngs using the toDataURL() method, you cannot specify quality like you can with jpegs.
Any ideas for a workaround? toDataURL seems to be the only way to generate images from Canvas and canvas seems to be the best tool for image processing without server interaction. Appreciate any suggestions.
There IS a way to have compression for PNG images using lossless zlib deflate process http://www.w3.org/TR/PNG-Compression.html . There is a library (https://github.com/ShyykoSerhiy/canvas-png-compression) that provides shim for HTMLCanvasElement.toDataURL() when image type is 'image/png' and enables ability to provide 'quality' as second parameter to HTMLCanvasElement.toDataURL() for png.
NOTE that it provides better results(smaller size) only in Chrome. Firefox sometimes has better compression than canvas-png-compression(as for 0.0.3 version).
You can do something by scaling it down and then scaling it up again.
Scale down by drawing it on a smaller canvas, then get the data url.
Create an image object set the data url as its source.
Draw on the original canvas with this img object (obviously inside the onload event callback)
Find the size ratio of the canvases to give you optimum result by experimenting a bit.

Image wrong orientation in html5 preview

Suppose my image is not upright (I open it in window browser and the image it not upright), but when I upload it to some server (such as gmail, stackoverflow). The image becomes upright.
I asked this question is that I am writing a preview logic with html5 and javascript. The image that I talk about show what exactly I see in window browser. Just wondering if the server did some trick to adjust the orientation?
Image shown in windows:
Image that directly upload to stack overflow:
I'm guessing you are talking about an image you generate or manipulate client-side using a canvas element that is then rendered back into an img tag. Correct?
Server-side, the orientation can be determined by looking at the image's EXIF orientation flag. It IS possible to examine this flag client-side using a library like jQuery fileExif.
If you use a script like ImageInfo you can fetch EXIF data (if the image has it). If it hasn't you practically can't know why it happened. Might be some "fake" displaying on the computer you are working on. Some image managers might keep duplicates of an originally rotated image.
The EXIF property Orientation might tell you if the image is changed, based on it's dimensions compared to it's orientation.
On Server Side:
You can use a tool like Graphics Magic to auto-orient the image correctly: http://www.graphicsmagick.org/GraphicsMagick.html
gm.exe -convert -auto-orient MyImage.jpg MyImageCorrectOrientation.jpg

Categories