Load resized image in wordpress

Question

Good night. I’m only trying to upload the "thumbnails" of the images on my custom page, but the site loads the original image and resizes it. That weighs the load on my site.

My code:

<?php if ( $the_query->have_posts() ): ?>
    <div class="row" id="products">
        <?php while ( $the_query->have_posts() ): ?>
            <?php $the_query->the_post(); ?>
            <div class="col-xs-12 col-sm-4 col-md-3 product" alt="<?php get_the_title() ?>" title="<?php get_the_title() ?>">
                <div class="change">
                    <i class="fa fa-undo" aria-hidden="true"></i>
                </div>
                <a href="<?php echo get_permalink() ?>">
                    <?php if(types_render_field('lancamento')=="Sim"): ?>
                    <div class="new <?php echo strtolower(types_render_field('tipo')) ?>">
                        <h1>Lançamento</h1>
                    </div>
                    <?php endif; ?>
                    <div class="img top">
                        <img alt="<?php get_the_title() ?>" title="<?php get_the_title() ?>" src="<?php echo types_render_field("logo", array("width"=>"200","height"=>"200", "raw" => "true")); ?>" class="img-responsive"/>
                    </div>
                    <div class="img botton">
                        <img alt="<?php get_the_title() ?>" title="<?php get_the_title() ?>" src="<?php echo types_render_field("miniatura", array("size"=>"medium", "raw" => "true")); ?>" class="img-responsive"/>
                    </div>
                </a>
            </div>
        <?php endwhile; ?>
    </div>
<?php endif; ?>

The Divs "img top" and "img Botton" and my 2 tests did not work, are the image loading blocks, however, the result is not what I wanted.

Imagery:

Answer 1

I don’t know if it’s your case, but when you upload the images via Wordpress media library, it creates several versions of the image with different dimensions in the directory wp-content/uploads.

Make sure there are these variations. Then, just adapt your code to get the version of the image in the size that is most convenient.