WebP Converter for Media – Konwertuj WebP i AVIF & Optymalizuj obrazki

Opis

Przyspiesz swoją witrynę wyświetlając obrazki WebP oraz AVIF. Zastępując pliki w standardowych formatach JPEG, PNG oraz GIF formatem WebP i AVIF, możesz zaoszczędzić ponad połowę wagi strony bez utraty jakości.

Po instalacji wtyczki nie musisz nic więcej robić. Twoje istniejące obrazki zostaną skonwertowane do nowego formatu. Gdy kompresowanie obrazków będzie zakończone, użytkownicy automatycznie otrzymają nowe, znacznie mniejsze obrazki niż oryginalne.

Obecnie ponad 90% użytkowników korzysta z przeglądarek obsługujących format WebP. Czas ładowania Twojej witryny zależy w dużej mierze od jej wagi. Używając WebP, możesz ją przyspieszyć w kilka sekund bez większego wysiłku!

Będzie to korzyść zarówno dla Twoich użytkowników, którzy nie będą musieli pobierać tak dużej ilości danych, jak i dla mniej obciążonego serwera. Pamiętaj, że lepiej zoptymalizowana witryna wpływa również na Twój ranking w Google.

Wsparcie dla AVIF

Teraz możesz użyć AVIF jako formatu wyjściowego dla swoich obrazów. Format AVIF jest nowym rozszerzeniem – to następca WebP. Pozwala osiągnąć jeszcze wyższy poziom kompresji obrazu, a jakość konwertowanych obrazów jest lepsza niż w WebP.

Jak to działa?

  • Jeśli właśnie zainstalowałeś wtyczkę, możesz jednym kliknięciem zoptymalizować wszystkie istniejące obrazki.
  • Nowe obrazy, które będą dodawane do biblioteki multimediów, zostaną automatycznie przekonwertowane.
  • Nasza wtyczka w żaden sposób nie modyfikuje oryginalnych obrazów. Oznacza to bezpieczeństwo dla ciebie i twoich plików.
  • Kiedy przeglądarka ładuje obraz, nasza wtyczka sprawdza, czy obsługuje format WebP. Jeśli tak, ładowany jest obraz w formacie WebP.
  • Wtyczka nie wykonuje przekierowań w trybie domyślnym, więc adres URL jest zawsze taki sam. Tylko typ MIME obrazu zmieni się na image/webp.
  • Brak przekierowań oznacza brak problemów z pamięcią podręczną, szybsze i bezproblemowe działanie twojej witryny. Jeśli chcesz dowiedzieć się więcej o tym, jak to działa, zapoznaj się z FAQ wtyczki poniżej.
  • Nie ma znaczenia, czy obraz jest wyświetlany jako znacznik HTML img, czy używasz background-image. Działa zawsze!
  • W przypadku, gdy przepisywanie reguł z pliku .htaccess jest zablokowane, dostępny jest tryb, który ładuje obrazy poprzez plik PHP. Następnie zmieniane są adresy URL obrazków, ale logika działania jest taka sama, jak w przypadku trybu domyślnego.
  • W efekcie użytkownicy pobierają mniej niż połowę danych, a sama witryna ładuje się szybciej!
  • Nic nie tracisz – gdyby trzeba było usunąć usunąć wtyczkę, ta usunie wszystko po sobie. Nie pozostawia żadnych śladów, więc bez trudu możesz ją przetestować.

Konwertuj WebP – to przyszłość!

Optymalizuj obrazki i przenieś swoją stronę internetową na nowy poziom już teraz! Zainstaluj wtyczkę i ciesz się szybszym ładowaniem strony internetowej dzięki optymalizacji obrazków. Z pewnością Ty i Twoi użytkownicy to docenicie.

Wsparcie dla dodatkowych katalogów

Możesz również konwertować do WebP obrazki nie tylko z katalogu /uploads, ale także z katalogów /plugins oraz /themes . Pozwala to na pełną integrację z formatem WebP!

