Joey Hoer

Modern Image Specifications

I am often asked by our clients and their partners, “Can you provide guidance on the size or dimensions of the images we should use?” The answer is quite simple: Most modern themes are designed to support any image uploaded into the page builder. Using a technology called object-fit, an image can be sized to either cover the available space or be contained within it. Here’s a brief overview of how object-fit works and why specifying exact pixel dimensions is impractical.

Learn how modern image specifications are determined

Image Optimization Primer

https://twitter.com/grigs/status/837026587019128832

Image Primer

Data Compression

Images are data. Image compression is data compression. To understand the different types of image formats, you must first have a basic understanding of compression.

There are two different types of data compression techniques: lossless and lossy. During lossless compression, all data is preserved and no quality is lost. During lossy compression, some data may be lost. Generally, lossy optimizations are only acceptable when there is little perceptible difference to the end user.

You are probably already familiar with different types of lossless and lossy data formats, though you may not know it. If you’ve ever opened a ZIP file, you’ve experienced lossless compression. Many people use ZIP to archive and compress documents because the recipient can extract 100% of the original data without any loss. You may also listen to MP3s, which uses lossy compression. The human ear can only perceive a limited range of tones, so many of us are willing to sacrifice quality for file size. We’d rather have 1,000 more songs in our library than an unnoticeable increase in quality.

Lossless
Data is preserved during optimization/compression Lossy
Some data is lost during optimization/compression

Image Compression

The term “compression,” as it relates to images, is often used interchangeably with the word “optimization.” If we are to be pedantic, many of the most common image formats are compressed data by nature; the act of optimizing data, however, is tweaking the compression settings, or modifying the data, so that the resulting file size is smaller than that of the original file.

Choosing the right image format may be the most important part of compressing images successfully. If you select the wrong format, the amount of compression you will achieve will be stunted. So, what are the different types of image formats, and how should I use them?

GIF

The Graphics Interchange Format GIF is a lossless data format. GIF supports transparency and created in 1987r http://httparchive.org/trends.php http://httparchive.org/interesting.php

Optimizing PNGs

When I visit a site for the first time, if I see something that looks interesting or unusual, or if I’m bored, I’ll pop open Web Inspector to check out whats going on behind the scenes. One of the things that baffles me is seeing a linear gradient background pattern that’s 10px wide. If you’re going to go through all the trouble of slicing an image, you may as well do it right. One of the main points of slicing an image is to optimize image size and improve page load. That goes for other image optimization techniques as well; sprite sheets, datauris, if you’re not optimizing your images preproduction then you’re not doing the best you can.

PNGs comes in a variety of flavors PNG8, PNG24, and PNG32. The number represents the bit depth. If you’re not sure what that means think of it this way: a bit is a switch that has two possible states - either on or off. So, if you’ve got a number of bits, the total number of possible combinations for those bits can be found by taking two to the power of that number. Two to the eighth power equal 256, so a 8bit PNG supports a total of 256 possible colors. Likewise taking two to the 24th power is 16777216, PNG24 supports16 million colors

Quantizers like pnqquant and pngnq convert 24bit PNGs to 8bit PNGs with a full alpha channel through a process known as quantization. Quantization is the procedure of constraining or limiting a relatively large set of values to a discrete set of values. When discussing image optimization.

optipng

pngcrush compresses images by trying various combinations of DEFLATE algorithm.

PNG is popular and effective because of its ability to losslessly compress data using DEFLATE. advpng (part of advancecomp) optimizes images by removing metadata, concatenating the image data and re-encoding of the image using the 7-Zip deflate method. pngout is another utility that utilizes the proprietary KZIP deflate algorithm that focuses on space over speed.

imagemagick

Putting it all together

ImageOptim image_optim When it comes to optimizing images for the web, intelligent slicing is ver important, and it can also be time consuming.

Let’s take the CSS string padding-bottom: 10px; padding-left: 10px; for example; DEFLATE would identify matching portions of the string (padding- and : 10px;) and use pointers to compress the data. There is a special number in DEFLATE and Data URIs - 32. This method will be particularly effective for images under 24KB because

If you really want to squeeze every bit out of your images, slicing images intelligently alone isn’t going to cut it.

Applying gzip compression to PNGs individually won’t typically yield impressive results, in fact you may be surprised to discover that your images have grown is size. This is because PNGs are already compressed using DEFLATE, the same algorithm used by gzip. DEFLATE works, in part, by eliminating redundancy in a file, which makes it particularly effective at compressing repetitive data like HTML, CSS, JavaScript, SVG and images with areas of continuous color like PNGs. Attempting to compress data which has already been compressed won’t produce significant reductions because there is less repetition within the file, and the reason its file size may increase is due to header information that identifies how to deflate the file. There is a strategy to further compress your images your images, but first they have to get bigger. At this point you can’t compress the images individually, but if you could increase the amount of repetition by grouping the files together you may be able to achieve a higher level of compression. Traditionally you would do this by compiling a sprite sheet, but you’d rea lly want to do this before compressing the files. By using data URIs in your CSS file and leveraging gzip compression on the CSS file, you’ll increase repetition. Data URIs, when encoded in base64, are 33% larger than the original file size. Fortunately, if you combine all of your data URIs in a single CSS, and leverage gzip compression on the CSS, you’re almost guaranteed to see a resulting file size of equal or less size than the individual images. Plus you’ll only be performing a single http request.

676 images at 45.1MB (45077885) compressed to 22.3MB (22277475) encoded to 29.6MB (29639817) compressed to 22.2MB (22191816). ImageOptim with baseline settings (40474998)

