Remove Width and Height Attributes from WordPress Images

How to remove width and height attributes from images in wordpressWordpress remove image size attributesStop wordpress from adding width and height to imagesRemove width and height from wordpress imagesWordpress images without width and height attributesDisable image dimensions in wordpressWordpress responsive images remove size attributesRemove hardcoded image dimensions in wordpressWordpress prevent adding width and height to imagesStrip width and height attributes from wordpress images

Explanation

To make your WordPress images more flexible and responsive, you can remove the fixed width and height attributes. This helps images adjust better on different devices and screen sizes.

Here's how it works:

The first function targets images within your post content. It scans through the HTML and strips out any width and height attributes from the image tags. This ensures that images can resize naturally without being restricted by fixed dimensions.
The second function does the same for post thumbnails. It removes these attributes from the HTML output of thumbnails, allowing them to be more adaptable in various layouts.

Both functions use a method called "regular expressions" to find and remove these attributes. Once set up, these changes automatically apply to your content and thumbnails, making your site more responsive without any extra effort on your part.

Code
<?php
/**
 * Remove width and height attributes from images in WordPress content.
 *
 * This function filters the HTML content to remove the width and height attributes
 * from image tags, allowing for more responsive image handling.
 *
 * @param string $content The content of the post.
 * @return string Modified content with width and height attributes removed from images.
 */
function wp_dudecom_remove_image_size_attributes($content) {
    // Use regular expressions to remove width and height attributes from image tags
    $content = preg_replace('/<img(.*?)width=["\']\d+["\'](.*?)>/i', '<img$1$2>', $content);
    $content = preg_replace('/<img(.*?)height=["\']\d+["\'](.*?)>/i', '<img$1$2>', $content);
    return $content;
}

// Add the filter to the content
add_filter('the_content', 'wp_dudecom_remove_image_size_attributes', 10);

/**
 * Remove width and height attributes from post thumbnails.
 *
 * This function filters the HTML output of post thumbnails to remove the width
 * and height attributes, ensuring responsive display.
 *
 * @param string $html The HTML output of the post thumbnail.
 * @return string Modified HTML with width and height attributes removed.
 */
function wp_dudecom_remove_thumbnail_dimensions($html) {
    // Use regular expressions to remove width and height attributes from image tags
    $html = preg_replace('/(width|height)=["\']\d+["\']\s?/', '', $html);
    return $html;
}

// Add the filter to post thumbnails
add_filter('post_thumbnail_html', 'wp_dudecom_remove_thumbnail_dimensions', 10);
add_filter('image_send_to_editor', 'wp_dudecom_remove_thumbnail_dimensions', 10);
?>

Instructions

File Location: Add the code to your theme's functions.php file or a custom plugin file.

Prerequisites: None required.

Implementation Steps:

Access Your WordPress Dashboard: Log in to your WordPress admin panel.
Navigate to Theme Editor: Go to Appearance > Theme Editor. If you prefer using a plugin, navigate to Plugins > Editor and select your custom plugin.
Open functions.php or Plugin File: In the Theme Editor, locate and click on functions.php from the list of theme files on the right. If using a plugin, open the main plugin file.
Insert the Code: Copy the provided code and paste it at the end of the functions.php file or your plugin file.
Save Changes: Click the Update File button to save your changes.
Test Your Site: Visit your site and check that images in posts and thumbnails are now responsive, without fixed width and height attributes.

If you encounter any issues or need further customization, consider reaching out to wp-dude.com for expert assistance with WordPress implementations and advanced functionality.