- This topic has 1 reply, 2 voices, and was last updated 1 year, 10 months ago by .
-
That hardly depends on the code you’ve used to insert the image(s) and on the effort you’re willing to put on this task 🙂
Problem:
You probably have some HTML that looks like this:
<img src="path/to/image.jpg" width="1000" height="600" />
That means the image will be shown with a size of 1000×600 Pixel regardless of the screen size or resolution.Easy way
<img src="path/to/image.jpg" width="100%" />or<img src="path/to/image.jpg" style="min-width: 400px; max-width: 1000px;" />
The first will display the image with the maximum possible width – be aware that the image could be upscaled on high resolution monitors and that might look… not that good. The other one means that the image should use the biggest possible width with a maximum value of 1000px but also not lower than 400px. The disadvantage of this approach is that even if the client only gets the 400px displayed it has to load the full resolution image.Preferred way
Specifying different images for different resolutions like this
<picture>
<source media=”(min-width: 1200px)” src=”path/to/big.jpg” />
<source media=”(min-width: 800px)” src=”path/to/medium.jpg” />
<source media=”(min-width: 400px)” src=”path/to/small.jpg” />
</picture>
With this variant you have three different image files. “big.jpg” will be shown on devices with a resolution/width of at least 1200px, “medium.jpg” will be shown on devices with at least 800px width and devices width at least 400px width will get the small.jpg The last entry is the image that will be sent to devices not matched by any rules. Rules will be evaluated from top to bottom. Of course you could add additional rules, f.e.: for devices in portrait mode (mostly smartphones) but then we’re back to the earlier mentioned effort 😉
- You must be logged in to reply to this topic.