Connections Per Hostname (6-8)

Squeezing bytes saves time. Time is money.

As web developers, we don’t deal in certainty, we deal in statistics. What’s be for the majority of our users often dictates our decisions. Having evidence to support our decisions is crucial.

Optimizing JPEGs

Lossless Compression

JPEGMini is a promising tool that claims to reduce a JPEGs size by up to 80% with no loss of perceptual quality. My personal experience with the tool is that …

JPEGs are lossy. We all know that; it’s like the first thing you learned when you were playing around in MS Paint in the 3rd grade. However, there is a way to perform certain actions on JPEGs losslessly. libjpeg and it’s command line companion, jpegtran, can squeeze the last few bytes out of JPEGs by stripping unnecessary metadata, converting to progressive JPEGs, and optimizing the Huffman coding layer. The popular jpegrescan script, originally included in jpgcrush, utilizes jpgtran to optimize the Huffman table and progressive rendering losslessly. Generally JPEGs can see a 3-5% reduction in size when optimized with jpegrescan.

Another Approach

WebP

  <picture>
    <source type="image/webp"
            srcset="images/worlds-300.webp 300w,
                    images/worlds-600.webp 600w,
                    images/worlds-800.webp 800w,
                    images/worlds.webp 1000w"
             />
    <source srcset="images/worlds-300.jpg 300w,
                    images/worlds-600.jpg 600w,
                    images/worlds-800.jpg 800w,
                    images/worlds.jpg 1000w"
            />
    <img src="images/worlds-300.jpg"
    alt="The Speed of Light and the Timing of Eclipses" />
  </picture>

The first rule of image optimization: format is everything.

You really only have two formats to choose from: JPEG and PNG. JPEG is great at compressing photographic content, while PNG is better at compressing illustrations and text. Most of the photos you’ll upload to your site will be JPEG. If an imahe contains both photographic content and an illustration or text, it should be compressed as JPEG. The only time you should consider compressing a photographic image as a PNG is if it contains transparency (JPEG doesn’t support transparency).

The second rule of image optimization: image dimensions affect filesize.

You should upload images at the maximum dimensions they are intended to be used. Putting a 1200x600px image into a 600x300px block means that the user will need to download unecessary information at the expense of performance.

Note: Magento has an internal ability to create thumbnails (for product images) but this does not apply to static blocks and CMS content. It’s very important that all CMS content is uploded at the correct dimensions.

The third rule of image optimization: image editors are not great at compression.

Most image editors produce images that are larger than necessary because they want their product to be fast. Optimizing images can be a CPU intensive task that takes time, especially for PNGs. There are “aftermarket” image optimization tools that can significantly reduce the filesize of an image with little to no visual quality loss.

Additionally, image editor vendors like to insert custom metadata which is generally useless on the web and can be removed.

I’d highly suggest running your images through an optimization tool like ImageOptim (Mac only) before uploading them. Take a look at the prefences if your interested in reducing filesize even further. Always backup images before optimizing – just in case.

The fourth rule of image optimization: some quality loss is acceptable.

The bottom line is that we want every site to look and perform great. Every lossy optimization (JPEG is a lossy file format) is a tradeoff between quality and performance, some quality loss is to be expected and is acceptable. You’ll have to determine where to draw the line between quality and performance, but I tend to go for the 60% quality mark in Photoshop and the 80% mark in ImageOptim. (The two scales are not equivalent, and the explanation as to why is technical).

PNG Optimization

Ico is a a container format for BMP images, which does not support compression, thus the result. PNGwolf - http://bjoern.hoehrmann.de/pngwolf/

pngwolf

JPEG Optimization

SVG

Diffing

Huffmix

Kzip2gz

Fonts

GIFs

Funny

PNG vs SVG

PNG, as a bitmap file format, cannot scale without losing quality. You would need to update the file each time you change the image size.

Designers icons in various sizes (for PNG), is a waste of time, you can save time and space with single vector icon (Einstein would be proud). Even with all the sizes, the size you need my not be the size they produced.

You cannot change the PNG colors, the stroke size, dynamically.

Deeper

Metadata

Client Hints

[MPEG1] I-frames can be considered effectively identical to baseline JPEG images.

# Create a single-frame movie file using h.264
ffmpeg -i FILENAME.png -an -vcodec libx264 -coder 1 -flags +loop -cmp +chroma -subq 10 -qcomp 0.6 -qmin 10 -qmax 51 -qdiff 4 -profile:v high -level 4.2 -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" -trellis 2 -partitions +parti8x8+parti4x4 -crf 24 -threads 0 -r 25 -g 25 -y FILENAME.mp4

JPEG Alpha

Experimental Formats https://cloudinary.com/blog/introducing_fuif_responsive_images_by_design

PageSpeed Insights

“Performance” is a vague term that may refer to any number of characteristics depending upon the context in which it is used. When used in the context of ecommerce, the “performance” of a store might be defined by the revenue generated over a given time period. Alternatively, “performance” may instead refer to conversion rate, average order value, or customer life time value. In many ways, “performance” is determined by the metrics which are used to measure it.

Performance is also relative. Even in the a specific context (e.g revenue)—what comprises “good” or “bad” performance? In the case of revenue, it is usually agreed that “good” performance requires an increase in revenue. However, a 1% increase in revenue over a year may not be good if the goal was to achieve a 10% increase. To assess performance, one must not only define common methods with which to measure performance, but also the goals by which to measure performance against.

When referring to the web at large, “performance” is often synonymous with site speed.

Learn about important metrics related to site speed.
©2025 Joey Hoer. All rights reserved.