Using a specific example, we break down how to control image size in CSS and cover the key image parameters for email newsletters. We also answer whether CRM and email marketers need to know CSS.
For those encountering this for the first time
CSS is a language responsible for describing the appearance of an HTML document. While HTML is used to mark up and structure content on a page, CSS lets you shape the document and make it more engaging for the reader.
Do CRM and email marketers need to know CSS
Let's answer right away.
Strictly required — no.
Nice to have — yes.
Knowing HTML coding is a coder's job. But if a marketer is also savvy in this area, that's a big plus. It's easier for such a specialist to handle tasks — giving feedback to the team, evaluating results, or simply tweaking small things in a template that need fixing right here, right now. Knowing the basics of coding, a CRM or email marketer can quickly fix an element's color, adjust its size, or handle any other small detail.
Plus, a marketer with these skills will stand out from other candidates when applying for jobs. And you could ask for a higher salary too — we didn't say that 🤫
What image size should be used in a newsletter email
As with the question of whether CRM and email marketers should know coding, there's no exact answer with specific numbers.
Images in an email can be any size. But there are other constraints that need to be followed for images to display correctly in a newsletter.
For the recipient to see your email at its best — not a distorted or blurry photo — it should weigh no more than 0.5 megabytes. For GIFs, the limit is up to 1 megabyte.
You can bring the file size within these limits and speed up image loading through code minification. We covered exactly how to do this in detail in this article.
Tip
Retina displays have a higher pixel density. So an image that isn't adapted for Retina will look blurry when opened on one. To avoid this issue in your newsletter, save the file in two versions: standard and high-density. In Figma, that means exporting the image at 2x resolution.
And a tip for those who like to load an email with dozens of images — don't. If you add too many pictures to a newsletter, the email will end up in spam.
How to resize using code
Now, on to the main part.
One of the simplest ways to enlarge or shrink an image in CSS within HTML is through the <img> attributes. To do this, set the height or width value in pixels. To resize an image while keeping its proportions, set only the height or only the width. If you specify one value, the other will be calculated automatically based on the image's original proportions.
If you set both width and height yourself, the image may end up distorted.
How to resize an image in Letteros
The editor offers two ways to adjust an image's resolution.
Through code
Here too you can set the image's height or width to keep it in its original proportions.
Through image upload
Just enter the values you need, and the editor will adjust the image to match.
If you want images in your newsletters or on your website to display correctly and in perfect quality, don't forget to properly set their size using CSS or any other method.