Photo. Close-view of a camera on a red and black background.
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

Nail File Limits & Boost Web Page Speeds with Image Compression

Digital web banners and programmatic ads are just two design projects requiring mindfulness of file sizes. Therefore, image compression is a must.

Web projects don’t demand the same high resolution for displaying digital images the way printers need it for printed images. Web graphics can still produce crisp images with as low as 72 PPI, whereas a printed image really needs 300 DPI for the inks and toners to produce crisp images. Of course, even a web graphic looks better and better with more resolution.

However, with increased web resolutions also comes increased file sizes to store all that extra detailed image data. Increased file sizes cause slow download and display times for website visitors and require greater and more expensive web server storage options for webmasters.

For these reasons, several advertising vendors cap digital web banner and ad sizes, such as the common limit of 40 KB.

Fortunately, image compression tricks can help nail file size limits.

Have Your Images and Your Web Page Speed Too

Images are a vital part of any website. They attract visitors, guide them through the web pages, and can explain complicated processes.

There is no hard and fast rule for what image or file size bogs a website’s load time. However, several best practices can boost page speed:

  • Lower PPI
  • Image Compression
  • 100% Scaling
  • CSS or SVG Simple Graphics & Icons
  • Image Sizes at Least Under 1 MB
  • Image 1366 PX Wide or Less

Other methods, like exporting JPEG images compressed progressively have no impact on load time but do give users the impression of faster load times, as more of the image is immediately visible.

Some speed boosts work by reducing file sizes and therefore download times, like low-resolution exports and higher image compression settings.

Lower Pixels per Inch (PPI)

Export images with lower resolutions to reduce file size.

Many people operate off of the “72 PPI rule,” but this isn’t a standard. Apple and Adobe push 72 PPI. Microsoft uses 96 PPI. 144 PPI came from dot matrix printing, and then it became the 2X retina version of Apple/Adobe’s 72 PPI. Most computer’s with today’s technology display at least 100 PPI. So, really, 72 PPI is more like a guideline!

Image Compression

Image compression removes extraneous image data to reduce the file size of the image.

Image metadata, for example, includes information on copyright, author, creation date, camera specs, location, and more. Metadata is informative but has no affect image quality at all. Image compression can safely remove this data to save file size.

Image compression can also reduce file size by “combining” pixels and downgrading an image’s resolution. Decreasing resolution is very effective in reducing file size. Yet it can also result in drastic quality changes. Determine a balance between image quality and sharpness versus high compression and small file sizes. Several image optimization tools result in 30–40% file size savings without resulting in apparent quality loss. Popular tools include Image Optim and Kraken.io. WordPress plugins like WP Smush work for CMS website media libraries too.

Another way image compression tools reduce file size is by removing transparency and flattening blends. For example, the background of a PNG graphic might match the web design’s background color rather than leaving its own background clear.

100% Scaling

Exporting an image scaled to precisely its final display size can also boost speed. A large image scaled to a size smaller than its original results in a higher resolution—but also requires web browsers to download images with higher resolutions and file sizes than necessary for the user to enjoy the image.

This practice can be tricky when using CMS websites like WordPress.

Most themes copy each uploaded image and automatically scale it to a size pre-determined by the theme developer. More image sizes mean devices have closer display matches, boosting web page speeds. Yet more image sizes also increase file storage on the CMS servers and make WordPress run slower when used in excess. Google Page Speed and WordPress optimization plugins like Hummingbird often weigh this factor heavily.

Like image compression, 100% scaling on CMS websites requires a delicate balance. Standardize image sizes where possible. Determine a few sizes that are commonly used, such as thumbnail images, icons, and feature images. Then, add these image sizes to the theme if the theme doesn’t include them itself. This reduces how many new images the CMS generates to only the most commonly used sizes, freeing up server space and displaying images as close to as 100% (no less, but not much more either).

CSS and/or SVG Graphics

CSS and SVG use the web processor’s own rendering engine to “draw” web graphics live on the web page as it loads. Users see the graphics appear near instantly when the page loads. (However, some web developers add JavaScript to animate the “drawing” for effect.) However, like many other tactics, use CSS and SVG in moderation. Drawing the CSS and SVG requires the processing engine to build on-site. Elaborate illustrations are resource-heavy and cause the web page speed to drop instead. Reserve CSS and SVG illustrations for simple graphics like icons and logos for the best effect. If a more elaborate illustration is necessary, keep remaining web page content light to free up additional resources.

Image File Sizes at Least Under 1 MB

On today’s mobile and responsive web, it’s rare for an image to be 1 MB or larger in size, even with growing monitor resolutions, RAM capabilities, and data plans. A file that large still requires a noticeable download time, slowing down the speed of the web page.

Ideally, file sizes should be considerably below 1 MB. “Old school” rules advise designers to keep image file sizes as close to 200 KB as possible, although “new school” rules have increased this number to 300–400 KB. However, advertising is even more strict. Several advertising vendors cap digital web banner and ad sizes, such as the common limit of 40 KB. Social media sites often limit image file sizes to just over 1 MB, at 1024 KB.

Image Dimensions 1366PX Wide or Less

One last item for consideration is exporting images no wider than 1366 PX. Images larger than 1366 PX could be very resource-demanding of smaller browsers. This is because 1366 PX represents 34% of the market as of January 2018, holding the quorum of browser sizes. Combined with browser sizes 1366 PX and below, images sized to 1366 PX or less fit within the majority of all browsers at 52% of the market. All the way at the other end, the largest browser size at 2560×1440 currently holds only 2% of the market. Therefore, scaling images to 1366 PX wide or less satisfies the needs of most browsers while preventing a lot of unnecessary bloating to file sizes.

Conclusion

Several tactics exist to help balance between web page speed, file size, and image quality. Mix and match, and adjust as needed, to find what works for each particular web design.