Image Optimization Tips For Improved Performance

1
IMAGE OPTIMIZATION TIPS FOR IMPROVED PERFORMANCE
2
Media assets, making up over 75 of the average
web sites download size, are vitally important
to optimize. If you have video on your site, with
the average video coming in at 317kb per asset,
videos are the most important file type to
optimize. However, most websites dont have many
videos, if any. So, even though video files are
usually much larger than image assets, images
account for 66 of a web pages download size on
average. Optimizing images is often the
lowest-hanging fruit in terms of web performance.
Optimizing for image size, image resolution and
image format can lead to huge improvements in
performance. The fewer the assets and the smaller
their file size, the faster your assets will
download and the sooner theyll get painted to
the screen. Your users will enjoy a better user
experience both on their device, and, for those
with limited bandwidth, in their
wallets. GZip GZip works best for text-based
content, while providing little to no byte
shrinkage on previously-compressed assets. SVG is
a text-based image format. Minifying and GZipping
SVG image and font files can greatly reduce their
SVG file size. Minify first. Then Gzip. Remove
Image Metadata Cameras and software often add
metadata to images that is not seen by the web
user. This metadata can actually be a security
risk by exposing geographical data. Theres free
software that will strip EXIF metadata from
multiple images at a time. Resize Images Serve
the smallest image file for the screen size and
resolution. Optimize your HTML with
the ltpicturegt element or the srcset attribute,
and load your background images in CSS to serve
the smallest image. If you still support Internet
Explorer, consider using the Clown Car
Technique for responsive foreground images. I
prefer the Clown Car Technique as a fallback
over Picturefill, as the latter requires
JavaScript. Make sure you serve images scaled for
the browser. Requiring the browser to resize
images not only leads to downloading unneeded
pixels, especially in the case of large images,
but resized images take longer to decode and
paint.
3
Optimize Images Serving the smallest image size
for the screen size and resolution, as mentioned
above, is a good start. This can be done manually
or automated via PhotoShop, image-resizer, or a
plethora of plugins likely available to you
server-side or in your development environment.
The images themselves, no matter the size, should
be compressed as much as possible without
noticeably degrading the quality. You can reduce
your image file weights with desktop image
compression programs like ImageOptim or ImageAlpha
 for pngs. This process can also be automated in
the cloud with services like Instart Logics
own SmartVision, which employs machine learning
to maximize the optimization based on the content
of the image. Use the Right Image Format Image
types include SVG, GIF, JPEG, PNG, and WebP. If
you have a palette of less than 256 colors, like
a comic, or if you need animation, GIF may be the
right choice. If you need animation, and you need
the image to be scalable, SVG might be a better
choice (even if you dont need animation). If you
need transparency, a PNG-8 is usually smaller
than a GIF, but if you need more than 256 colors,
a PNG-24 might be the best option. Unfortunately,
PNG-24 can lead to huge file sizes, so consider a
JPEG. You can play with the quality settings when
saving JPEGs to reduce the file size. If you need
a high resolution transparent PNG which can lead
to huge file sizes, consider serving a JPEG with
a CSS mask this may add an HTTP request, but can
greatly reduce the number of total bytes, and is
supported in most mobile browsers. WebP has all
the benefits of animation, transparency, and
resolution, but is only supported in Blink
browsers including Opera and Chrome. For Edge
there is JPEG-XR. You can test for WebP or
JPEG-XR support, or use an image serving tool,
like SmartVision. Reduce the Number of
Images You can reduce the number of HTTP requests
by spriting the plethora of smaller images your
site might need. You can also reduce the number
of bytes by reducing the actual number of images
your page requires is your image worth 1,000
words or does your site work better without it?
4
Leverage CSS Leveraging CSS to reduce image size
and number of images could be a blog post in and
of itself. Maybe Ill write one soon. In the
meantime, the list of tips includes Image
Masking use image masking when you need a
transparent JPEG and dont want the huge file
size that comes with alpha transparent PNGs CSS
Effects use CSS properties like gradients,
borders, outlines, rounded corners, shadows, etc.
to create resolution-independent effects that
only require a few lines of minifiable and
gZippable text Sprites until HTTP/2 is fully
supported the use of image sprites and
background-position can be used, to reduce the
number of requests Animation when animating
GIFs, consider CSS animation using the
steps() timing function and sprites as an
alternative Filters use CSS filter effects
instead of multiple versions of the same image if
you want filters applied. This saves bytes, HTTP
requests, and time Media Queries Use media
queries to serve hi-res images to hi-res
devices By reducing the download size, your site
will be available to more people it will be more
accessible to those with metered bandwidth, less
memory, and limited networks. Ensure your site is
accessible to everyone  including screen reader
users and bots by including thealt attribute on
all your foreground images, with an
empty alt attribute being appropriate for purely
decorative images.
5
Instart Logic makes application delivery fast,
secure, and easy.
Instart Logic provides the first cloud
application delivery service in the world to
extend beyond the limited backend-only cloud
architectures of the past with an innovative,
intelligent end-to-end platform delivered as a
service.Our end-to-end platform combines
machine learning for performance and security
with a CDN for delivery. Designed for DevOps and
mobile-first applications.
Interested in learning more? Try it on your
site by creating an account for our free Starter
Edition service Preview our image optimization
capabilities in the Playground
Contact Sales