Wsparcie w rozwoju wtyczki

Spędzamy wiele godzin pracując nad rozwojem tej wtyczki. Wsparcie techniczne również wymaga dużo czasu, ale robimy to, ponieważ chcemy zaoferować Tobie najlepszą wtyczkę. Cieszymy się z każdej nowej instalacji wtyczki.

Jeśli chcesz to docenić, możesz postawić nam kawę. Gdyby każdy użytkownik kupił przynajmniej jedną, moglibyśmy pracować nad wtyczką 24 godziny na dobę!

Przeczytaj również poniższe FAQ. Dziękujemy, że jesteście z nami!

Zrzuty ekranu

  • Screenshot of the options panel
  • Screenshot when regenerating images

Instalacja

  1. Upload the plugin files to /wp-content/plugins/webp-converter-for-media directory, or install plugin through the WordPress plugins screen directly.
  2. Activate plugin through Plugins screen in WordPress Admin Panel.
  3. Use Settings -> Settings -> WebP Converter screen to configure the plugin.
  4. Click on the button Regenerate All.
  5. Check if everything works fine.

That’s all! Your website is already loading faster!

Najczęściej zadawane pytania

How to get technical support? (before you ask for help)

Please always adding your thread, read all other questions in the FAQ of plugin and other threads in support forum first. Perhaps someone had a similar problem and it has been resolved.

When adding a thread, follow these steps and reply to each of them:

1. Do you have any error on the plugin settings page? Please read this thread if you have any errors.

2. URL of your website.

3. Configuration of your server (link to it can be found on the settings page of plugin in the section „We are waiting for your message”) – please take a screenshot of the ENTIRE page and send it to me.

4. Settings of plugin – please take a screenshot of the ENTIRE page and send it to me.

5. Please do the test, which is described in the FAQ in question How to check if plugin works?. Please send a screenshot of Devtools with test results.

6. Enable debugging to the file and check if any errors are generated in the debug.log file when the works. Provide their content.

7. Do you use any plugin filters or actions from this FAQ? If so, list them all.

8. What plugin version are you using? If it is not the latest then update and check everything again.

9. A list of all the plugins you use. Have you tried checking the plugin operation by turning off all others and activating the default theme? If not, please try whenever possible. This is very important because other plugins or themes can cause problems. Therefore, we recommend disabling all necessary plugins and enabling the default theme.

Please remember to include the answers for all questions by adding a thread. It is much easier and accelerate the solution of your problem.

Error on plugin settings screen?

If you have an error on the plugin settings screen, first of all please read it carefully. They are displayed when there is a problem with the configuration of your server or website.

The messages are designed to reduce the number of support requests that are repeated. It saves your and our time. Please read this thread for more information.

Error while converting?

You can get several types of errors when converting. First of all, carefully read their content. For the most part, you can solve this problem yourself. Try to do this or contact the server administrator.

If you get an error: File "%s" does not exist. Please check file path. means that the file_exists() function in PHP returned false using the file path given in the error message. Check this path and make sure it is correct.

If you get an error: File "%s" is unreadable. Please check file permissions. means that the is_readable() function in PHP returned false using the file path given in the error message. Check the permissions for the file and the directory in which the file is located.

If you get an error: "%s" is not a valid image file. means that the file is damaged in some way. Download the file to disk, save it again using any graphics program and add again to the page. If the error applies to individual images then you can ignore it – just the original images will load, not WebP.

If you get an error: "%s" converted to .webp is larger than original and has been deleted. means the original image weighed less than WebP. This happens when images have been compressed before. Disable the „Automatic removal of files in output formats larger than original” option in plugin settings to force always using WebP.

In the case of the above problems, contacting the support forum will be useless. Unfortunately, we are unable to help you if your files are damaged. You have to fix it yourself. If you have previously used other tools that changed the original files and damaged them, you will do nothing more.

Remember that it happens that other plugins can cause problems with accessing files or the REST API. Please try to disable all other plugins and set the default theme to make sure that it is not one of them that causes these types of problems.

