# Fix broken images due to mixed content errors on WordPress

January 7, 2016

 WordPress introduced responsive images in version 4.4, but it also introduced a bug which causes them not to load properly on https encrytped sites.

The bug loads the main image via https, but all the responsive `srcset` goodness is loaded in http. This causes your browser to block loading of the image due to 'mixed content', a security feature of your browser.

   ![Insecure srcset in WordPress img element](/sites/default/files/styles/scale_0720/public/media/image/2019/code-mixed-content-srcset.png.webp?itok=yNiKKYfL)  

  responsive image code - notice the 'src' attribute is https:// while the 'srcset' values are http://  Here is how the preceding code is rendered in a HTTPS page (i.e. broken image):

   ![how a broken image in a mixed content scenario would appear](/sites/default/files/styles/scale_0480/public/media/image/2020/broken-image-mixed-content.png.webp?itok=SwWFOUAV)  

Here's how to fix this problem if your SSL-enabled site is suddenly sporting broken images:

Go to **Settings > General** in your WordPress admin

   ![WordPress Address and SIte URL (General Settings)](/sites/default/files/styles/scale_0480/public/media/image/2019/general-settings-wp0.png.webp?itok=-hXTbfHf)  

Change both of the values for Site Address and WordPress Address to use **https://** instead of **http://**

If these fields are greyed out, you can edit your wp-config.php file to change the values for the **WP\_SITEURL** and **WP\_HOME** constants to use **https://**

This may not solve the issue universally - until the bug is fixed in WordPress, you can use one of two approaches:

1. Install the [SSL Insecure Content Fixer](https://wordpress.org/plugins/ssl-insecure-content-fixer/) plugin and set it to the simple mode. This should convert all local content URLS to use https://
2. Insert the following code into your functions.php file in your theme folder, or in a custom plugin:

```php
/**
 * Force URLs in srcset attributes into HTTPS scheme.
 *
 * This is particularly useful when you're running a Flexible SSL
 * frontend like Cloudflare.
 *
 * @param array $sources original set of sources.
 * @return array modified set sources with https enforced.
 */
function ssl_srcset( $sources ) {
	foreach ( $sources as &$source ) {
		$source['url'] = set_url_scheme( $source['url'], 'https' );
	}
	return $sources;
}
add_filter( 'wp_calculate_image_srcset', 'ssl_srcset' );
```

Thanks to [Jeff Chandler at WPTavern](http://wptavern.com/how-to-fix-images-not-loading-in-wordpress-4-4-while-using-ssl) for the above fix.



 

Tags

[WordPress](/en/tag/wordpress)

[responsive images](/en/tag/responsive-images)

[SSL](/en/tag/ssl)

[HTTPS](/en/tag/https)