Ensuring optimal image quality and fast loading speed with LayTheme

[MWPA]

I’m looking for the best strategy to ensure that a website has high-quality images while maintaining fast loading speeds.

I’ve read that LayTheme automatically resizes and optimizes images, using them where relevant. However, I'm curious about which formats are used and what the best specifications are for uploading the original images.

Additionally, is it a good idea to use a plugin like Imagify (or another?) for image optimization, or is that unnecessary since LayTheme already offers various image sizes and includes the Layyzload option?

A clear explanation and advice on this would be greatly appreciated!

[arminunruh]

so i think its a good idea to use a plugin that makes your website load webp images.

this plugin is good for that:
https://wordpress.org/plugins/webp-converter-for-media/

webp images have better compression than jpgs with better quality

dont use png's cause wordpress cant compress them so well.
instead of gifs use mp4 videos.

yea lay theme creates different image sizes:
it creates sizes of these widths if possible:

['_4096', '_3840', '_3200', '_2560', '_1920', '_1280', '_1024', '_768', '_512', '_265']

using srcset https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset

the image of the width that is the best for the current situation is loaded

also its a good idea to have this on in lay options:

[arminunruh]

if your website loads slowly you might want to try any caching plugin. just make sure to not use multiple caching plugins at the same time.

if that doesnt help you might need to get a different webhost.
this is a good fast way to host https://laytheme.com/tutorials/make-your-website-load-instantly-and-manage-your-own-server.html

but its a little difficult to set up.

any wordpress websites on kinsta should also load really fast:
https://kinsta.com/

but its a little expensive.

lets say you live in england. if the website visitors and you are in england, it can also be a good idea to get a webhost with servers in england. cause then the data has less miles to travel, so the website will load faster.

[MWPA]

@arminunruh: Thanks!

Regarding Lay Theme generating different image sizes, it creates images with the following widths when possible:

['_4096', '_3840', '_3200', '_2560', '_1920', '_1280', '_1024', '_768', '_512', '_265']

What is the ideal source image size to upload? Should it be 4096px or 3840px? I want to ensure the images appear sharp at full size on a 27" screen.

[arminunruh]

oh yea i mean if you got images that are 4000 px wide or more sure u can upload them.

that high of a resolution image will be loaded in if someone uses a big screen and you make the image full width for example

[MWPA]

Thanks, Armin! Do you have any recommendations for a good caching plugin for LayTheme?

[arminunruh]

i used to recommend https://laytheme.com/documentation/speeding-up-your-website.html

wp fastest cache

now sometimes im not sure, cause some people get issues with it

im not sure which one to recommend. i think you could just try out different ones and see.

but i do think its a good idea to use a plugin that makes your images webp format.
that format makes images much smaller while keeping their quality.

this one is good:
https://wordpress.org/plugins/webp-converter-for-media/

[MWPA]

Hi Armin,

Through careful testing, I managed to reduce my images (originally 4096 x 2732 pixels) to a file size of 1.4 MB. I used Photoshop for export, and then optimized the files further using Squoosh.

However, after uploading the image to the media library and adding it to my layout, I noticed that Lay Theme resized the image to 3840 x 2561 pixels, but the file size actually increased to 2.4 MB.

Do you know why this might be happening?

[arminunruh]

lay theme downsizes images to all of these sizes:
['_4096', '_3840', '_3200', '_2560', '_1920', '_1280', '_1024', '_768', '_512', '_265']

it uses wordpress' php functionality to do the resizing.
quality and thus images size can be set in:

image quality.

nothing else can be done there.
but if you use a plugin like https://wordpress.org/plugins/webp-converter-for-media/
it will load all these images as webp resulting in a lower image size