suggestion: add data uri generator for small images
-
Hi ABTF developers;
In most cases, there are small images on each website e.g. logo. GTmetrix suggests “Combine images using CSS sprites” for these kinds of images. Instead, there’s another good method to reduce the number of requests to the server and that is data URI.
PLEASE SEE THIS: https://paulund.co.uk/convert-image-base64-phpI think it’s really helpful if you add a textarea and allow inserting URLs of small images in order to be replaced with data URIs.
Autoptimize plugin has this feature but we can’t choose which image to be converted to data URI version.
I hope my suggestion helps you to add a new feature to your great plugin.
Best regards.
-
Hi hyperexpert07,
Thank you very much for your suggestion!
We have a unique CSS sprite innovation planned but it will be added last. It will enable per page full CSS sprite optimization (also for WooCommerce categories with hundreds of different small images per page). We optimized a webshop using CSS sprites in 2007 and it’s still faster than most PWA optimized websites. Loading all images of a page via CSS sprites can improve the render speed 6x to 10x.
https://www.stockbusters.eu/ (2007 optimization based on CSS sprites)
In regards to the data-uri suggestion, we will try to add it in the next version of the plugin.
We are currently developing a new version of the plugin (v3) that will work differently. It will include advanced CSS optimization (PHP based) and delivery optimization (async loading).
The CSS optimization module contains many unique innovations, such as for example timed CSS loading and rendering. This makes it possible to load and unrender stylesheets based on for example a media query, or when an element scrolls into view.
On a mobile device this will enable to save +100 kb in data-transfer while the same page would load with +100 kb extra stylesheet data on big screens. There are many new abilities with the feature.
To enable professional performance tuning, the debug modus offers a Performance API object with several measure points. Using localStorage enables super fast CSS rendering (250kb CSS in 25ms, faster than the first paint and thus instant without using Critical CSS).
The new plugin will be a package of optimization modules that can be used stand alone or as a selection of modules. Some users were requesting that some of the functionality, such as PWA optimization, would be published as a separate plugin.
WordPress is currently reviewing our advanced Web Font Optimization plugin. Once that plugin is published and tested, the CSS, Javascript, PWA, HTML, Security Header and HTTP/2 optimization modules will be made available. Each plugin will have 100% focus on a aspect of web performance, making it more easy to improve the quality over time.
You can follow the developments on our Github page. A beta of the Web Font Optimization module is available on Github.
- The topic ‘suggestion: add data uri generator for small images’ is closed to new replies.
