[Resolved] Choosing Image Formats

[Paul]

I have been working with WordPress sites for many years and came to GeneratePress because of concerns about performance, unnecessary code and wanting to upgrade look and feel. So far really happy with a test site we have created. The question – what are best image formats for
pictures, logos, icons and graphics?
I guess the last three might be simply SVG (if there is block colour only) leaving the subject of high quality pictures
I think this partly depends on criteria – mine being:
speed of page loading
responsive (hopefully with little manual coding – but this would be OK)
retina quality on hand held and desktop
gutenberg / parallex scrolling as a characteristic of pages
A bulleted list of best practice would be very helpful
Also best practice for a responsive site and background images
Plug ins: GP Premium and Advanced WordPress Plugins and WooCommerce

[Leo]

Hi Paul,

Maybe articles like this would help?
https://www.pagecloud.com/blog/web-images-png-vs-jpg-vs-gif-vs-svg
https://www.freecodecamp.org/news/best-image-format-for-web-in-2019-jpeg-webp-heic-avif-41ba0c1b2789/

Image formats for websites aren’t theme related so I’d recommend doing some research on Google and see what suits your need the best.

One thing I always do is to compress the images before uploading with this site:
https://imagecompressor.com/

Static images are responsive by default and background images are not responsive be default.

Let me know if this helps 🙂

[Paul]

Leo – thank you, the two sites about image format are helpful – especially the summaries. So – choice made in the main – JPEG for pictures + SVG (for icons) and we will keep an eye on AVIF…
If I may – the question that follows from this is how do we resize for retina and responsive requirements. I like what PageCloud says

Uploaded images are automatically resized to load as fast as possible and at the ideal resolution for every device, including retina displays.

How do we best achieve the same with GeneratePress?
Thank you again,
Paul
PS – and we will certainly use OptimiZilla, thank you

[Leo]

Would an article like this help?
https://premium.wpmudev.org/blog/make-images-retina-ready/

GP doesn’t do anything special to the images you uploaded so if you can find some good advice that works well for websites/WordPress in general, it would work for GP as well 🙂

[Paul]

All good Leo -thank you for your help

[Leo]

No problem 🙂

[Author]

Posts