Up next in 10
Build Angular Image Compressor Web App in Browser Using ngx-image-compress Library in TypeScript
Jun 9, 2025
Get the full source code of the application here:
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:02
uh hello guys uh welcome to this uh live
0:04
stream so in this live stream I will
0:06
show you a angular module which allows
0:08
you to compress your images right in the
0:11
browser itself and the package name is
0:14
ngx image compress this is actually the
0:17
name of the package the command is very
0:19
simple you simply execute this command
0:21
to install this module and it's almost
0:24
got 24,000 weekly downloads and they
0:27
also given this example on their
0:29
official website you can try this by
0:31
visiting image library.app so here you
0:34
can actually upload and compress your
0:38
image right itself in the browser the
0:40
image is not uploaded you simply select
0:43
your image and then automatically the
0:45
compression take place in the browser
0:47
you can even upload multiple images as
0:49
well so this package exports you can see
0:52
we can upload multiple images and then
0:54
it will compress
0:56
them so various examples are there so
1:01
now to get started I basically will
1:04
build this example from scratch where
1:06
you allow the user to upload their image
1:09
and then it will also show you how much
1:12
size it has compressed the original size
1:15
of the image was 855 kilobyte and now
1:18
the original the new size has become
1:21
29.53 kilob so you can see significantly
1:23
the size has been reduced from 855 kilob
1:27
to 29 kilob so this is and then you can
1:31
download your compressed
1:33
image so now you can see it is 22 kilob
1:37
so significantly the size is reduced and
1:40
uh now to get started here this is a
1:43
simple angular project here first of all
1:45
you need to go to this app.component
1:48
html file and here we will simply write
1:52
our
1:53
HTML and let me also delete all the
1:56
TypeScript code here so we will start it
1:59
from
2:04
scratch so go to this app.component.html
2:07
HTML and right here we will allow the
2:10
user to simply have a input field where
2:14
they will select a image file
2:17
so first of all we will have a button
2:21
here and this button will have this on
2:25
click event handler upload file so we
2:27
need to define this function right here
2:28
so right here come to the TypeScript and
2:31
just define this function upload file
2:34
so you will have a button right here
2:36
upload and as soon as the user clicks
2:38
this button they will able to select a
2:42
image file so then we will
2:46
have so let's suppose we need to now
2:49
write this upload file function so the
2:52
very first thing we need to do we need
2:54
to import this uh ngx image compress
2:58
service which will be coming from this
2:59
package ngx image compress so simply
3:02
import this line at the very up top
3:05
here and then inside this we first of
3:08
all need to declare a series of
3:10
variables right here in the typescript
3:13
so just declare all these variables the
3:16
source which is the original image that
3:19
you will select then the compressed
3:21
image which is the thumbnail source
3:23
image result before crump after compress
3:26
you need to show the size difference so
3:28
for this we have to declare these
3:30
variables so just declare these
3:32
variables and after that inside we also
3:36
need to pass this service in the
3:38
constructor so we can pass this service
3:40
as a
3:43
private we can declare a service uh
3:46
variable of this service which is ngx
3:48
image compress service so we are simply
3:51
passing this into the
3:53
constructor like this so after that
3:55
inside this upload file function right
3:58
here we will initialize this this dot
4:01
image compress dot upupload
4:04
file is a function so this returns a
4:07
promise here so right here we will pass
4:11
the image plus the
4:17
orientation so right here we will say
4:20
this
4:23
dot so here you can actually declare a
4:27
function or which will actually show the
4:30
size difference for this we are calling
4:32
this function which is format bytes so
4:35
which will actually convert the size
4:38
into kilobytes and
4:39
megabytes so let me just declare this
4:46
function so this is a utility kind of a
4:48
function where it will actually show the
4:51
actual size difference so we are
4:53
converting this to kilobyte megabyte all
4:56
that stuff then it will return exactly
5:00
how much the size difference after
5:04
that we just need
5:09
to call here this dot
5:12
image
5:14
result before
5:22
compress and here you need to
5:25
simply pass this image
5:30
and then we will need to compress this
5:32
image for compressing this image we
5:33
simply call image compress dot it
5:36
contains this function which is compress
5:38
file so this function is contained
5:40
inside this package and here you simply
5:43
pass the image that needs to be
5:45
compressed and then their orientation
5:47
and then the fif width and the height so
5:51
this actually takes four arguments first
5:54
of all the actual image that needs to be
5:56
compressed the second argument is the
5:58
orientation and then we have the width
6:00
and the height and this will actually
6:02
compress your image and then it also
6:05
returns a promise so we can handle this
6:07
by calling dot then and this will have
6:10
the compressed image and here you can
6:12
simply display the compressed
6:16
image so now to display these we can go
6:20
to the HTML and right here we can
6:23
display
6:24
this using the image tag so we can have
6:28
the size difference we can add two
6:30
paragraphs here image size was and now
6:33
image
6:37
sizes
6:39
so if you just select your image you
6:42
will see original size it will tell you
6:45
which is 800 kilobyte now we also need
6:48
to calculate the compressed size and
6:50
also display that as well so for
6:52
displaying that now you can see we have
6:55
compressed it file so this comes out to
6:57
be the result and here we can display
6:59
this so we can say this dot
7:02
image result after compress so this has
7:06
this property and we can display
7:13
this so if you select your
7:17
image this is the first image the
7:20
original image
7:22
and now if you want to
7:33
display so we can display this
7:43
format so you can see now the compressed
7:46
size is it has compressed the image from
7:48
723 kilob to 28 kilob so it's a very
7:51
good package guys in Angular
7:53
specifically compresses the image right
7:55
in the browser
7:56
itself and it doesn't need to need to
8:00
upload your image to any kind of server
8:02
it basically compresses all your images
8:05
right in the browser itself it can
8:07
handle multiple images as well so this
8:09
is actually the package NGX image
8:12
compress definitely install it and start
8:14
using it
8:16
so thank you very much for watching this
8:18
video and also check out my website
8:20
freemediattools.com
8:22
uh which contains unlimited number of
8:24
tools regarding audio video and image
8:27
and I will be seeing you in the next
8:29
live stream