What are requirements of plugin?

Practically every hosting meets these requirements. You must use PHP at least 7.0 and have the GD or Imagick extension installed. The extension must support WebP format. If you have an error saying that the GD or Imagick library are not installed, but you have it installed then they are probably incorrectly configured and do not have WebP support.

They are required native PHP extensions, used among others by WordPress to generate thumbnails. Your server must also have the modules mod_mime, mod_rewrite and mod_expires enabled.

An example of the correct server configuration can be found here. Link to your current configuration can be found in the administration panel, on the management plugin page in the section „We are waiting for your message” (or using the URL path: /wp-admin/options-general.php?page=webpc_admin_page&action=server).

Note the items marked in red. If the values marked in red do not appear in your case, it means that your server does not meet the technical requirements. Pay attention to the WebP Support value for the GD library and WEBP in the list of supported extensions for the Imagick library.

In a situation where your server does not meet the technical requirements, please contact your server Administrator. We are not able to help you. Please do not contact us about this matter, because this is a server configuration problem, not a plugin.

Also REST API must be enabled and work without additional restrictions. If you have a problem with it, please contact the Developer who created your website. He should easily find the issue with the REST API not working.

How to check if plugin works?

You can find more information on how the plugin works in our manual.

How to change path to uploads?

This is possible using the following types of filters to change default paths. It is a solution for advanced users. If you are not, please skip this question.

Path to the root installation directory of WordPress (ABSPATH by default):

add_filter( 'webpc_site_root', function( $path ) {
    return ABSPATH;
} );

Path to /uploads directory (relative to the root directory):

add_filter( 'webpc_dir_name', function( $path, $directory ) {
    if ( $directory !== 'uploads' ) {
        return $path;
    }
    return 'wp-content/uploads';
}, 10, 2 );

Directory path with converted WebP files (relative to the root directory):

add_filter( 'webpc_dir_name', function( $path, $directory ) {
    if ( $directory !== 'webp' ) {
        return $path;
    }
    return 'wp-content/uploads-webpc';
}, 10, 2 );

Note that the /uploads-webpc directory must be at the same nesting level as the /uploads, /plugins and /themes directories.

Prefix in URL of /wp-content/ directory or equivalent (used in .htaccess):

add_filter( 'webpc_uploads_prefix', function( $prefix ) {
    return '/';
} );

For the following sample custom WordPress structure:

...
├── web
    ...
    ├── app
    │   ├── mu-plugins
    │   ├── plugins
    │   ├── themes
    │   └── uploads
    ├── wp-config.php
    ...

Use the following filters:

add_filter( 'webpc_site_root', function( $path ) {
    return 'C:/WAMP/www/project/webp'; // your valid path to root
} );
add_filter( 'webpc_dir_name', function( $path, $directory ) {
    if ( $directory !== 'uploads' ) {
        return $path;
    }
    return 'app/uploads';
}, 10, 2 );
add_filter( 'webpc_dir_name', function( $path, $directory ) {
    if ( $directory !== 'webp' ) {
        return $path;
    }
    return 'app/uploads-webpc';
}, 10, 2 );
add_filter( 'webpc_uploads_prefix', function( $prefix ) {
    return '/';
} );

After setting the filters go to Settings -> WebP Converter in the admin panel and click the Save Changes button. .htaccess files with appropriate rules should be created in the directories /uploads and /uploads-webpc.

How to exclude paths from converting?

To exclude selected directories, use the following filter:

add_filter( 'webpc_supported_source_directory', function( bool $status, string $directory_name, string $server_path ): bool {
    $excluded_directories = [ 'my-directory' ];
    if ( ! $status || in_array( $directory_name, $excluded_directories ) ) {
        return false;
    }

    return $status;
}, 10, 3 );

To exclude selected files use the following filter:

add_filter( 'webpc_supported_source_file', function( bool $status, string $file_name, string $server_path ): bool {
    $excluded_files = [ 'my-image.jpg' ];
    if ( ! $status || in_array( $file_name, $excluded_files ) ) {
        return false;
    }

    return $status;
}, 10, 3 );

