ΠΠ°Π±ΠΎΡ php-ΡΠΊΡΠΈΠΏΡΠΎΠ² Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊ ΡΠ°ΠΉΡΡ webp/avif-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, LazyLoad (Π΄Π²Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π½Π° Π²ΡΠ±ΠΎΡ + Π½Π°ΡΠΈΠ²Π½ΡΠΉ Π°ΡΡΠΈΠ±ΡΡ), ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ html-ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΏΡΠΎΠ΅ΠΊΡΡ: rosell-dk/webpconvert, Imangazaliev/DiDOM, ApoorvSaxena/lozad.js, aFarkas/lazysizes.
- Output_modifier.php ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ html-ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ;
- DiDOM ΡΡΡΠΎΠΈΡ ΠΈΠ· Π½Π΅Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ, ΡΠΎΠ±ΠΈΡΠ°Π΅Ρ ΠΏΡΡΠΈ ΠΊ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ ΠΈΠ· ΡΠΊΠ°Π·Π°Π½Π½ΡΡ Π² _setings.php ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ²;
- WebpConvert ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΡΠΏΠΈΡΠΎΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠΎΠ΄Π»Π΅ΠΆΠ°ΡΠΈΡ ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²ΡΠ²Π°Π΅Ρ ΠΈΡ , ΠΈ ΡΠΎΠΎΠ±ΡΠ°Π΅Ρ ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅;
- ΠΡΠ»ΠΈ Π²ΡΡ ΠΏΡΠΎΡΠ»ΠΎ Π³Π»Π°Π΄ΠΊΠΎ, DiDOM ΠΏΠΎΠ΄ΡΡΠ°Π²Π»ΡΠ΅Ρ src webp-Π²Π΅ΡΡΠΈΠΈ Π² ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ Π² _settings.php Π°ΡΡΠΈΠ±ΡΡ; Π΄Π°Π»Π΅Π΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ LazyLoad;
- ΠΠ°ΡΠ΅ΠΌ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ, Π²ΠΊΠ»ΡΡΠ΅Π½Π½ΡΠ΅ Π² Π½Π°ΡΡΡΠΎΠΉΠΊΠ°Ρ (Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ width/height ΠΈ alt ΠΊ img, ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠ΅Π΄Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ), Π·Π°ΡΠ΅ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ, ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ Π² additional_works.php; Π·Π°ΡΠ΅ΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²ΡΠ²Π°Π΅ΡΡΡ Π½Π°Π·Π°Π΄ Π² ΡΡΡΠΎΠΊΡ;
- Output_modifier.php Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ html-ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ.
- ???????
- PROFIT, ΡΠ°ΠΉΡ ΡΡΠΊΠΎΡΠ΅Π½!
include_once $_SERVER['DOCUMENT_ROOT'] . '/php/webp/output_modifier.php';
if (function_exists('modifyImagesWebp')){
ob_start();
}
// <html>...</html>
if (function_exists('modifyImagesWebp')){
$modified_output = ob_get_clean();
$modified_output = modifyImagesWebp($modified_output);
echo $modified_output;
}
Π’Π°ΠΊΠΆΠ΅, Π² ΡΠ»ΡΡΠ°Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ LazyLoad, Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Lozad.js/LazySizes.js ΠΈΠ· ΠΏΠ°ΠΏΠΊΠΈ ./staff/js/ .
Avif-ΡΠ°ΠΉΠ»Ρ Π½Π΅ ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΡΡΡΡΡΡ "Π½Π° Π»Π΅ΡΡ", ΠΈΡ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΈΡΡ ΡΠ°ΠΌΠΈΠΌ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ Π»ΠΈΠ±ΠΎ ΡΡΠ΄ΠΎΠΌ Ρ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»Π°ΠΌΠΈ, Π»ΠΈΠ±ΠΎ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΠΏΠ°ΠΏΠΊΡ, ΡΠΎΡ ΡΠ°Π½ΠΈΠ² ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΡ ΡΡΡΡΠΊΡΡΡΡ ΠΏΠ°ΠΏΠΎΠΊ, ΠΈ ΡΠΊΠ°Π·Π°Π² ΡΡΡ ΠΏΠΎΠ΄ΠΏΠ°ΠΏΠΊΡ Π² Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ $params['avif']['path_prefix']. ΠΠ»Ρ webp ΡΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΡΠ΅ΡΠΈΠΊΡ ΠΏΡΡΠΈ, $params['webp']['store_converted_in'].
Π’Π°ΠΊΠΆΠ΅, Π΅ΡΠ»ΠΈ Π½Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ½Π° ΠΊ ΡΠ°ΠΉΡΡ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π·Π°ΠΏΡΠΎΡΠΎΠ² *.jpg/*.png Π½Π° ΡΠ°ΠΉΠ» webp-on-demand.php. ΠΡΠΈΠΌΠ΅Ρ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π΄Π»Ρ apache:
#Redirect images to webp-on-demand.php (if browser supports webp)
#RewriteCond %{HTTP_COOKIE} ^.*deb=true.*$ [NC]
#RewriteCond %{HTTP_HOST} ^(.*)\.site\.ru$ [NC] # Π΄Π»Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° / ΠΏΠΎΠ΄Π΄ΠΎΠΌΠ΅Π½Π°
RewriteCond %{HTTP_COOKIE} !^.*webpactive=false.*$ [NC]
#RewriteCond %{REQUEST_URI} !^/admin(.*)$ [NC]
RewriteCond %{REQUEST_URI} \.(jpg|jpeg|png)$ [NC]
RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{HTTP_COOKIE} ^.*webpactive=true.*$ [NC,OR]
RewriteCond %{HTTP_ACCEPT} image/webp [NC,OR]
RewriteCond %{HTTP_USER_AGENT} Chrome [OR]
RewriteCond %{HTTP_USER_AGENT} "Google Page Speed Insights"
RewriteRule ^(.*)\.(jpe?g|png)$ /php/webp/webp-on-demand.php [NC,L]