We all pay attention to how graphics are displayed in emails and how they impact recipients. All this care can however be canceled if the support, the email, is not taken into account. Especially since the bandwidth is not infinite: this is why avoiding the insertion of images that are too heavy is essential. A few recommendations: Maintain a maximum weight of around 50 KB Make sure the image resolution is 72 dpi Save images as JPG, GIF, PNG #8 Emails that are too heavy Marketers often insert images created for another purpose or medium (an ad campaign, the website, etc.) into an email. Without taking certain precautions, the height and width of these images will not work in the email.
The HTML img tag helps to optimize them, allowing us to define the height and width of an image. For example, the following line of code sets the height to 123 pixels and the width to 456 pixels. Once the parameters are set, regardless of the actual size, the image will be displayed on the browser with the specified height and width . #9 Inserting E-Commerce Photo Editing Service optimized animated GIFs Animated GIF certainly add a lot of emphasis to a message: they are an extremely effective way to capture attention . Moreover, inserting them into an e-mail is very simple. But you have to be very careful, since the size of an animated GIF increases rapidly depending on both the number of frames in the animation and the dimensions . But mostly because some clients don't see the animation at all: Outlook 2007-2013 only shows the first frame . What should we do then?
Make sure the very first frame is full and complete so that the message is understandable even if animation is not enabled. #10 Forget image alt text As you know, by default some email clients don't show images , but that's not all, because many users prefer to disable them (for various reasons). How to buffer these situations? With some code properties : title , which displays the content of an image when the mouse pointer is positioned over the image area (mouseover) alt , which defines the text to display if the image is not downloaded (alt text). Our recommendations : Make sure images always have alt and title attributes set Do not make the inserted text too long, as this may ruin the layout of the communication (for alt) or be difficult to use (for title) Make sure the alt text color is easily readable both in terms of size and color, especially when you have a colored background Preferably leave the alternative text underlined by a link so that its function is easily recognizable within the communication.