Performance with external images

Question

Hello!

On my site there is an area of posts and each post contains your image. The original image is 660px x x 400px size, save this size on an image host to be able to grab the metag URL to present on social networks with a good quality, even there works cool.

But on the site I create another image of size 330x168 to serve as Thumb of the post and play on S3 and make your call. However, on S3 returns me in a way that is not cool for Google Analytics.

So my question is whether I can take this image of 660x400 that is on another host and click on the tag img with the url but with the size 330x186.

Can this be slow or is there another workable solution? I don’t think it would be necessary to send S3 a smaller size img. It would take only the original and decrease its size.

Answer 1

I can take this image of 660x400 that is on another host and load the img tag with the url but put with the size 330x186?

Yes! The tag img has the attributes height and width exactly for this!

<img src="link da imagem" alt="texto para leitores de página" width="186" height="330">

The values of height and width are already in pixels, so there is no need to specify the measure.

If multiple images want to do this, just add a class to them and by CSS specify these values.

<img class="img_reduzida" src="link da imagem" alt="texto para leitores de página">

.img_reduzida {
  height: 330px;
  width: 186px;
}

And if within this class you want to give some special treatment to a specific image, just give it a unique ID.

<img class="img_reduzida" id="img1" src="link da imagem" alt="texto para leitores de pagina">

.img_reduzida #img1 {
  height: 440px;
  width: 660px;
}