Every leading tech company takes image optimization seriously, including Amazon, eBay, Facebook, and Google. Why? Because image optimization has a direct impact on page loading speeds. This slide deck explains the latter in more details.

2. Every leading tech company takes
image optimization seriously, including
Amazon, eBay, Facebook and Google.
Why? Because image optimization has a
direct impact on page loading speeds.

3. You might have the best
website in the world but if
your page loading time is
more than three seconds,
then you’ve already lost 53%
of your visitors

4. But technically,
what’s the relationship
between Page Load
Times and Image
Optimization?

5. The delivery of image data
contributes to around 72% of
all internet traffic today, so it’s
safe to assume that images
require a lot of storage space.

6. To compare the size of images versus words
a 70,000-word novel
takes up around 140
KB space.
A regular photo taken
by a smartphone will
need 14 to 35 times this
space.
vs

7. Some web pages rely on plain text
but many, including e-commerce
platforms, social media channels,
and blogs, rely heavily on image
content.

8. A single unoptimized image can double or triple
the download time for a web page. This means
image optimization has a direct impact on page
download times and the overall user experience.
This is the reason why leading global internet
companies consider image optimization one of the
most crucial elements of the user experience.

9. Image
Optimization
Methods

10. There are various image optimization
methods. Most of them are some form
of compression into different image
formats such as .jpeg, .jpg, .png, .tiff,
.gif etc.
...This brings us to the issue of image
quality.

11. Lossy vs. Lossless Image Compression

12. The terms lossy and lossless compression
refer to compression methods where the
original image is reconstructed perfectly
from compressed data.

13. Lossless Image Compressiona.

14. Lossless image compression algorithms allow
the original data to be perfectly reconstructed
from the compressed data….

15. …They are used where the original and the
decompressed data are required to be identical or
where deviations from the original data are undesired,
such as archiving or production operations. Image file
formats, like PNG or GIF, use only lossless
compression.

16. Lossless Image File Types
Format Description
PNG Portable Network Graphics
TIFF Tagged Image File Format
Webp (high-density lossless or lossy
compression of RGB and RGBA
images)
BPG Better Portable Graphics
(lossless/lossy compression based on
HEVC)
FLIF Free Lossless Image Format
JPEG-LS (lossless/near-lossless compression
standard)
TGA Truevision TGA
Format Description
PCX PiCture eXchange
JPEG 2000 (includes lossless compression method, as
proven by Sunil Kumar, Prof San Diego
State University[citation needed])
JPEG XR formerly WMPhoto and HD Photo, includes
a lossless compression method
ILBM (lossless RLE compression of Amiga IFF
images)
JBIG2 (lossless or lossy compression of B&W
images)
PGF Progressive Graphics File (lossless or lossy
compression)

17. Lossy Image Compressionb.

18. Use inexact approximations and partial
data discarding to represent the content.
They are a better option compared to
lossless image compression methods in
applications where reducing image size
for storing, handling, and transmitting
content are more important.

19. Although there is a certain amount of
data and quality loss in lossy image
compression methods, well-designed
lossy compression technologies usually
decrease the file sizes considerably and
image quality deterioration cannot be
noticed by the user.

20. Lossless Image File Types
Format
Better Portable Graphics, also known as BPG (lossless or
lossy compression)
Cartesian Perceptual Compression, also known as CPC
DjVu
Fractal compression
ICER, used by the Mars Rovers, related to JPEG 2000 in
its use of wavelets
JBIG2 (lossless or lossy compression)
JPEG
Format
JPEG 2000, JPEG’s successor format that uses wavelets
(lossless or lossy compression)
JPEG XR, another successor of JPEG with support for
high dynamic range, wide gamut pixel formats (lossless
or lossy compression)
PGF, Progressive Graphics File (lossless or lossy
compression)
S3TC texture compression for 3D computer graphics
hardware
Wavelet compression

21. Image Scaling or
Resizing

22. There are many ways to
scale or resize an image,
many of which have nothing
to do with the visual size of
the image.

23. Some compression methods will
reduce the image in terms of its data
volume. Others will modify the
dimensions in terms of pixels (raster
images) or geometrically (vector
images).

24. Let’s assume that we have a web page
with a mobile-dominant audience. This
means most of the page visitors will be
using mobile devices.

25. Using images with high resolution
won’t benefit the users in a tangible
way; instead, it will affect the user
experience negatively by slowing down
the page loading speed.
Conversely, images for desktop users
should be optimized for larger screens.

26. How Web Pages
Can Manage
Image
Optimization?

27. It’s the website owner’s responsibility,
and in their best interest, to optimize
images. There are various ways to do
this.

28. Let’s assume we have a blog where a
few images are uploaded every day.
In this case, the easiest option is to
manually resize the images.

29. However, manual image
compression can only take place
one-by-one or in limited batches.
This process can be tedious and
impractical, particularly if there are
large amounts of images requiring
optimization.

30. Automatic vs. Manual
Image Optimization

31. Blog pages with limited image content
are not the only type of web pages on
the internet.

32. There are social media platforms, e-commerce
sites, and websites with heavily image-oriented
content…
Sites that depend on user-generated content
that cannot force their users to pre-optimize
the images before uploading.

33. It’s hard to imagine Instagram or
Facebook asking users to optimize their
photos and reduce the sizes before
uploading.

34. As technology advances, new
compression methods and image formats
result in entire media libraries needing to
be converted or rearranged.

35. So how can website or platform owners
better manage image optimization?
The answer is simple:
Using a CDN provider with automatic
image optimization capabilities.

36. A CDN with automatic and
optimized image compression
capabilities is the best option for all
web products.
At Medianova, we can tailor the entire
image compression process according
to your requirement.
Learn More