Metro Publisher gives you control over image compression across your site.
These can be configured in your general site settings under Admin > Settings > General or on individual images themselves by navigating to Editor > Files and then selecting the specific image you wish to adjust the compression for.
Example:
In the case of images with lots of flat color and hard edges that appear pixelated after uploading, entering the value 100 here would mean there will be no compression and the image should render sharply. However, zero compression on images, particularly large image formats such as PNGs, will increase your data transfer rates significantly.
Here's why:
Lossless image compression means that the original image data, for example from a digital camera in the RAW format, is retained, and with it the original file size as well.
So for site speed, lossy compression is preferable, because it reduces the file size so that the page will load more quickly. A lossless image, depending on the size of image the camera can take, could be 20MB or larger, for example, which is why we also limit file sizes in Metro Publisher.
The GIF format is actually lossless, but only supports 8-bit color (256 colors), which is why images saved in 24-bit color (RGB) will look grainy.
The JPG file format supports 24-bit color, and the PNG format supports both 8-bit and 24-bit.
The main advantage of the PNG format is that is supports transparency, however, it also has the largest filesize compared to GIFs or JPGs.
So unless you are dealing with graphics (as compared to photos), JPG is the correct filetype to use.
The resolution of an image is important for print, but not for screen display.
At Metro Publisher, we have so-called lazy loading implemented so that images below the fold (meaning any images that start from the bottom of a users screen on any device) don't load until the user scrolls down to that part of the screen. This ensures that text doesn't suddenly 'jump' when an image loads and that images aren't loaded unnecessarily.
NOTE: Our recommendation for formats to use when saving an image are:
- For pictures, JPG is the best format to save things. PNG is also an option, but it often results in bigger file sizes
- PNG's are great for images that require transparency
- GIFs are good to use for om graphics, where there is text and only a few colors
SVG files are not affected by compression settings. SVG files are actually text files, not image files. so they cannot be handled the same way.
For more information on Metro Publisher image compression, please visit this help document: Responsive Image Sizing
So-called "next gen" image formats are addressed here: PageSpeed Insights Report
Here is a helpful Google article on choosing the correct level of compression: Google WebDev: Lossless versus lossy image compression
Comments