A picture is worth a thousand words.
Using images on websites makes them look great, aesthetic and visually arresting. Images help contents appear more appealing and meaningful. It also encourages user engagement. Using variety of images on a site makes the site stand out.
Benefits of using images on websites comes with associated costs - specially, when images are not compressed and optimized for high performance throughput and maximum speed. A lot of images on a WordPress Website makes the site sluggish – a common WordPress phenomenon.
WordPress Image Compression
Images increase load time and hurt engagement making visitors impatient. Internet users expect a site to load blazing fast right before their eyes blink. Load time bigger than 2 seconds on average – and you lose your web traffic. Even a single second is enough for your visitor to make a switch over decision.
You simply can’t afford slow loading times on your WordPress website. You need to find a way out, or make one yourself, to speed up your website with all the images therein. The solution to the problem is Image Compression and Optimization. Shrink all image media files in size without losing visual quality. This ensures your website contents load faster.
Compressing and Optimizing Images in WordPress isn’t that difficult. There are hundreds of WordPress Plugins for Image Compression and Optimization that do the job on millions of websites.
In this series of articles, we cover everything you need to know about WP image compression and WP image optimizer plugins. Particularly, in this article, we cover the fundamentals of image compression focusing on WordPress perspective.
Lossy and Lossless Compression
Image Compression types come in two forms: lossless – an algorithm that reduces file size without affecting image quality; and lossy – an aggressive algorithm that drastically reduces file size sacrificing image quality.
Lossless Compression
Lossless Compression, a self-explanatory term, doesn’t reduce image quality. Lossless compression usually removes image meta data. Meta data includes information like location, date-time stamp, capturing device setting, color settings and ID3 tags. Most of the meta data are extra contextual data added by the capturing devices, like camera, and are not necessary to represent the image on display devices.
While it preserves the image quality at it full form, this isn’t always a welcoming experience. When applied, Lossless Images take a whole lot more bytes on disk, on network bandwidth and on hosting bills.
RAW, BMP, GIF and PNG format files are lossless.
You can use software like Adobe Photoshop, Adobe Lightroom, Affinity Photo, GIMP or other image editor software to compress images using lossless algorithm. Plenty of WordPress plugins also do the job for one to one, a few or bulk images.
When compared the lossless image files with original, there isn’t much of difference between pre-developed and post-developed images.
There is a catch however, and that’s cool. You can apply gzip or deflate compression on lossless formatted images.
Lossy compression
Lossy Compression, as I already told you, involves reducing file size at the expense of compromised image quality. With lossy compression, you will get somewhat degraded images. The more you want to reduce the file size, the more you sacrifice on image quality.
Lossy compression has its own benefits that actually outshine on the other side. Reducing file size also reduces hosting and bandwidth cost and makes pages appear on screen promptly. JPEG and GIF file formats support lossy compression.
Like the case of lossless, you can use software like Adobe Photoshop, Adobe Lightroom, Affinity Photo, GIMP or other image editor software to compress images using lossy algorithm. Again, Plenty of WordPress plugins also do the job for one to one, a few or bulk images.
Lossy compression comparison
When comparing lossy image compression rates vs quality, you’ll find that 50% above makes images still look as good as uncompressed, 33% to 50% makes images loosing appeals and becomes blurry. Compressing below 33% makes almost no sense, unless you really mean to do it anyway.
Generally, it is better to keep all complementary images under 100KB, and keep important large “matters” (images) under 512KB. When applying compression, notice the image quality. If the quality got hampered, feel free to increase the file size a bit more by sliding up the compression ratio.
WordPress 4.4, and above, has built-in support for responsive images, and WordPress automatically creates multiple copies varying sizes of each image uploaded to the media library. Moreover, nowadays, nearly all browsers can choose to download the most appropriate size among many alternative images copies, if you include the available sizes of an image into the srcset attribute.
Lossy vs Lossless Compression
Images make over 50% to 90% of an average web page size and bandwidth. Things become awry when added images tend to make the web page slow. Image compression is one of the best optimization to greatly reduce size and bandwidth, increase page speed and deduct costs.
Some images deserve utmost quality to be preserved and be viewed on the visitors’ display devices. These could be marketing, sales or landing page images. Lossless compression is probably a better choice in such case to case.
Post posts and other contents that accompany complementary images are less important to be of high quality. These images are numerous. Lossy compression will sufficiently reduce the size of such images that will bolster page speed performance.
To be lossless or to be lossy, that is the question! The answer depends on the purpose of the images.
Image Formats
WordPress Image Compression starts with basic knowledge of Image Formats. “Know Your Tools”, they say. You’ve to know the basic; master the basic to do fancy WordPress Imagery.
Four of the most popular image formats on the Internet are JPEG/JPG Format (having file extension .jpg), PNG Format (having file extension .png), SVG (having .png file extension) and GIF Format (having .gif file extension).
JPEG
JPEG is the best format for images with millions of colors – a mix of gradients, palettes, saturations and hues. JPEGs display photographic images in a large range of colors and can go under heavy optimization due to lossy compression. JPEG formatted files are used to display images in detailed photographic quality and color contours. JPEG files allow heavy optimization using lossy compression with or without visually noticeable distortion in image quality.
JPG format is ideal for photographic quality, however, the format does not support the transparent background. JPG format are natively able to reduce file sizes using lossy compression without losing much of the image quality. JPG files are used for larger and high resolution images. In short, JPG files are used to reproduce high quality images with least possible image file sizes.
With JPG format, you can export files in either baseline mode or progressive mode.
A baseline mode JPG is the one that has a single layer. When displayed on devices, if there is any latency in loading the image, visitors will see the image slowly being rendered on the screen from top to bottom.
Contrarily, a progressive mode JPG consists of many layers. Unlike the baseline mode, the image isn’t flat anymore. On slow connections, the visitors will see a blank box until the full image is transferred in to the visitors’ device and displayed accordingly.
JPGs load faster, however, they aren’t always winners. Excessive Compression applied to the image to reduce file size also affects image quality. Worse even, whenever a JPG file is edited and saved again, compression algorithm applies and degrades the image quality further. Eventually, you may notice unavoidable distortions in your images.
When using image editing software or image optimization plugins, be careful. Most of the software and plugins tend to prefer reduced file size over image quality unless you manually intervene.
PNG
PNG is used for limited colorful images like logos and images with transparent backgrounds. PNGs have excellent image quality, full transparency support, and they provide lossless compression.
The Lossless compression used by PNG preserved all the image data intact. Unlike the JPG format, which reduces file size, PNG formats instead algorithmically shrink according to the dimension of the image placeholder.
Though PNG files typically have very high quality representation of images, they are tad slower to load due to the fact that the image file sizes are usually larger.
GIF
GIF files have small file sizes, a limited color palette, and support transparency mode, and their lossless compression doesn’t allow for much optimization.
An image stored in PNG format usually takes more or less 50% bigger than the image stored in JPEG format. It doesn’t mean you’ll always stick to JPEG format. The choice should vary upon situation.
One good thing about GIF is, it’s the cheapest alternative to video formatted clips. GIFs are lightweight and quicker. You probably have seen many animated memes nodding, laughing or trolling on social media. These are GIF files.
SVG
SVG needs special notification. SVG is Scalable Vector Graphics image drawing commands that are rendered right into the visitors display devices. Nowadays web has got new looks with SVG images. Iconography is one of the most noted examples. SVG is lightweight and the most flexible of all image formats. SVGs are usually used for logos, favicons, icons (Font Awesome, for example), and other abstract visual effects.
WebP
WebP is relatively new image format introduced by Google. WebP supports both lossy and lossless compression options. WebP has capability of retaining image quality while reducing file size. WebP images can be 34% smaller than a JPG images and 26% smaller than PNG images, Google claimed.
However, WebP format is not supported by all browsers yet.
WordPress Codex Guideline on Image Size and Quality
According to WordPress Codex guide on how to determine the right image size and quality for your WordPress Website, you need to pay attention to the following four qualifying factors:
Image File Format
Image File Format refers to the format in which images are stored in a file.
There are many image file formats to store images. JPEG, PNG, SVG and GIF formats are commonly used image file formats. There is no rule about choosing file format, however, there are choices in accordance with situations.
Physical Size
Physical size determines how the image presents itself (the dimensions) of a piece of content on a display device.
The physical space an image occupies is determined by the devices the visitors browse from. An image for hero image is larger than images that complement contents like blog posts and pages. There is no ideal or standard size. Physical size denotes that, as the display devices vary, so the image appearances are. When using images for your WordPress website, think twice about multi device responsiveness of your images.
File Size
File size determines how many bytes of data the file requires to store the image information.
Of all the factors affecting image optimization for website speed and performance and responsiveness, the file size is one of the most important factors. WordPress that smaller images be less than 50 KB, and larger files be between 50 and 100KB.
Resolution
Resolution exhibits the number of pixels within an image. The higher the resolution, the clearer the image.
Resolution has two measures to count. One is physical X (horizontal) by Y (vertical) pixels on the display device and another one is DPI (Dots per Inch). 72 pixels per inch is a widely used standard minimum resolution to maintain. High-end handheld devices often offer 300 DPI or more. Printers offer varying DPI – which is not our concern right now.
WordPress advocates to be careful about using high resolutions. The greater the resolution in terms of X, Y; the higher the file size. A 4000 by 3000 pixels image may occupy 12MB space on file storage.
You often hear about 12MP camera, 36MP camera and so and so. This actually refers to X and Y dimensions multiplied and weighted by color bits. We’ll not be discussing color bits in our context. That’s photography, not WordPress.
APPENDIX I – Articles of the Series on “WordPress Image Compression & Optimization”
Chapter 1: WordPress Image Compression & Optimization
Chapter 2: WordPress Image Compression & Optimization Fundamentals
Chapter 3: Getting Started with WordPress Image Compression & Optimization
Chapter 4: WordPress Image Compression and Optimizer Plugins, Software and Tools