Argument $server_path is the absolute server path to a directory or file. Inside the filters, you can apply more complicated rules as needed.

Filters run before images are converted – they no longer support converted images. You have to delete them manually if they should not be converted.

How to run manually conversion?

By default, all images are converted when you click on the Regenerate All button. In addition, conversion is automatic when you add new files to your Media Library.

Remember that our plugin takes into account images generated by WordPress. There are many plugins that generate, for example, images of a different size or in a different version.

If you would like to integrate with your plugin, which generates images by yourself, you can do it. Our plugin provides the possibility of this type of integration. This works for all images in the /wp-content directory.

It is a solution for advanced users. If you would like to integrate with another plugin, it’s best to contact the author of that plugin and give him information about the actions available in our plugin. This will help you find a solution faster.

You can automatically run the option to regenerate all new images. This is useful when you use external plugins that generate images themselves. To do this, use the following code:

do_action( 'webpc_regenerate_all', $paths );

Below is an example of how to use this action to automatically regenerate images after changing the theme:

add_action('init', function() {
    do_action( 'webpc_regenerate_all' );
});

To manually start converting selected files, you can use the action to which you will pass an array with a list of paths (they must be absolute server paths):

do_action( 'webpc_convert_paths', $paths );

An alternative method is to manually start converting the selected attachment by passing the post ID from the Media Library. Remember to run this action after registering all image sizes (i.e. after running the add_image_size function):

do_action( 'webpc_convert_attachment', $post_id );

Argument $paths is array of absolute server paths and $skip_exists means whether to skip converted images.

You can also modify the list of image paths for an attachment, e.g. to exclude one image size. To do this, use the following filter:

add_filter( 'webpc_attachment_paths', function( $paths, $attachment_id ) {
    return $paths;
}, 10, 2 );

Argument $paths is array of absolute server paths and $attachment_id is the post ID of attachment, added to the Media Library.

To delete manually converted files, use the following action, providing as an argument an array of absolute server paths to the files (this will delete manually converted files):

do_action( 'webpc_delete_paths', $paths );

How to change .htaccess rules?

Manually editing the rules in the .htaccess file is a task only for experienced developers. Remember that the wrong rules can cause your website to stop working.

Below is a list of filters that allow you to modify all rules. Remember that it’s best to use your own rule set rather than edit parts of exists. This will ensure greater failure-free after plugin update.

Returning an empty string will delete these rules the next time you save the plugin settings. You must do this after each filter edit.

Rules for redirects: (returns rules for mod_rewrite module):

add_filter( 'webpc_htaccess_mod_rewrite', function( $rules, $path ) {
    return '';
}, 10, 2 );

Argument $path is absolute server path for .htaccess file (/wp-content/.htaccess or /wp-content/uploads/.htaccess).

Rules for image/webp MIME type: (returns rules for mod_mime module):

add_filter( 'webpc_htaccess_mod_mime', function( $rules ) {
    return '';
} );

Rules for Browser Caching: (returns rules for mod_expires module):

add_filter( 'webpc_htaccess_mod_expires', function( $rules ) {
    return '';
} );

All rules from the files /wp-content/.htaccess, /wp-content/uploads/.htaccess and /wp-content/uploads-webpc/.htaccess: (returns rules for modules: mod_rewrite, mod_mime and mod_expires):

add_filter( 'webpc_htaccess_rules', function( $rules, $path ) {
    return '';
}, 10, 2 );

Argument $path is absolute server path for .htaccess file.

Does plugin support CDN?

Unfortunately not. This is due to the logic of the plugin’s operation. Plugins that enable integration with the CDN servers modify the HTML of the website, changing URLs for media files. This plugin does not modify URLs. Replacing URLs in the HTML code is not an optimal solution.

The main problem when changing URLs is cache. When we modify the image URL for WebP supporting browser, then use the browser without WebP support, it will still have the URL address of an image in .webp format, because it will be in the cache.

