Images

3 versions of the same image needed

Image type and optimization

The focal area/subject of the image should be in the center of the canvas (horizontaly as well as vertically) with at least 15% gutter space on all sides (this is non-focal elements ). This gives us the dead areas that can be cropped out required for responsive design. This rule may not apply on some homepage hero full-size images' canvas where we intentionally want to cut off certanin elements, as well as the fact that the space in that full resolution won't crop the image as much.

All hero images should be saved for web [in Photoshop] as JPG. Select a quality range from 50-60 to balance image size and quality.

• Photoshop 2021 – saving for web
• Optimization settings
• Gutter area

Breakpoints

• 1010px and smaller
• 640px and smaller
• Default desktop (see hero on this page)

Sample breakpoint CSS in this example

/*base code*/

.heropanel {
  position: relative;
  background-size: cover;
  background-position: center;
}
@media screen and (min-width: 1600px){
  .heropanel, .heropanel .responsive {
    height: 700px;
    position: relative;
  }
}
.heropanel, .heropanel .responsive {
  height: 600px;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 640px) {
  .heropanel, .heropanel .responsive {
    height: 500px;
  }
}

/*image code*/

.hero_1 {
  background-image: url(/_newsite/templates/homepage/hero/hero.jpg);
  background-position: center;
}
@media screen and (max-width: 1010px) {
  .hero_1 {
    background-image: url(/_newsite/templates/homepage/hero/hero-m.jpg);
  }
}
@media screen and (max-width: 640px) {
  .hero_1 {
    background-image: url(/_newsite/templates/homepage/hero/hero-s.jpg);
  }
}

Images

3 versions of the same image needed

• Full resolution (raw file)
  • Width: 1863px
  • height: 848px
  • resolution: 72ppi
• Medium (raw file)
  • Width: 850px
  • height: 648px
  • resolution: 72ppi
• Small (raw file)
  • Width: 640px
  • height: 480px
  • resolution: 72ppi

Image type and optimization

,P.The focal area/subject of the image should be in the center of the canvas (horizontaly as well as vertically) with at least 25% top and bottom gutter space (this is non focal elements ). This gives us the dead areas that can be cropped out required for responsive design.

All hero images should be saved for web [in Photoshop] as JPG. Select a quality range from 50-60 to balance image size and quality.

• Photoshop 2021 – saving for web
• Optimization settings

Breakpoints

• 1010px and smaller
• 640px and smaller
• Default desktop (see hero on this page)

Sample breakpoint CSS in this example

/*base code*/

.hero {
    width: 60%;
    float: right;
    box-sizing: border-box;
    padding: 15px 20px 15px 0;
    position: relative;
    min-height: 375px;
}
.hero.hero-right {
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0;
  width: 40%;
  background-position: center;
}

@media screen and (max-width: 1010px) {
  .hero.hero-right {
    height: 400px;
    background-position: center;
    width: 100%;
  }
}

/*image code*/

.hero.hero-right{
  background-image: url(/_newsite/templates/_imgs/hero_grandmother-square.jpg);
}
@media screen and (min-width: 640px) and (max-width: 1010px){
  .hero.hero-right{
    background-image: url(/_newsite/templates/_imgs/hero_grandmother_wide.jpg);
  }
}