I’ve just finished setting up my first Wordpess site. For the life of me I can’t wrap me head around the correct approach to sizing images on my site.
I’m aware that having the site load unnecessarily large images can slow down the site and as a result be bad for SEO. So I want to ensure the image size is never much larger than it needs to be. But I’m also doing my best to create a highly responsive site that looks good on a variety of screen sizes, so I’m generally using relative sizing rather than fixed sizing, even for images.
Those two concepts seem to conflict with one another when it comes to images. E.g.
if a featured image for a new post is displayed at 30% of the screen’s width, how do I choose an image size that satisfies both a large screen and a small screen without being unnecessarily large for the small screen?
Is it best to just use fixed image sizing that is different for each device type (desktop, tablet, mobile) rather than using relative sizes?
When I upload a featured image for a post, how do I choose the correct dimensions when that featured image will be displayed in more than one location, each potentially with a different size?
I’ve installed the Optimole plugin, which I thought would automatically compress all my images and deliver them at the appropriate size, so I could simply upload a huge image and let Optimole handle the downsizing. However, Jetpack tells me certain images are still multiple times larger than their display size.
Any suggestions or best practices would be appreciated.
I’m using WordPress.com Business / Astra theme / Elementor Pro page builder / Optimole / Jetpack.
Side note, it seems like both Optimole and Jetpack both have image compression, lazy loading, and CDN delivery capabilities, thus using both would be redundant. However my performance scores are best when both are active, rather than just one or the other (they decline when I deactivate one or the other). That also is stumping me.
[ad_2]