Site logo lean srcset with no webp

Hi there,

thanks for the feedback on the new GP Site.
GP uses an SVG image for its logo - so theres no need for retina versions as its infinitely scaleable.

Some issues with what you're trying to do:
By default the WP custom_logo function doesn't support src-set. Which means you would have to overwrite that with a custom function.
I am not sure how perfmatters would 'select' the correct size image for preloading - that would require the server knowing upfront what the size the browser is going to choose... you may find you end up preloading one image when the browser selects another.

Hi,

I'm not certain that using an svg on my website will render the logo properly. To my understanding svg is good for basic shapes and not too great for gradients.

The perfmatters preload function is simple. You preload one logo for desktop and one logo for mobile. My desktop logo is 260 pixels wide and mobile 192 pixels wide. That is how I designed the header there are no smaller, in between or larger logo sizes.

I know that I have a tendency of splitting hairs several times and going into micro details. Bottom line is that by doing so and adding up all these small things my website is content rich with a lot of pictures and 2.5 times faster then generatepress.com in mobile or desktop 😉 I also don't have the resources, coding expertise and budget 😀 I have the privilege of watching fireworks in web.dev/measure when clicking on view report.

When there is a will there is a way.

I'm not even certain that using a 2x logo size actually does anything for such a small graphic.

Essentially to achieve very fast loading times on mobile at around 1 second on 3G above the fold content has to be optimized extensively.

Any help on how to achieve my objective would be greatly appreciated. To my understanding GeneratePress modified the code output for the logo and generated a srcset that included a 2x resolution. I am not certain if webp images are served even though Imagify generated them.

Please advise

Hi,

After your intervention I am exploring SVG for the logo and doing tests.

I am working out the details in photoshop and figuring all this out including transparency.

Put this on hold for now.

Thanks

Hi,

I exported my logo as an SVG in photoshop without any background and with a black background.

I tried both following these instructions: https://docs.generatepress.com/article/adding-svg-logo/ and obviously installing the plugin.

I modified the CSS for mobile and desktop.

In the preview pane no logo is displayed!

Baffled

Please advise

Hi,

Found this: https://generatepress.com/forums/topic/svg-logo-not-displaying/

Seems that it's not a true svg so back to square one.

I created the logo in Photoshop.

I installed Adobe Illustrator.

The svg file is 1.6 MegaBytes. Gradients make huge files as I suspected in my second post.

Works great I tried it. Best version of my logo that I have ever seen crisp and everything...

Back to my second post in this thread.

Please advise

Hi there,

What's the objective here, exactly? Preloading the images? Your logo output has been modified to use a <picture> element, which isn't standard in the theme.

Hi Tom,

The objective is to be able to preload two different picture sizes for the site logo 192w for mobile & 260w for desktop by using the preload feature in perfmatters that permits to preload for desktop and or mobile.

Presently I am preloading the logo at 520 pixels wide which is the 2x for all devices. When doing preloading tests and inspecting in Chrome it seems that is what Chrome was using as picture size and then resizing to 260w. I'm confused about that. The srcset has 520w & 260W. On desktop test webpagetest.org the logo ends up being loaded twice the preload at 520w and then a load of the 260w

As for the <picture> element. In Imagify Settings > Optimization WEBP FORMAT "Use <picture> tags" is the preferred method. Why? I don't know. All I know is that it works perfectly and srcset is properly generated at all picture sizes for webp and jpg for all images on website except the site logo. The other option is "Use rewrite rules"

To my understanding if 192w is not in the srcset I can't do a preload for it.

It also makes me wonder if I should remove the 2x or 520w picture.

There is obviously things that I don't understand.

Hmm, not sure I have an answer here - don't have a ton of experience with it. Perhaps this will be helpful?: https://web.dev/preload-responsive-images/#preload-and-lesspicturegreater

Hi Tom,

Thank you for the link. I get the overall concept. The theme generates the srcset.

I contacted Brian & Brett at perfmatters for assistance on the matter.

What preoccupies me is that GeneratePress doesn't generate the 192w thumbnail and lower in srcset as per what I put in functions.php

Also after research the reason why Imagify uses preferably <picture> tags to generate webp images is because rewrite rules are not compatible with Cloudflare & CDN's

Perhaps it's going to be joint effort to do something as trivial as preloading a logo.

I'm waiting for their reply.

GeneratePress itself doesn't generate any srcset values - it all comes from WordPress itself. Hopefully they're able to shed some light on it.

Hi,

Brian answered. I'm too ahead. They are working on exactly the link you sent me. He weirdly sent me the same link.

Regarding SRCSET. Bizarre that WordPress doesn't generate the thumbnails that I have in functions.php 300w, 240w, 170w & 120w

According to David "By default the WP custom_logo function doesn’t support src-set. Which means you would have to overwrite that with a custom function." I therefore concluded that GeneratePress does the SRCSET... There is an SRCSET there. Maybe it's Imagify.

I will cross that bridge again when the time comes.

HAPPY 7TH BIRTHDAY!

As an appreciation for the above and beyond support and outstanding coding I am getting the lifetime GeneratePress premium.

As a bonus to shave a considerable amount of time in your page loads - low hanging fruits: Critical Path CSS & a more aggressive lazy loading -> WP Rocket. Forget Auto-Optimize you will never pass page experience with it.

I can also show you how to go close to or under a second in web.dev/measure in exchange for GenerateBlocks premium :)

Mail me if you are into it you have my email.

Thank you for your help.

Awesome, glad they're working on it! Thank you! Really appreciate the support :)