searchpro / admin / tabs / image-optimization.php

image-optimization.php in BerqWP – All-In-One Optimization for Core Web Vitals, Cache, CDN, Images, CSS & JavaScript 4.0.18, at admin/tabs/image-optimization.php

119 lines 6.7 KB

Raw Download Zip

1	<?php
2	if (!defined('ABSPATH'))
3	exit;
4	?>
5	<div id="image-optimization" <?php bwp_is_tab('image-optimization'); ?>>
6	<h2 class="berq-tab-title"><?php esc_html_e('Image Optimization', 'searchpro'); ?></h2>
7	<div class="berqwp-webp">
8	<div class="berqwp-webp-content">
9	<div class="berq-box-content">
10	<h3 class="berq-box-title"><?php esc_html_e('WebP Conversion', 'searchpro'); ?></h3>
11	<p><?php esc_html_e("$plugin_name automatically converts images into the WebP format when creating the page cache. This helps improve website performance by reducing image file sizes without compromising quality. It does not modify the original images.", 'searchpro'); ?></p>
12	<table class="berq-image-settings">
13	<tr>
14	<td>
15	<p><?php esc_html_e('Max image width:', 'searchpro'); ?></p>
16	</td>
17	<td><input type="number" min="0" name="berqwp_webp_max_width"
18	value="<?php echo esc_attr(get_option('berqwp_webp_max_width')); ?>" style="width:100px">
19	px</td>
20	</tr>
21	<tr>
22	<td>
23	<p><?php esc_html_e('Image quality:', 'searchpro'); ?></p>
24	</td>
25	<td><input type="number" min="0" max="100" name="berqwp_webp_quality"
26	value="<?php echo esc_attr(get_option('berqwp_webp_quality')); ?>" style="width:100px"> %
27	</td>
28	</tr>
29	</table>
30
31	<div class="berq-img-action">
32	<div class="berq-convert-webp" style="display:none"><?php esc_html_e('Bulk convert to WebP', 'searchpro'); ?></div>
33	<div class="berq-delete-webp" style="display:none"><?php esc_html_e('Delete all WebP images', 'searchpro'); ?></div>
34	</div>
35	</div>
36	<div class="berqwp-webp-chart" style="display: none;">
37	<div class="berq-progress-circles">
38	<div class="berq-progress-optimized-images"></div>
39	<div class="berq-generating-images">
40	<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
41	</div>
42	<div class="berq-optimized-images"><?php esc_html_e('Optimized Images:', 'searchpro'); ?> <span></span></div>
43	<div class="berq-unoptimized-images"><?php esc_html_e('Unoptimized Images:', 'searchpro'); ?> <span></span></div>
44	</div>
45	</div>
46	</div>
47	</div>
48	<div class="berq-info-box fluid-images">
49	<h3 class="berq-box-title"><?php esc_html_e('Fluid Images', 'searchpro'); ?></h3>
50	<div class="berq-box-content">
51	<div class="berq-box-content berq-setting-toggle">
52	<div class="berq-option-content">
53	<p><?php esc_html_e('Automatically resize and deliver retina-ready WebP images according to the image container size. "Fluid Images" generates and serves multiple optimized image versions for mobile, tablet, laptop, and desktop screens, ensuring every device gets the perfect image for its display.', 'searchpro'); ?>
54	</p>
55
56
57	</div>
58	<?php if (($this->key_response->product_ref == 'AppSumo Deal' && get_option('berqwp_can_use_fluid_images')) \|\| $this->key_response->product_ref !== 'AppSumo Deal') {
59
60	berqwp_render_toggle('berqwp_fluid_images', get_option('berqwp_fluid_images'));
61	}
62	?>
63	</div>
64
65	<div class="feature-blocks">
66	<div class="single-feature">
67	<div class="h5"><?php esc_html_e('Container-Based Resizing', 'searchpro'); ?></div>
68	<p><?php esc_html_e('Generates and delivers multiple image sizes based on the actual each image container.', 'searchpro'); ?></p>
69	</div>
70	<div class="single-feature">
71	<div class="h5"><?php esc_html_e('Retina-Ready', 'searchpro'); ?></div>
72	<p><?php esc_html_e('Serves high-quality, retina-ready WebP images for sharper visuals on all modern devices.', 'searchpro'); ?></p>
73	</div>
74	<div class="single-feature">
75	<div class="h5"><?php esc_html_e('Device-Aware', 'searchpro'); ?></div>
76	<p><?php esc_html_e('Automatically delivers the optimal image version for each device—mobile, tablet, or desktop.', 'searchpro'); ?></p>
77	</div>
78	</div>
79	<?php if ($this->key_response->product_ref == 'AppSumo Deal' && !get_option('berqwp_can_use_fluid_images')) { ?>
80	<ul>
81	<li><?php esc_html_e('Unlimited Websites', 'searchpro'); ?></li>
82	<li><?php esc_html_e('Unlimited CDN Bandwidth', 'searchpro'); ?></li>
83	</ul>
84	<a href="https://berqwp.com/addons/" target="_blank" class="fluid-images-signup">Get started - $5/month</a>
85
86	<?php }?>
87	</div>
88	</div>
89	<div class="berq-info-box">
90	<h3 class="berq-box-title"><?php esc_html_e('Disable WebP Images', 'searchpro'); ?></h3>
91	<div class="berq-box-content berq-setting-toggle">
92	<div class="berq-option-content">
93	<p><?php esc_html_e('Disabling WebP images may be helpful when you\'re using other tools to generate WebP images.', 'searchpro'); ?>
94	</p>
95
96	</div>
97	<?php berqwp_render_toggle('berqwp_disable_webp', get_option('berqwp_disable_webp')); ?>
98	</div>
99	</div>
100	<div class="berq-info-box">
101	<h3 class="berq-box-title"><?php esc_html_e('Lazy Load Images', 'searchpro'); ?></h3>
102	<div class="berq-box-content berq-setting-toggle">
103	<div class="berq-option-content">
104	<p><?php esc_html_e('Optimize your web page loading time by loading only the images that are visible on
105	the screen. The remaining images will be loaded as soon as the user scrolls to them.', 'searchpro'); ?>
106	</p>
107
108	</div>
109	<?php berqwp_render_toggle('berqwp_image_lazyloading', get_option('berqwp_image_lazyloading')); ?>
110	</div>
111	</div>
112	<button type="submit" class="berqwp-save"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"
113	xmlns="http://www.w3.org/2000/svg">
114	<path d="M4.16663 10.8333L7.49996 14.1667L15.8333 5.83334" stroke="white" stroke-width="2"
115	stroke-linecap="round" stroke-linejoin="round" />
116	</svg>
117	<?php esc_html_e('Save changes', 'searchpro'); ?></button>
118	</div>
119