WebP formatted images don't appear in DW

[wcamp]

Hello:

I attempted to convert my JPEG thumbnails to WEBP thumbnails using Photoshop (on a Mac). It worked well. The image size was smaller for WebP files as expected. See the first screenshot that compares sizes. 

Uploading the page with the new WebP files was successful.

My concern is this: When I view the WebP files in the Split and Design views of Dreamweaver, I see only a placeholder, not the actual WebP image file.

Because this prevents me from seeing how my new WebP images look on a page, I need to learn how to make them visible. The following two screenshots compare how the JPEG and WebP file look (or don't look).

How can I get the WebP files to appear in Dreamweaver windows?

[Jon Fritz · Accepted solution]

You're not missing a setting or anything, DW is just showing its age... again.

Unfortunately, Adobe is no longer adding new features or fixing bugs in the program. They're only planning to do OS compatibility updates, third party bolt-on library updates, and security patches going forward.

I believe one of those third party bolt-ons is the browser emulator though. They do show in the latest version, in Live View.

You can quickly change between Design and Live by hitting Ctrl + Shift + F11.

[wcamp]

Thanks (again), Jon!

It's disappointing to learn from you what Adobe prioritizes in its application updates. I hope that Adobe decision-makers will read this forum thread and realize how important it is to not only extinguish the fires that it ignites on each upgraded version but to accommodate subscribers' needs, preferences, and efficient workflow.

Until that happens, I'll follow your advisory to switch from the "Split" view to the "Live," view to check on the appearance of WebP images.

[Nancy OShea]

Rule of thumb is always test your work in REAL browsers & mobile devices.  Don't rely on emulators.

That said, I've no problem seeing this WebP clock in Live View.  However Design view is another matter due to its advanced age. 

To save time during development use keyboard shortcut Ctrl/Cmd + Shift + F11 (function keys enabled) to toggle between Design & Live view.

Hope that helps.

[wcamp]

Dear Jon:

I've got a follow-up concern. . .

On the page that I'd opened, I activated the "Live" view and the WebP files appeared as you suggested.

But when I then opened other pages (which don't yet have any WebP files in them) in the "Live" view, I get a totally white screen! Page after page shows only a white window when the "Live" view is selected.

Is there a prescribed order I need to follow either when opening a web page or switching from Split to Live?

BTW 1:  I'm running DW v. 21.2 because v. 21.3 has a bug that prevents the uploading of files.  Must I wait until v. 21.4 comes out before I can get the "Live" view to present itself, instead of a white window?

BTW 2:  On a Mac, when I use the keyboard shortcut you provided — Control + Shift + F11 — I wind up getting a slight reduction in the machine's audio level. I tried changing "Control" to "Command" but the same effect occurred.

[Nancy OShea]

When your screen blips out, close documents and restart Dreamweaver.  It's probably due to a GPU or VRAM error.

Validate code & fix reported errors.

I don't use a Mac so can't help you with your keyboard shortcuts.  On Windows, Ctrl works the same as Mac Cmd key.  But depending on how your Mac is configured and whether or not function keys are enabled, your mileage may vary.

[Jon Fritz]

Normally a white window in Live View is due to code errors early in the document, like an unclosed <title> tagset for example. Run the validator as Nancy suggested, that should show you where the issue is coming from.

To find your keyboard shortcut for toggling Live and Design, go to Edit > Keyboard Shortcuts > View > View Mode and see what's set for Toggle View Mode.

On Macs, you might need to enable your Function Keys. That's found under the Apple Menu > Keyboard > Keyboard Shortcuts > Function Keys > Turn on "Use F1, F2, etc as standard function keys"

[wcamp]

Thank you, Jon and Nancy:

I don't know of a "validator." Please provide details and a link. Thanks.

I don't use or need to use that keyboard shortcut. But thanks for your suggestions.

Returning to my last post's primary question, please answer it. Thank you.

. . . "BTW 1:  I'm running DW v. 21.2 because v. 21.3 has a bug that prevents the uploading of files.  Must I wait until v. 21.4 comes out before I can get the "Live" view to present itself, instead of a white window?"

. . .

[Nancy OShea]

We don't know what Adobe is planning for future versions of Dreamweaver.  We must wait and see.

Code errors can cause Dreamweaver to behave erratically.  Your version won't change that.  Bad code is bad code in any version.

Under your document, you should see a green checkmark in a circle.  If you see a red X denoting code errors. Click on it to see what those errors are.

Code Validation tool in DW:

Go to Window > Results > Validation.  Click the triangle to check your document.  Fix all reported errors and save.  Repeat with other documents.

[wcamp]

Three follow-up questions, Nancy.

1.  Let me clarify my version question: In DW v. 21.2, can I expect to find WebP image files appearing in the "Live" view?

2.  Regarding your "under your document" comment, I see neither a checkmark in a circle nor an "X". Am I looking in the correct location? My first screenshot shows what appears beneath my document.

3.  Regarding the "validator" that you and Jon referenced, I'm familiar with W3C's validation tool. I wasn't aware that DW provides a pathway to its link. Nevertheless, I checked it and found that there are no "errors," only one recurring "warning" that other advisors had told me, years ago, that I couldn't correct. Do you know if I can correct that warning about Google's use of an illegal character in its fonts family query?

Thanks, in advance, for answering all three questions.

[wcamp]

Sorry: Forgot to attach the validator warning screenshot.

[Nancy OShea]

Show us line 105 of your code. 

A bad value in your <head> tag can be critical and prevent page from loading.

[wcamp]

In response to my "3.  Regarding the "validator" inquiry, here's a screenshot of Google-specific lines of code that appear to generate that warning.

Thanks for helping me with inquiry #3.

[Nancy OShea]

1. Delete lines 100  - 103.  Pre-IE9 doesn't exist anymore.  In fact MS killed off Internet Explorer and replaced it with MS Edge.  So that code is useless.

2. Google Web Fonts uses different fonts and code now.  Go to the Google site below and search for the font you want.

I found this one which is IM Fell English SC.

This is the required code to use it (removing line numbers of course)

Line 104 <!--GOOGLE WEB FONTS-->
Line 105 <link rel="preconnect" href="https://fonts.googleapis.com">
Line 106 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Line 107 <link href="https://fonts.googleapis.com/css2?family=Smooch&display=swap" rel="stylesheet"> 

[wcamp]

Excellent effort [again], Nancy!

I'll work on making the correct entries tomorrow. Much appreciated!

[wcamp]

Following your directions, I corrected those font-family entries, Nancy. There are no longer any W3C warnings. My pages validate completely! Many thanks. . .

May I ask you (or another) to answer my questions, #1 and #2, that I asked yesterday (shown above)?

Warren

[Nancy OShea]

#1. WebP is supported by Live view in all dot versions of DW 21.

#2 Is Code Linting enabled in your Preferences panel?

When Linting is enabled, you should see a code status icon.

Green is good.  Red is bad. Gold is warning.

[wcamp]

Your screenshots are very helpful. I checked and "Linting" has been enabled. So, I opened my Home page and saw the checkmark. Thanks.

But the page that I had difficulty with (shown above), which doesn't present WebP images when viewing the page in the "Split / Design" view is a .php page. No such mark exists in that location. Is that the case for .php-formatted pages?

I presume that that's the case, Nancy. I say that because the blank/white windows that appear when I switch the view from "Split / Design" to "Split / Live," are on my .php pages! On my .html pages, I see WebP image thumbs when I switch to the "Split / Live" view.

So, have I answered my own question #1?   Answer: WebP image files appear when .html pages are viewed in the "Split / Live" view, but .php pages don't [yet] have that capability.

Yes?

[Nancy OShea]

Right.  Linting is for HTML, not PHP.

PHP is a server-side script.  It needs a local testing server to parse the code.  Or maybe you're using site root relative links instead of document relative links.  Site root relative paths work on the server but not locally.

[wcamp]

I appreciate your sending me your prompt clarification, Nancy.

Going forward, I'll use the "Split / Live" view to see my WebP images on .html files but will check .php image files by viewing my already uploaded pages on a browser.

[GollumWebmaster]

Agree 100% that Dreamweaver needs to add proper support for .webp AND .svg formats.  Why else would I keep shelling out dollars every year if Adobe greed prevents Dreamweaver to work as intended?

[Nancy OShea]

@GollumWebmaster,

WEBP is definitely supported in Dreamweaver CC.  See screenshot.  Toggle between Design & Live View with Ctrl +Shift + F11.

Legacy Design View is a remnant from the old Macromedia days .  It is not robust enough to handle modern web technologies and should be used only for quick content editing.  As always, check your work in actual browsers & web devices.