Aspire Pro

[radiantaction]

Hi,
I'm using Aspire Pro and have set the header to 300 x 60 as indicated in the documentation and the functions.php file.
However, no matter what I do, how I save the file it appears blurry. I have tried jpg 100% quality - type and/or art optimized and png. It is always blurry.

Can anyone help me resolve this so the image is crisp?

Blessings,
Kirsten

http://dev2.khtestsite.com

[Victor Font]

The CSS is rendering the title area as 360x76, which means the image is being enlarged. Enlarging an image through CSS always makes it appear blurry.

Also, WordPress automatically reduces the quality of jpg images. You can add this to functions.php to change the WordPress defaults:

add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );
add_filter( 'wp_editor_set_quality', create_function( '', 'return 100;' ) );

Last, if you really want crystal clear images at any resolutions, use SVG.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[radiantaction]

Hi Victor,
Thank you so much for looking at my site. I don't know why the header is rendering a different size than the logo size but I've fixed that in the functions.php file.

This solved most of the problem. The subsequent issue is that this theme has a scroll effect in the header where it shrinks upon scrolling. As you can see, when the logo image shrinks it loses quality.

I understand what you're saying about using svg files and I sure wish I could. However, I have read (and tried) several tutorials to no avail.

Do you know how I can keep the scrolling effect but without losing image quality? I was thinking I could upload a different logo for the scroll function but I don't know how to do this.

Blessings to you!
Kirsten

[Victor Font]

SVG is the way to go, but to use SVG in the header, you have to do a couple of things first. By default, WordPress blocks SVG images. The SVG Support plugin will open up WordPress to use this file type.

Next, with Genesis themes, modify the add_theme_support( 'custom-header'... section in functions.php and add 'flex-width' => true, to the array. This allows you to skip cropping SVG images. If you miss this, you won't be able to add a SVG as a custom header image.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts