Housing and social support

Images

2 versions of the same image needed

Image type and optimization

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

• Between 640px to 1010px uses the wide image.
• Smaller than 640px and greater than 1010px uses the small image.
• 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);
  }
}