This page is intended to test / discuss various techniques for working with images in pages.
In the following examples, we will use the following recent item from the media library:
Edit in Media Library
augmented-reality-pokemon-go-app.jpg
July 13, 2023
586 KB
4766 by 3177 pixels
The first thing to notice is that this image is probably heavier than we reasonably want to display on any device. 4766px wide is quite wide, 586KB is pretty large file size.
Images Module:
When using the Divi images module, it doesn’t actually matter which size you select (full/large/etc) as the module uses resized images per divi spec and includes the “most appropriate” one based upon context and device. It accomplishes this by defining an image set, where css selects the actual file.
Editor “Add Media”:
While using this technique allows the author to select a specific intermediate size, the file name + alt tags + dimensions, etc remain static. If any of those change, or we wished to change the construct for how we render image embeds (for example, add our own picture tags, this remains constant, rather than dynamically generated.