JPG) to optimize quality without sacrificing load times Experiment with different image file types (PNG vs.Compress the image in Photoshop, an online compressing tool or even in Paint.Resize the image yourself (as opposed to having the browser resize it).Google research revealed that a loading time increase from 0.4 to 0.9 seconds can reduce traffic by 20%. Something to keep in mind with large, high-quality images: loading times. Note the blur where I placed the white text on the image. If you want your hero to take up the entire width of the page, ensure that your image is 100% of the container tag through VW or VH ( more code knowledge here).Ĭustomize your stock images (more on this below)! As a general rule of thumb, make sure the background isn’t too loud where you are placing text and look for a color contrast. In terms of actual pixel width and height, the size of your image depends on exactly what you are looking to portray. To avoid the fuzz? Feel free to resize your images DOWN but never UP. This may not need to be said, but make sure it looks sharp! Computer and phone screens are so big and crisp now, your customer will absolutely be able to tell if you have a fuzzy, low-resolution hero image. It’s a blind date-appearances are everything! High-Quality Images The hero image is usually your first “real” impression someone was compelled enough to open the email or webpage to see what you have to offer. A great sale could fall flat because the image and copy did not explain the discount or sale selection. When I was working in email marketing, it was all about the hero image-the main image on the creative that would (hopefully) get the most clicks. And thus, the marvel that is a Hero Image was born and thrives.
Retail websites began to move away from displaying category pages as their home content and toward a flashier gateway to the real content. With these progressions, websites like Facebook, Twitter and WordPress implemented featured images at the top of pages.
Now, talk is about landing page experiences this has come way beyond utility and is now diving into flow and style. As websites have progressed from HTML to JavaScript, Flash, and CSS, web design has utilized these tools to make websites more visual. Heroes come in all different shapes and sizes, from large headers to full-screen banners to featured content. Hero images have become immensely popular in web design recently because they are flashy, pretty and work to keep visitors engaged. It is up to you to choose a high-quality photograph or graphic to represent the theme of your page as a whole. The goal of the hero image is to immediately draw visitors in and show them what your site and your content are all about. But the heroes we need.īut for real – a hero image is the first, main photo or graphic that you see at the top of a webpage or email.
0 kommentar(er)
