Copy link to clipboard
Copied
We work on a lot of templated emails that require swapping out some old images for new images.
Existing image is set with inline CSS to have a width of 600px.
When I replace that image with a new image it automatically updates the CSS width property to whatever the width of the new image is, for instance 1200px.
I don't want the width to update automatically. How do I change this default setting?
1 Correct answer
What I'm asking for is a way to change Dreamweaver's default setting when you use the Properties panel to browse and replace an image source. By default Dreamweaver automatically changes the CSS width property to whatever the width of the new image is. I want to change the default setting so that it doesn't change the width property.
If you know how to do this, that would be really helpful.
By GabrielCameron
@GabrielCameron in fact you don't have a direct way to do that... but the workaro
...Copy link to clipboard
Copied
Of course inline CSS styles will be removed when you replace the HTML image. That's normal & expected. Also you're not doing users any favors by sending them oversized image files. It's too much bandwidth to consume.
All web images must be optimized beforehand in Photoshop (or other graphics editor). 1200 pixels is too big for emails. Inline CSS doesn't reduce the file size. It merely re-scales what's there to fit your layout.
Hope that helps.
Copy link to clipboard
Copied
Hey Nancy, thanks for responding and for the tips on optimization.
I understand about all that, but I've found for my particular use case the images are more crisp when using a 2x image, especially for retina displays. The larger file size is a tradeoff I'm happy to make in this case.
Hoping to find a way to change that default setting to optimize my workflow.
Copy link to clipboard
Copied
I see. Well I suggest you do some homework on optimizing emails for average users. Follow the recommended BEST PRACTICES from leading email sending services like MailChimp and Constant Contact. Their business is built on knowing what works best for the majority of users without punishing NON-Retina users.
- https://emaildesign.beefree.io/how-to-optimize-images-responsive-mobile-emails/
- https://mailchimp.com/help/image-requirements-for-templates/
- https://knowledgebase.constantcontact.com/articles/KnowledgeBase/5558-prepare-images-for-upload
Good luck!
Copy link to clipboard
Copied
to complete what said Nancy, I really like thos API to optimise image
- https://www.apeaksoft.com/free-online-image-compressor/
- https://tinypng.com/ (this one give you a nice API)
- https://www.jpegmini.com/
but google it, you will find more solutions
Copy link to clipboard
Copied
Thanks for the resources, and for taking the time to respond. But I know how to optimize images.
What I'm asking for is a way to change Dreamweaver's default setting when you use the Properties panel to browse and replace an image source. By default Dreamweaver automatically changes the CSS width property to whatever the width of the new image is. I want to change the default setting so that it doesn't change the width property.
If you know how to do this, that would be really helpful.
Copy link to clipboard
Copied
What I'm asking for is a way to change Dreamweaver's default setting when you use the Properties panel to browse and replace an image source. By default Dreamweaver automatically changes the CSS width property to whatever the width of the new image is. I want to change the default setting so that it doesn't change the width property.
If you know how to do this, that would be really helpful.
By GabrielCameron
@GabrielCameron in fact you don't have a direct way to do that... but the workaround, is to manually remove the WIDTH and HEIGHT attributes fomr the HTML code, and add an online CSS style to handle width and height as you like.
then when you swap images from the SRC attribute, the WIDTH and HEIGHT attributes wont recreate themselves.
so change
<img src="image-A.jpg" width="400" height="400" alt=""/>
to
<img src="image-A.jpg" style="width:400px;height:400px;" alt=""/>
so when you will change to a different image (from SRC attribute that should stay as
<img src="image-B.jpg" style="width:400px;height:400px;" alt=""/>
Copy link to clipboard
Copied
Thanks @B i r n o u, I think I missed this comment in the midst of conversation. I'll try out this workaround next time.
It's a shame you can't update preferences/default settings as I'd hoped (but didn't expect from old stodgy Dreamweaver).
Copy link to clipboard
Copied
yes I agree... I think few builds ago, it was possible to ask Dreamweaver to not display the WIDTH and HEIGHT attributes. Now I don't find it anymore... and it's a pain because having this attributes setted , cause trouble with responsive state
Copy link to clipboard
Copied
Of course inline CSS styles will be removed when you replace the HTML image. That's normal & expected.
By Nancy OShea
I'm not in the same point of view as you... the inline CSS styles remain the same even if the image changes
https://demo.puce-et-media.com/gabriel/
you will have to wait few seconds for the first load of the page... then click over the image... the CSS border still remains, and the image swap
Copy link to clipboard
Copied
Sorry, I may have been unclear. I am NOT talking about a CSS image swap. I am talking about using the Properties panel to change the source of an image file.
Copy link to clipboard
Copied
Sorry, I may have been unclear. I am NOT talking about a CSS image swap. I am talking about using the Properties panel to change the source of an image file.
By GabrielCameron
Nope, you was clear enought... I understood clearly your question, and as you already figure it out, you can use the properties panel to swap image using the SRC attribute input field.
My point, and my feedback was answering to a Nancy remark, which specified that when an image was changed, the inline CSS styles were also removed... that's only it 😉
Copy link to clipboard
Copied
Let's say the OP is in Design or Live view and selects the image. Hitting the delete key removes the entire <IMG>
tag, including its surrounding inline styles and other attributes.
The only precise way to replace an image is to work in Code view & manually edit the <IMG SRC>
attribute without disturbing other code around it.
Until all email clients can support <SRC SET>
with various sized images -- which may never happen (see the support table on Can I Email), the use of standardized images ≤ 600px remains the best way forward.
That's my story for 2021-2022 and I'm sticking to it. 😇
Copy link to clipboard
Copied
yess... but as you said, let's say that the OP only change the SRC attribute directly from the property panel. 😉 so the online style still reside in withing the IMG tag.
My point wasn't at all about the size, or others image consideration
Copy link to clipboard
Copied
yess... but as you said, let's say that the OP only change the SRC attribute directly from the property panel. 😉
By B i r n o u
I'd employ a developer who knows what they are doing, not someone pretending to be a developer. Far too much dependency these days and putting faith in automation and not nearly enough of those skilled in what they profess to practice..........end of!
Copy link to clipboard
Copied
I don't understand your reaction @osgood_ ... the OP doesn't want to automate at all, everything is done not in code, but in Dreamweaver.
Copy link to clipboard
Copied
I don't understand your reaction osgood_ ... the OP doesn't want to automate at all, everything is done not in code, but in Dreamweaver.
By B i r n o u
That sounds like a contradication? Doesn't want to automate at all: everything is done NOT in code, but in Dreamweaver. What's NOT automated about that?
Copy link to clipboard
Copied
My my, how we've gone down the rabbit hole. My simple question certainly stirred up a lot of passionate opinions. 🙂
For what it's worth, @osgood_ I agree about hiring developers to do development. That's a distinct specialization that my mere working knowledge of HTML/CSS will barely scratch the surface of. I actually just finished a conversation about how we might rework processes so designers can focus on designing, developers on developing.
But as things are currently stand, my respsonsibilites require me to dig into code a bit, and as a visual person, I prefer using a GUI rather than diving straight into the matrix.
Much respect.
Copy link to clipboard
Copied
My my, how we've gone down the rabbit hole. My simple question certainly stirred up a lot of passionate opinions. 🙂
For what it's worth, osgood_ I agree about hiring developers to do development.
By GabrielCameron
You sound like a very sensible person, probably put in a situation where your skills are limited so it becomes challenging. That is unfortunatley were we are at these days........too many doing tasks they know very little about, either out of desperation to make a buck or two or a p o r n in the game whereby a company is trying to save money.
Much respect.
Copy link to clipboard
Copied
What's NOT automated about that?
By osgood_
Woaw... I see, through your precision, that we do not have the same notion for the interpretation of the word automated. at least not the same granularity, let's say, at the time where the web is nowaday.
automation, at least the way I see it, is more like having a batch process, that use an algorythm to dispatch datas and create output from chaos, ... doing one or thousand takes the same amount of time... tools like Grunt, or Gulp... in short, the spirit of Node are fully integrating the concept of automated. one action equal many many steps
So for you, clicking in a dialog box to change a state is in the domain of automation. Of course. Why not ! I agree. The input field replace the way of entering code manually... one action equal one step.
Copy link to clipboard
Copied
What's NOT automated about that?
By osgood_
Woaw... I see, through your precision, that we do not have the same notion for the interpretation of the word automated. at least not the same granularity, let's say, at the time where the web is nowaday.
automation, at least the way I see it, is more like having a batch process, that use an algorythm to dispatch datas and create output from chaos, ... doing one or thousand takes the same amount of time... tools like Grunt, or Gulp... in short, the spirit of Node are fully integrating the concept of automated. one action equal many many steps
So for you, clicking in a dialog box to change a state is in the domain of automation. Of course. Why not ! I agree. The input field replace the way of entering code manually... one action equal one step.
By B i r n o u
It would not be so bad If those users knew what they were inputting through those boxes and how it all worked BUT the majority don't, they just click about blindfold and keep their fingers crossed, hardly the persona of an expert in what they are selling or supposedly paid for.........not for me I'm afraid.........unless they are a hobbyist of course, then anything goes.........who cares.
Copy link to clipboard
Copied
I think most graphic designers are intimidated by code. Sadly, they don't stand much of a chance in web & UI/UX design where understanding how code works is every bit as essential as good design skills.
https://uxplanet.org/web-design-vs-graphic-design-cc55e16a793a
I guess it's nice work when you can find it. Sort of like the elusive "Rose Job" — nothing on your desk except a vase with a rose in it. I never found that job either. 🙄
Copy link to clipboard
Copied
https://uxplanet.org/web-design-vs-graphic-design-cc55e16a793a
By Nancy OShea
maybe I have big gaps in english or I'm not used to this kind of articles... so I took two steps to look at the date... nov 2020... not so old... so I figured it was actually a bit of humor on Nancy's part to point to this article because I knew her in better shape to quote articles... 🙂
So funny article... there's still this ancestral distinction between print and web, or between 72 and 300 dpi... woaw... maybe we should update ourselves on this level... and no word on the responsive aspect of visuals.... there too... I almost feel like I was reading Andy Clarke's articles but well with 15 years behind... phew... I almost thought we were going to talk about a super palette made using DeBabelizer ;), but well... the passage on typography is sad as can be... we're almost only allowed to use arial, and sans serif... Jason Santa Maria is so far away...
Nancy, please tell that it was a joke that I missed 😉 and I'm sorry
Copy link to clipboard
Copied
ÃŒt doesn't read like a joke to me be apart from maybe infering typographic fonts are limited, which of course they no longer are for web development and maybe the old issue of dpi, which many seem to have difficulty understanding. Apart from that l would say the article is trying to seriously address the differences between a web designer, a graphic designer and a web developer, which is when it all become more skilled.
My simplification is graphic design is one dimensional, there's far fewer options to consider, it's far easier to learn a graphic design program, there's only two. I'd go so far as to say graphic design is the 'poor man's choice' of career these days. It really is not that skillful compared to a web developers job where there are multiple dimensions to consider, entails much more thought processes, multiple workflows and programs to learn, its all far more skillful if you approach it on a serious level.

