Diego Ortuno Rosales

Webdesign+Writing for business

The best way to optimize the images of your website

Guide to optimizing website images. In 5 steps, accelerate the speed of your website and keep your visitors happy.

Diego Ortuno Rosales

Author, web designer, librarian

Subscribe to my newsletter Guardia de Argos

Let's launch your website

You have a great idea and I know how to build it

ads here

Place your advertising in this space

another day at sea

Table of Contents

Help me buy new hearing aids

I am deaf, have 95% of hearing loss, and have to buy new hearing aids every 5 years. With your contribution I can reach the goal more easily.
urgent

This is a super simple 5 step guide and gets to the point. You have a WordPress website and want to optimize images to make pages run faster. It is very important that your pages run at good speed because Google penalizes the appearance of slow web pages in the search results.

Why does Google make this penalty? Because when a website runs slow, visitors leave this site and return to Google to do another search. Google keeps track of these searches, takes note of the slow websites that caused the user to reject them, and in order to give them a better search result later, they penalize the slow site.

Google knows it and so do I: if your website is slow, users will reject it and they will immediately leave it. If you want to be safe before you regret, contact me to give you a diagnosis.

If you want to know if your website is slow, you must write its address (example: https://mypage.com) on the page. Google Page Speed Insights. Once the images are optimized you can test your page speed again. If after optimizing the images the results are the same, you should update your website cache. Guide on how to do it coming soon.

Simply put, we will transform PNG and JPG image files to WEBP. Because? Because WEBP files are smaller in size than the other two. Eye: dimensions image and size archive They are two different things.

5 steps to follow

1. Let's go to the website Bulk Resize Photos.

2. We select all the images that we want to convert.

3. We drag them all at the same time to the box on the web page.


We can also select them by clicking on the button with the text Choose images / Choose images.

4. The page then redirects us to another configuration page with various settings options.

Where says Image format we change from the original file type to WEBP.

Optional, I always change the Percentage from 50 to 100 to maintain the same dimensions of image. I also sometimes change the percentage of the image quality from 75 to 80.

5. We press on the button Beginning / start. The page redirects us to another page and download automatically the converted file to our folder downloads. In addition, it tells us how much the file size was reduced.

And that's it! This is what I do always with all the images on my websites and from my clients.

If you have any doubts or questions, write me a comment.

Are there automatic ways to do this process?

Yes. Please note that this manual process is the best and is very fast. Practice it a couple of times and you will realize it.

Below I show you 2 ways to convert your images from JPG and PNG to WEPB automatically. The first is with a code snippet (code snippet). The second is with a plugin to convert the images.

The plugin to convert images that I recommend is Imagify. It is easy to use and very useful for converting images en masse. This is very convenient when you already have many images on your website.

Note: This plugin and others of the same type are free only to a certain extent.

The code snippet, on the other hand, is much easier to install, does not require opening an account (like Imagify on its website) and converts images on the fly. Even if you look in your website's media library, you'll see that it uploaded the WEPB image, not the JPG/PNG. This saves you space in your server's memory.

However, the advantage of still having the JPG/PNG images is that certain browsers still do not read the WEPB files. Imagify then places the image that the browser can read.

Even so, WEPB files will soon become a mandatory requirement and browsers will have to adapt. Not to mention that another type of image file has already emerged, even better than WEPB: the AVIF file.

My preference and recommendation is to install the code snippet.

To install the code fragment or Imagify it is necessary to install a plugin for each one.

If you're interested, let's see how it's done. If you already know how to install them, press about Mustang to advance to the configuration of each plugin.

How to install a plugin in WordPress

These are the general steps to install a plugin:

1. Go to the WordPress dashboard and look for the Plugins menu in the sidebar on the left. Pass the pointer mouse above and 2 submenus will be displayed: press on Add new plugin.

2. Type the name of the plugin in the search engine, like Imagify either Code Snippets and wait for the plugin to appear. The system only takes a few seconds to search for it in the WordPress plugin repository.

This is the Code Snippets logo, in case you have any questions when it appears in the search results.

3. Press on Install Now.

4. The button will change color and text in a few seconds. Now you must press on it to activate it.

After activating it, the button will say Activated and it will be discolored.

Congratulations, you now know how to install a plugin. You have unlocked the second half of the WordPress universe.

How to use Code Snippets and Imagify plugins

Let's see how to create a code snippet using Code Snippets. If you want to configure Imagify, click on the logo.

Code snippets free up a lot of website resources and even replace the functions of many plugins. On my own website I may have more than 10 active code snippets for multiple functions: website performance and speed, custom functions for my online store, converting images from JPG to WEPB…

Creating a code snippet

1. Search Code Snippets In the left sidebar of WordPress, hover over until the submenu is displayed and click on Add new.

2. Write a title like “Convert to Wepb”, copy and paste the code (after this image), click on Save Changes and press on Activate.

/**
 * Convert Uploaded Images to WebP Format
 *
 * This snippet converts uploaded images (JPEG, PNG, GIF) to WebP format
 * automatically in WordPress. Ideal for use in a theme's functions.php file,
 * or with plugins like Code Snippets or WPCodeBox.
 * 
 * @package    WordPress_Custom_Functions
 * @author     Mark Harris
 * @link       www.christchurchwebsolutions.co.uk
 *
 * Usage Instructions:
 * - Add this snippet to your theme's functions.php file, or add it as a new
 *   snippet in Code Snippets or WPCodeBox.
 * - The snippet hooks into WordPress's image upload process and converts
 *   uploaded images to the WebP format.
 *
 * Optional Configuration:
 * - By default, the original image file is deleted after conversion to WebP.
 *   If you prefer to keep the original image file, simply comment out or remove
 *   the line '@unlink( $file_path );' in the wpturbo_handle_upload_convert_to_webp function.
 *   This will preserve the original uploaded image file alongside the WebP version.
 */

add_filter( 'wp_handle_upload', 'wpturbo_handle_upload_convert_to_webp' );

function wpturbo_handle_upload_convert_to_webp( $upload ) {
    if ( $upload['type'] == 'image/jpeg' || $upload['type'] == 'image/png' || $upload['type'] == 'image/gif' ) {
        $file_path = $upload['file'];

        // Check if ImageMagick or GD is available
        if ( extension_loaded( 'imagick' ) || extension_loaded( 'gd' ) ) {
            $image_editor = wp_get_image_editor( $file_path );
            if ( ! is_wp_error( $image_editor ) ) {
                $file_info = pathinfo( $file_path );
                $dirname   = $file_info['dirname'];
                $filename  = $file_info['filename'];

                // Create a new file path for the WebP image
                $new_file_path = $dirname . '/' . $filename . '.webp';

                // Attempt to save the image in WebP format
                $saved_image = $image_editor->save( $new_file_path, 'image/webp' );
                if ( ! is_wp_error( $saved_image ) && file_exists( $saved_image['path'] ) ) {
                    // Success: replace the uploaded image with the WebP image
                    $upload['file'] = $saved_image['path'];
                    $upload['url']  = str_replace( basename( $upload['url'] ), basename( $saved_image['path'] ), $upload['url'] );
                    $upload['type'] = 'image/webp';

                    // Optionally remove the original image
                    @unlink( $file_path );
                }
            }
        }
    }

    return $upload;
}

Then it should look like this and it is already installed.

From now on you will be able to upload JPG, PNG and GIF images, and they will be converted to WEPB format.

Imagify Settings

After activating the Imagify plugin, a 3-step instruction will appear at the top of the WordPress dashboard to enable your Imagify account and configure it. It's a very quick process, by the way.

Note: You will see this tutorial in all sections of the WordPress dashboard until you follow the steps or deactivate the plugin.

Click on the button to register.

A message will appear asking you to enter your email. Enter it and then go to the email and read it. Confirm your Imagify account at once.

Copy the API key that arrived in your email.

On the WordPress dashboard, click on the “I have my API key” button, paste it and click on the button to confirm. If the password is correct you will receive this notice:

Now press the “Go to settings” button.

It will take you to the following options screen:

These General adjustments They are selected by default.

My recommendation is to leave the first one selected as is. Automatic optimization of images when uploading them It's the reason we installed this plugin, right?

Deselect backup of original images. Because? Because it is advisable to save the original images separately. Server space can be quite limited and managing images online is more complicated than usual.

On lossless compression, I see it as a setting to experiment with. What do I mean by to experience? So try it and see how well it works or if it wasn't necessary in the first place.

Then come the settings optimization. My last suggestion is to check in display images in WebP format on the site. Because? Because then the website is obliged to show the WebP images to the visitors. Otherwise, the plugin will show optimized images of any type.

Again, this is subject to experimentation. If there are problems, it is advisable to deactivate this setting.

Said my last suggestion, because for all other settings I recommend leaving them as they are.

In the end we press on Save changes.

Alternatively, if we have a lot of images on the website and we want to optimize them on the fly, we can go to massive optimization. Too easy. For more references on how to do it, I leave you the link to the Imagify documentation so you can ask any questions.

Conclusion

Image optimization is very necessary to make websites fast, keep visitors happy, and meet the requirements of search engines like Google to avoid penalties in search results.

The best image optimization process is manual. The next two alternatives are a code snippet and an optimization plugin. If you want me to diagnose if your website needs optimization and, if necessary, take care of optimizing the images, write me.

What did you think of this entry? Thanks for reading me. Tell me any questions you have.

ads here

Place your advertising in this space

ads here

Place your advertising in this space

Thank you for reading

Share this post

Leave a Reply

Let's launch your website

You have a great idea and I know how to build it

Read my latest posts

Web design

Don't have a website in April 2023?

It is the last day of April of the year 2023. The Internet is growing and more and more people are searching for a topic, service or product that is very close to yours. And where are you? Your social network does not appear in the search results. In fact, there are more people on the *Internet* than on the networks.

Read more »

Diego Ortuno Rosales

Webdesign+Writing for business

“People: if you need a site made, hire Diego. “So good at what he does and so easy to work with.”

-Alexander Hellene

we're almost there

Confirm your subscription

2 emails will arrive in your mailbox. 

With the first you will confirm your subscription.

With the second I will welcome you to the newsletter and thank you for subscribing. 

To prevent my newsletter from going to your email folder spamI will only ask you that with him welcome email Add me to your mail contacts.

Destination page / Landing page

A landing page invites your reader to a reading and viewing that is at the same time an experience and a promise.

An appreciation experience, where you meet how will it be treated (meaning it will feel great) and by whom (A person committed to his clients and whose work speaks for itself).

A promise of very detailed benefits and, more importantly, who you will become thanks to the sum of all things.

That is to say, thanks to working with you, hiring your service or buying your product, this person will be someone:

  • Happy.
  • Done.
  • Relieved.
  • Better person.
  • With a higher status.
  • That helps others.
  • entertaining.
  • Part of something new or different.
  • Another person.

Get your landing page

$500

special website

The standard package reconfigured on a special theme + 1 special section, such as:

 

  • Online store.
  • Landing page. (Landing page)
  • Internal website with membership.
  • Redesigned pages with theme builder (eg: archive or blog posts).
  • Content search engine with defined filters.
  • additional configuration of widget all types.
  • Design of interactive forms (ex: calculator for approximate quotes)
  • Downloadable content library. 
  • Video library.
  • Podcast page.
  • Forum page. 
  • Online school.
  • And more…

Get your special website

$1500

Standard website for your personal brand or business

Includes:

 

  1. WordPress Settings
  2. WordPress template installation
  3. Visual branding for the website
  4. Up to 7 stock photos
  5. additional security
  6. Basic Search Engine Optimization (SEO)
  7. Design and sections of the website:
  • Home
  • About us.
  • Services.
  • Blog and/or news.
  • Contact.

additional details

  1. The website will be optimized to 100% for mobile devices (tablet and smartphone/cell phone).
  2. The website will be optimized according to Google's Core Web Vitals parameters, with a GTmetrix rating of A on its server in Canada.

Besides:

  • Persuasive and personalized content writing to reach your audience.
  • Includes basic technical assistance insurance for one year.

Get your standard website

$1000