User Proof Repeater Images

So lets talk about proper image implementation.

We sometimes run into clients who would like slideshow galleries while uploading 2000-5000px wide images. And it's important to understand that content managers are not going to KNOW what a proper image size is. So how do you maintain a nice easy consistent image query AND meet your client where they currently stand on knowledge of the web?

The set up for this image query is as follows:

• I have a repeater field from Advanced Custom Fields
• Inside that I have an image
• The image is returning my image media ID

I've seen a lot of queries that look like this.

<img src="<?= the_sub_field('image'); ?>" />

You would then set the height and the image in CSS

But lets challenge that. Does that offer the best quality for the end user? Those obviously allow for large images to be loaded and slow down your site, right?

Lets use a different query that will allow for faster loading.

<? $image = get_sub_field('image'); $image = wp_get_attachment_image($image, 'medium'); ?>
<?php echo $image; print_r($image); ?>

So this should be the proper way to load fast images. You can change the size to whatever size you need.

This way when your site owners decide to load a large sized image, it won't ruin your design or your load speed.