Performance with external images

Question

Performance with external images

Navigation

#1 by (0 votes)

0

Hello

In my site has a posts area and each post contains your image. The original image is 660px by 400px, saving this size on an image host so that it can take in the metag URL to display on social networks with good quality until it works legal.

But on the site I create another image of size 330x168 to serve as thumb of the post and game on s3 and make your call. However, in s3 it returns me in a way that does not look legal for Google Analytics.

So my question is if I can get this 660x400 image that is on another host and load the img tag with the url but putting it with the size 330x186.

Can this be slow or is there another workable solution? I think with this it would not be necessary to send to s3 an img with smaller size. It would just take the original and reduce its size.

html

asked by anonymous 20.03.2015 / 13:02

1 answer

Error registering FullCalendar event How to put the contents of an Ajax Post (response received after the post) into a popup? (post sent through an extension)

score 0 · Accepted Answer

Can I get this 660x400 image that is on another host and load the img tag with the url but putting it with the size 330x186?

Yes! The img tag 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 measurement.

If there are multiple images that you want to do this, simply add a class to them and specify these values by CSS.

<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;
}