But why does this problem occur? More importantly, how does it get fixed?
Setting a specific height and width for an image in the Concentri’s WYSIWYG editor or in the email’s HTML or CSS only affects how the image is displayed – it has no bearing on the size or quality of the image file. If you upload a 2,599 by 1,891 pixel, 300 dpi, 3.18 MB image file and insert it into your email, it behaves exactly like a 2,599 by 1,891 pixel, 300 dpi, 3.18 MB image file.
On the Web, a 3.18 MB image is a big image. Way too big. It’s enormous. Gargantuan. Friggin’ massive. Not Web-friendly.
Because 3.18 MBs is not a quick download. And that’s what happens before an image is fully displayed – it’s downloaded. In this instance, we’re asking the email recipient to download a file roughly the size of an MP3.
Let’s fix that. If this image is going to be effectively used in an email or landing page, it needs to be Web-optimized before it’s uploaded into Concentri.
On the Web, we don’t want high resolution. We want lower resolution, lower file sizes. An image with a resolution of 72 dpi is ideal – generally producing an image that displays nicely on a monitor or mobile device and is easily downloaded.
With that in mind, we’ll optimize Santa using Photoshop: (Any basic photo editing program allows a user to edit the image size, but Photoshop provides greater flexibility.)
- After opening the file, select Image > Image Size … from the menu at the top of the screen.
- The menu that opens displays the current specs, the most important being width, height and resolution. Make sure the Scale Styles checkbox is selected. Change the resolution of the image first, moving it down to 72. When Scale Styles is selected, Photoshop will automatically reduce the width and height to match the resolution selected, but these values can still be altered. Let’s assume Santa needs to be 250 pixels wide to fit our design.
- Now we’re ready for further optimization. Select File > Save for Web & Devices … . JPEGs are generally the file type of choice for images used in emails, so make sure that option is selected in the first drop-down menu.
Next, change the value in the Quality drop-down menu from 100 to 80. Adjusting the quality of the image makes a big difference when optimizing for Web, particularly when working with a larger image. In most cases, lowering that value from 100 to 80 can reduce the file size by half.
The display area on the left will show how an image will render online and provide a few details estimating image size and download time.
The optimized image is now 250 by 181 pixels, 72 dpi, 20 KB.
Ah, much better.
Optimizing images for use online is a simple and straightforward technique. A few minutes spent properly preparing images saves significant development time and reduces or completely eliminates image-rendering issues for both content creator and customer.