reduce image size and keep it in 100% width

Question

I have some images in my web which linked from image hosting sites. All the images require 100% in width.
However, some images have extremely large pixel and therefore load slow.
How I can set the style to reduce the pixel of images while keep the images in 100% width in order to load faster?
For example, fix the horizontal pixel to 1440px and adjust the vertical pixel and keep it in 100% width?

Answer 1

You have very little control over an image that is hosted elsewhere. Some alternate ideas:

• Cache them on another server and load from there
• Preload for faster results (which might not work if the image is "above the fold") How exactly does link rel="preload" work?
• Use the <picture> tag to specify a different image based on screen size: load images using the picture tag
• Load a placeholder image first: How to load a small placeholder image before loading the actual content

Answer 2

you need to have 2 versions of each image, one with the original size and you can use this when user request to download the photo, and the other for the display and the UI, this will make your page load faster and less data bandwidth.