How to convert to WebP all the images on the MODx
How to convert to WebP all the images on the MODx
Using Webp solves the «Serve images in next-gen formats» issue in Google Pagespeed Insights.
In short, WebP compresses the file better, all other things being equal, than older formats (png and jpeg) — which means it takes up less space on the hosting and loads faster in the browser when viewing the page.
The implementation of WebP is actively promoted by Google — they provide such statistics:
- WebP compresses images losslessly 26% better than PNG.
- WebP compresses lossy images better than JPEG by 25-34% with the same structural similarity index (SSIM)
- WebP supports lossless transparency (known as alpha) with a size increase of only 22%.
If the visitor’s browser does not support WebP, then the CDN will return the old format (png / jpeg), but compressed (optimized for the Web)
What is image compression
Image optimization is special processing of a graphic file in order to minimize its size without loss of visual quality.
To carry out this procedure, there are a large number of fairly complex algorithms. However, they are all based on the same basis — all the service data there (for example, the name of the program that stores the file, etc.) must be removed from the graphic file, and also, using special programs, merge / smooth similar colors.
As a result, we get the same image, which visually has not changed. However, the volume (weight) of this file in bytes will be much less than the original. If this processing is carried out correctly, the image file can be reduced to 98% without losing image quality.
This means that the pictures on the pages of the site will be loaded many times faster after the optimization.
What will optimize images for your site
- Save disk space.
- Speed up page loading.
- Minimum server load.
- Increase conversion.
- Better site ranking for search results.
It has been proven that website acceleration can improve behavioral factors, as well as increase website conversion (increase sales). The longer the page of the site loads, the fewer customers will be able to perform certain target actions there. If your site on the Internet will not work fast enough, you have every chance to miss your potential income. Acceleration of the online resource will provide an opportunity to improve the conversion and due to this significantly increase revenue and attract more customers.
- There are no monthly payments.
- Full Automation.
- Free connection assistance.
- To connect and use the service, you do not need to have special skills in programming or administration.
- There are no restrictions on image size in the system.
- Friendly technical support.
How can optimizing images for MODx speed up a site?
A page of any site most often consists of:
- html-code (text content, layout, markup);
- css files with page styles.
Such an item as an image occupies most of the entire volume on the site’s pages and is the “heaviest” part of the pages. Reduction (optimization) of images will undoubtedly significantly make it faster to download any online resource.
Accordingly, if you change (down) the size of the images, all pages of the site will start loading much faster.
Compressing the images on the site will make it possible to reduce their volume to 75-98%, without losing their visual quality.
Smart WebP, PNG and JPEG compression
Go PRO and unlock all the awesome features of Kraken.io PRO. Already a PRO member? Log in here.
Kraken.io PRO comes with: Full API Access, Web Interface PRO, WordPress and Magento Plugins and Kraken.io Cloud Storage.
Image Quality Settings:
JPEG Quality (1-100): PNG Quality (1-100):
- Select all
Automatic Image Orientation:
Click to upload or drag-and-drop your images here
Save All Kraked Files
in your Dropbox
Image Optimization Mode
Kraken.io offers several optimization modes The mode you select should depend on your specific requirements — such as the type of image that you are compressing, and the target audience of your images.
Our intelligent lossy optimization typically produces savings of at least 60% of the initial file weight; with savings of 80% to 90% occurring frequently. Our default intelligent lossy algorithm has been specifically designed to always produces images of outstanding quality, and never of unacceptable quality degradation. In most cases, you will not be able to tell the optimized result from the original, even upon close inspection. We recommend this mode to most of our users, and for most use-cases.
This mode will save as much file weight as possible without altering a single pixel, hence the name «lossless» — meaning no information is lost whatsoever. Use this mode when your requirement is that the image should retain 100% of its initial visual information — such as for sensitive brand and marketing visuals.
Expert view is designed for users who are already familiar with image processing and optimization. Using this mode you can set different quality levels for lossy JPEG and PNG optimization, preserve certain entries in the EXIF metadata, and automatically orient your images. You can even set a custom chroma subsampling value for JPEG images.
Image Resizing Strategies
When you need to generate sets of images in different sizes or dimensions, our easy-to-use image resizing interface has you covered. Just specify your required dimensions and pick one of several strategies for resizing your images, prior to optimization:
Exact Resize to exact width and height. Aspect ratio will not be maintained Fit This option will crop and resize your images to fit the desired width and height Portrait Exact height will be set, width will be adjusted according to aspect ratio Landscape Exact width will be set, height will be adjusted according to aspect ratio Crop This option will crop your images to the exact size you specify with no distortion Square This strategy will first crop the image by its shorter dimension to make it a square, then resize it to the specified size Auto The best strategy (portrait or landscape) will be selected for a given image according to its aspect ratio
Upload a ZIP Archive Containing One or More Images (up to 1GB)
We will extract all files from the archive, optimize all the images found and when complete you’ll be able to download the entire processed ZIP archive with folder structure perfectly maintained.
Advanced image optimization tool
Automatically compress images achieving the highest compression ratio at consistent image quality.
What is Optimage?
Optimage is a simple yet powerful image optimization tool that provides the highest compression ratio at consistent visual quality, implementing many best practices for using images on web and mobile.
It is the first tool to achieve visually lossless compression in a comprehensive set of third-party tests and the new state of the art in image compression.
It can resize and convert common image and video formats, and keep best quality required for professional photography.
It is designed to make automatic image optimization accessible and inclusive to everyone. Thousands of people have been successfully using Optimage to optimize their images.
Click to see Dark mode
Visually lossless compression
Optimage uses novel perceptual metrics and improved encoders to reduce image size by up to 90% without losing visual quality.
|PNG||616 KB||578 KB||–||–||415 KB||–||–|
|JPEG||3.68 MB||2.08 MB||4.21 MB||3.74 MB||3.58 MB||3.63 MB||2.68 MB|
* Score shows how many images are visually indistinguishable from originals. Additional tests revealed other issues.
Nearly optimal compression
Optimage provides the highest compression ratio by using advanced image reduction and data compression algorithms.
|PNG||599 KB||274 KB||296 KB||297 KB||304 KB||323 KB||350 KB|
|JPEG||17.9 MB||16.9 MB||16.9 MB||–||–||–||–|
Clean and simple interface
Optimage offers a full range of professional features to optimize your images for today’s web, all packed into a remarkably clean and simple interface.
Batch image processing
Optimage lets you quickly resize images and videos using a high-quality resampling algorithm and convert between a broad range of industry standard formats, making it easy to create optimized assets for your target screen sizes and resolutions.
Why use Optimage?
Improve your website performance
If you build websites, it is important to make all image assets, photographs and other media as small as possible because most users, especially on mobile, will leave a page that takes longer than three seconds to load or contains low-quality images, and because page speed improves SEO ranking for both mobile and desktop searches.
Reduce app size
Following Apple’s HIG guidelines and Google’s Android guides, automatically optimize image assets including app icons and iMessage stickers to save storage space, reduce mobile data usage and improve app performance for your users.
Compress PDF documents
Reduce the size of your scanned PDF documents with max resolution 150dpi which is perfect for sharing on the web and via email.
Optimize vector graphics
Minimize bloated SVG or PDF images produced in tools like Illustrator, Photoshop or Sketch for your website or app.
Optimize your images for social media like Twitter, Facebook or Instagram to prevent personal data collection, upload faster and preserve image quality.
Reduce file attachments
Reduce the size of your images and documents because there are often strict file size limits for email and form attachments, and nobody wants to receive huge files.
Protect your privacy
Securely remove any hidden sensitive information from photographs and documents without relying on third-party services that may collect your data.
Automatic image compression
- Intelligent lossy and lossless image compression
- Achieve consistent good quality with custom perceptual image quality metrics and improved encoders
- Nearly optimal image compression, the highest lossless compression density among known compressors
- Avoid double compression with smart no-reference image quality assessment
- Intelligently convert 24-bit PNG images to much smaller 8-bit indexed color images with full alpha transparency using perceptual color quantization and adaptive dithering
- Greatly reduce the size of full-color images using alternative near-lossless compression
- Full color management with ICC profile support
- Convert to sRGB for consistent color on the web and mobile
- Automatic chroma subsampling and grayscale conversion
- Securely remove personal information and hidden metadata (Exif, XMP, IPTC, GPS geotags, comments, thumbnails, etc) while preserving some useful metadata (Android 9-patches, aPNG, etc)
- Automatically and losslessly rotate photographs based on Exif Orientation tag
- Scale a video or animation and adjust the frame rate for optimal file size
Powerful image workflow
- Set up batch processing to streamline the optimization of large numbers of images
- Fast and autoscalable parallel processing on modern multicore systems
- Full control over optimization process with pausing and automatic termination
- Resize, convert and rename images in batch mode
- High-quality image scaling in 128 bits-per-pixel linear light using Lanczos resampling
- Configurable file renaming and destination folder, absolute or relative
- Export optimized files to a chosen folder preserving subfolder structure
- Copy or move files using drag-and-drop or clipboard
- Overwrite or move originals to Trash to restore any time
- Preserve file timestamps to keep your library in order
- Fully native app available for Mac, Windows (coming later) and Linux (coming later)
- Simple command line tool to integrate into your image workflow
- Seamless integration with Finder and Sketch
- Quickly share optimized images using extensions in the Share menu
Support for industry standards
- Optimize all common image formats including JPEG, PNG, APNG, GIF, SVG, WebP, HEIC and PDF
- Optimize most common video formats including MPEG-4, H.264, WebM, Ogg and AV1
- Minify ICO Windows icons, or favicons, and ICNS Apple icons
High-quality format conversion
- Convert all common image formats supported by your system including HEIC, JPEG2000, TIFF and RAW
- Convert between animation and video formats including GIF, APNG, WebP, MP4, WebM, Ogg Theora, HEVC, AV1 and ProRes
- Convert Apple’s new high efficiency image format HEIC to optimized JPEG, PNG or WebP for sharing
- Convert a camera raw image to JPEG or WebP image optimized for sharing
- Convert an animated GIF to efficient MP4, WebM or AV1 video using accurate dithering removal and color depth restoration
- Create a high-quality animated GIF from MOV, MP4, WebM, Ogg or ProRes video using improved color quantization and error diffusion dithering
- Avoid the color shift when converting an animated GIF, APNG or WebP to MP4 video
- Easily create responsive images and thumbnails using high-quality scaling
- Generate high-quality previews for PDF, PSD and AI documents
All images shown below are for illustration purpose only,
these images are the property of their respective and rightful owners.
After (100 779 bytes) Before (214 481 bytes) macOS Catalina wallpaper by Apple
Original – 214 481 bytes, optimized – 100 779 bytes, saved – 113 702 bytes (53.01 %) After (113 082 bytes) Before (280 233 bytes) Apple event photo
Original – 280 233 bytes, optimized – 113 082 bytes, saved – 167 151 bytes (59.65 %) After (91 488 bytes) Before (371 791 bytes) Tesla Model S product image
Original – 371 791 bytes, optimized – 91 488 bytes, saved – 280 303 bytes (75.39 %) After (154 909 bytes) Before (342 322 bytes) CRS-4 Mission Launch by SpaceX
Original (Adobe RGB) – 342 322 bytes, optimized (sRGB) – 154 909 bytes, saved – 187 413 bytes (54.75 %) After (153 686 bytes) Before (444 641 bytes) WWDC19 promo image
Original – 444 641 bytes, optimized – 153 686 bytes, saved – 290 955 bytes (65.44 %) After (6 450 bytes) Before (13 504 bytes) Google logotype
Original – 13 504 bytes, optimized – 6 450 bytes, saved – 7 054 bytes (52.24 %) After (89 491 bytes) Before (203 237 bytes) Firefox Quantum icon
Original – 203 237 bytes, optimized – 89 491 bytes, saved – 113 746 bytes (55.97 %) After (19 181 bytes) Before (45 807 bytes) Wikipedia logotype
Original – 45 807 bytes, optimized – 19 181 bytes, saved – 26 626 bytes (58.13 %) After (68 193 bytes) Before (152 764 bytes) Jony Ive, former Apple’s chief design officer
Original – 152 764 bytes, optimized – 68 193 bytes, saved – 84 571 bytes (55.36 %)
8 Recommended Image Optimization Tools for 2020
It is not a secret that people are captivated by eye-catching visual media. Statistics show that large and high-quality images are a significant factor in drawing users’ attention. Now, that is all great, but typically images form around 21% of the total web page size. Therefore, if you do not want to have a bulky, slow-loading website, you have to learn how to reduce the file sizes of your images as much as possible without interfering with their quality. Fortunately, optimizing your images is one of the easiest and straightforward tasks to perform, which will positively impact several essential aspects of your website.
As a web hosting provider, HostArmada understands how critical the loading speed is for every website owner. Therefore, we have implemented intelligent caching systems on a server level intended for static file caching, which show a dramatic reduction of the loading time. Combined with well-optimized images, the result will be blazing fast performance.
Benefits of Optimizing your Images
The loading speed of your website is a significant factor affecting your visitors’ experience and your SEO ranking. Many website owners tend to neglige the importance of compressing images, which can notably increase the loading period of their website and consequently frustrate users. Optimizing your images brings the following general benefits:
- Shorter page loading time – Naturally, as smaller the images are in size, the faster the website page is loaded. This directly affects your visitors’ experience while they are interacting with your site. A quickly loaded page will positively increase their satisfaction and overall impression of your brand.
- SEO improvement – Search Engines do not like slow websites. The page loading speed is a search engine ranking criteria, therefore, reducing the loading period will consequently impact your SEO and help you rank higher.
- Fewer resources required – Formatting your images will save your web hosting resources – smaller files require less storage and generate less bandwidth.
If you are a newly started photographer or love making your images crispy and sharp, we recommend checking FixThePhoto.
Their photography post-processing services can turn a seemingly moderate photo into state-of-the-art and distinguish you from your competitors!
Image Compression Tools
Image compression tools and software are used to reduce the value of transmission and storage size of images. There are many available online and offline, free, and paid software you can use to optimize your images. Some of them allow you to manually adjust the image, while others automatically perform the task for you. To shorten up the list and help you choose the most suitable and convenient tool for your individual needs, we have reviewed the best tools for 2020.
Before we step into reviewing the tools, we would like to explain the difference between the two compression types.
- Lossy – This method allows you to significantly reduce the file size by eliminating parts of the data. It can degrade the images, so you have to be careful with it.
- Lossless – This method compresses the data without interfering with the image quality.
TinyPNG is one of the oldest and widely used free web-based image compression tools. It uses intelligent lossy techniques for reducing the file size of JPEG and PNG images. It allows you to upload up to 20 images at a time, and up to 100 a month with their free version. The maximum file size per image is 5 MB. TinyPNG automatically compresses the images by converting CMYK to RBG and no visually noticeable loss in the image quality. JPEG images are compressed by 60%, while PNG images by 80%. When the compression is completed, you are provided with an archive to download on your local device.
Apart from the web version, TinyPNG has ready to use WordPress plugin and Magento extension, which you can easily integrate into your website.
The downside of TinyPNG is the size limitation and the inability to adjust the quality reduction.
Compressor.io is another excellent free online image compression tool. It allows you to compress JPEG, PNG, GIF, SVG, and WebP files in three modes – Lossy and Lossless with the free version, and Custom with the pro version. Among its advantages are its flexibility and the ability to reduce up to 90% of the file size. The file size limit is 10 MB. The process is automated and as simple as dragging and dropping the desired file.
The downside of Compressor.io is that it does not allow bulk image compression, you can optimize a single image at a time. If you need to compress a lot of images, the task can become really time-consuming.
Kraken.io is a truly powerful image compression tool, which comes with free and pro versions. It supports JPG, PNG, and GIF formats and allows you to optimize up to 20 images at once. When the process is completed, you will be provided with a downloadable archive containing all files. Compared to the previous two tools, Kraken allows you the option to export the files to Box, and import your files directly from Box, DropBox, and Google Drive, as well as from your device. Kraken.io has three compression modes – automatic Lossy and Lossless modes, and manual Expert mode, which grants extra flexibility.
In their Pro version, you will find some truly impressive features, such as unrestricted upload image size, image resizing, Kraken Cloud storage, access to their API, including integration to WordPress and Magento, and more.
The major downside of Kraken.io is the limitation of 1MB per file with the free version.
Optimizilla is a free online tool that significantly reduces file sizes without sacrificing quality. Optimizilla supports JPEG and PNG file formats and allows you to compress up to 20 images at one go. It uses a smart lossy compression algorithm and provides you with a .zip file of all images when the process is completed.
One of the great features of Optimizilla is the option to select the compression rate and control quality adjusting. Furthermore, it allows you to preview the compressed images and compare them to the originals.
CompressNow is a flexible web-based tool that allows you to control the compression level. With CompressNow, you can optimize up to 10 PNG, JPEG, GIF, or JPG images in bulk. The file limit of this tool is extended to up to 9 MB. The ability to control the compression rate by percentage is among the great advantages of CompressNow, especially if you want to apply the same rate for multiple images at once.
FileOptimizer is free and reliable compression software for Windows OS. Its interface is intuitive, and it supports various file formats, including GIF, JPEG, and PNG. You can add images as simple as dragging and dropping them, and you will be presented with a comparison between the original image size and the size of the compressed copy.
FileOptimizer replaces the original copy with the compressed one by directing it to the Recycle Bin. Even though it can be recovered if needed, this could be inconvenient for some users.
Trimage is a free compression cross-platform for Unix-based OS. It utilizes high-level lossless compression, and it removes EXIF and other metadata for the best possible results. It has a GUI as well as a command-line interface. It is simple and intuitive to use, and it allows you to compress PNG and JPG files without compromising their quality.
ImageOptim is a free image compression software for Mac. It uses lossless image compression and removes bloated metadata for the best ratio between size reduction and quality loss. With an intuitive and simple drag-and-drop interface, you can compress multiple images. The process is automated, so it does not require any advanced knowledge. ImageOptim combines various optimization tools to grant the highest possible JPEG, PNG, GIF, and SVG file size reduction.
Optimizing your images is something you definitely do not have to neglige and overlook. As you can see, this is a relatively simple task, and finding the most suitable tool for your individual needs can make it less time-consuming and effortless. Combining image compression with the general practice for image optimization, such as using vector images along with JPG and PNG images, using CSS3 effects instead of images, implementing lazy-loading images, replacing text within images with web fonts, and using CDN for serving your images, will lead to a drastic improvement in the loading speed of your website.