Safari Issue

Hi armando_e,

You’ve got the sizes attribute in your example, but you also need to add a srcset attribute in order to take advantage of the responsive images.

A full example using the template tags would look something like this:

<img src="myimg.png" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( $attachment_id, 'medium' ) ); ?>" sizes="<?php echo esc_attr( wp_get_attachment_image_sizes( 'medium' ) ); ?>" >

This assumes you are replacing $attachment_id with the ID of the original image. It also my be simpler to use the following:

<?php wp_get_attachment_image( $attachment_id, 'medium' ); ?>

Which would create the image markup for you, including the srcset and sizes attributes.

Joe

I adjusted my code as follows:

<?php wp_get_attachment_image( $attachment_id, ‘large’ ); ?>

In safari, no matter what size I make my window the large version is always served no matter what. This holds true for iOS. Its a photo portflio page so the diffrence in page load is huge.

Firefox:
<img src=”https://xxx/2015/04/IMG-1434-1400×1050.jpg&#8221; class=”attachment-large” alt=”IMG-1434″ srcset=”https://xxx/2015/04/IMG-1434-645×484.jpg 645w, https://xxx/2015/04/IMG-1434-975×731.jpg 975w, https://xxx/2015/04/IMG-1434-1400×1050.jpg 1400w” sizes=”(max-width: 1400px) 100vw, 1400px” height=”1050″ width=”1400″>

This is serving the correct size if I inspect my image and open it in a new window. I get 645px, the size I set for ‘small’.

With Safari:
<img width=”1200″ height=”800″ src=”https://xxx/2015/04/MG-7367.jpg&#8221; class=”attachment-large” alt=”MG-7367″>

Inspecting this image in a new tab yilds the ‘large’ version I set.

Thank all of you for the work on this plugin and for the continued support on this forum.

Hi armando_e,

Your markup from the first example looks valid to me. One thing that may be happening here is that browsers will always use a cached version of an image if it’s large enough, instead of downloading a new, smaller image. Could you try disabling browser cache in your dev tools and reloading the page at a small browser width to confirm that the wrong image is being selected?

Thanks,
Joe

Sorry for the delay. I have cleared the cache every time, safari still serves the largest available image.

Thank you!

Do you have a live example that I can look at?