While in the case of the img tag you can solve this problem, in the case of background-image it is possible. We wanted full support so that all images would be supported – no matter how they are displayed on the website.

Therefore in this plugin for browsers supporting the WebP format, only the source of the file is replaced by using the mod_rewrite module on the server. The URL for image remains the same. This solves the whole problem, but it is impossible to do when the files are stored on the CDN server.

If you are using a CDN server, find one that automatically converts images to WebP format and properly sends the correct image format to the browser.

Configuration for Apache

In the case of Apache, when saving the settings, .htaccess files will be generated automatically in the following locations:
/wp-content/.htaccess
/wp-content/uploads/.htaccess
/wp-content/uploads-webpc/.htaccess

If these files are missing or empty, try disabling and re-enabling the plugin or saving the plugin settings again. Also check the write permissions of the directories where these files are located.

If your server is a combination of Apache and Nginx, remember that the image files must be supported by Apache. Only then will the redirections in the .htaccess file work properly. Alternatively, you can use the configuration for Nginx.

Configuration for Nginx

This configuration is only required for the image loading mode set to via .htaccess in the plugin settings.

Please edit the configuration file:
/etc/nginx/mime.types

and add this code line:

types {
    # ...
    image/webp webp;
    image/avif avif;
}

Then find the configuration file in one of the paths (remember to select configuration file used by your vhost):
/etc/nginx/sites-enabled/
/etc/nginx/conf.d/

and add below code in this file (add these lines to very beginning of file if possible):

map $http_accept $load_avif {
    ~image/avif "/wp-content/uploads-webpc/$path.$ext.avif";
}
map $http_accept $load_webp {
    ~image/webp "/wp-content/uploads-webpc/$path.$ext.webp";
}

server {
    location ~ /wp-content/(?<path>.+)\.(?<ext>jpe?g|png|gif)$ {
        add_header Vary Accept;
        add_header Cache-Control "private" always;
        expires 365d;
        try_files $load_avif $load_webp $uri =404;
    }
    # ...
}

After making changes, remember to restart the machine: systemctl restart nginx.

Is the plugin completely free?

The plugin is free and you can use it without restrictions. We also offer a paid version that allows for additional functionalities

However, working on plugins and technical support requires many hours of work. If you are using the free version of the plugin and if you want to appreciate us, you can provide us a coffee. Thanks everyone!

Thank you for all the ratings and reviews.

If you are satisfied with this plugin, please recommend it to your friends. Every new person using our plugin is valuable to us.

This is all very important to us and allows us to do even better things for you!

Recenzje

14 stycznia 2022
Una solución fácil y sencilla para servir en webp, sin embargo se hecha en falta alguna información del resultado de optimización después de subir una foto, porque no da ninguna.
Przeczytaj 462 recenzje

Kontrybutorzy i deweloperzy

„WebP Converter for Media – Konwertuj WebP i AVIF & Optymalizuj obrazki” jest oprogramowaniem open source. Poniższe osoby miały wkład w rozwój wtyczki.

Zaangażowani

Wtyczka “WebP Converter for Media – Konwertuj WebP i AVIF & Optymalizuj obrazki” została przetłumaczona na 14 języków. Podziękuj tłumaczom za ich wkład.

Przetłumacz wtyczkę “WebP Converter for Media – Konwertuj WebP i AVIF & Optymalizuj obrazki” na swój język.

Interesuje cię rozwój wtyczki?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Rejestr zmian

4.1.0 (2022-01-12)

  • [Fixed] Auto-generation of rewrite rules for Multisite Network
  • [Fixed] Detection of server configuration error related to non-working rewrites
  • [Fixed] URL validation for Pass Thru loading mode
  • [Fixed] Verification of supported formats by Imagick
  • [Changed] Error messages on plugin settings page
  • [Changed] Styles for plugin settings page
  • [Added] Debug information about PHP configuration

See changelog.txt for previous versions.