Switch from theme images to SVG's

Hey Yigit and team,

Would like to make another suggestion to improve the theme.

Currently the theme uses png images for a number of things, for example for star ratings on a WooCommerce products. Examples can be found here:

wp-content/themes/enfold/config-woocommerce/images/

or the search icon used in the search box.

Also in the backend, the ALB elements themselves use PNG’s for the icons depicting each element.

This introduces a few problems.

For instance, with the WooCommerce star ratings for instance, this is loaded as a background image and therefore doesn’t have srcset which means it’s not actually Retina-ready. Same with the ALB elements in the backend on retina screens, these are blurry on Retina devices as well. Plus we have to load up some PNG’s every time to display these.

Can I suggest making the switch for all of these little images from PNG’s to SVGs that the browser can render (some may even be able to be replaced with straight CSS)? This would improve theme performance on both front and backend, removing a number of image loads on each page, plus it would solve the HiDPI (Retina) screen issue at the same time. I don’t think browser support would be an issue anymore: https://caniuse.com/svg

Thanks for considering it, and if you have any questions just let me know.

Regards

Tim

• This topic was modified 2 years, 11 months ago by THP Studio.