portico: hello images are always x2 size

This commit is contained in:
Vlad Korobov 2024-09-22 15:37:51 -04:00 committed by Tim Abbott
parent b08fea991b
commit edef41ca32
3 changed files with 17 additions and 24 deletions

View File

@ -23,31 +23,24 @@
<!-- dark theme is only with webp images, since webp support was at the same time or earlier than prefers-color-scheme https://caniuse.com/?search=prefers-color-scheme https://caniuse.com/webp -->
<source class='appshot-1__img'
type="image/webp"
srcset="{{ static('images/landing-page/hello/generated/screen-1-dark-1x.webp') }},
{{ static('images/landing-page/hello/generated/screen-1-dark-2x.webp') }} 2x"
srcset="{{ static('images/landing-page/hello/generated/screen-1-dark-2x.webp') }}"
media="(min-width: 941px) and (prefers-color-scheme: dark)"/>
<source class='appshot-1__img'
type="image/webp"
srcset="{{ static('images/landing-page/hello/generated/screen-1-mobile-dark-1x.webp') }},
{{ static('images/landing-page/hello/generated/screen-1-mobile-dark-2x.webp') }} 2x"
srcset="{{ static('images/landing-page/hello/generated/screen-1-mobile-dark-2x.webp') }}"
media="(max-width: 940px) and (prefers-color-scheme: dark)"/>
<source width="1095" height="496" class='appshot-1__img'
type="image/webp"
srcset="{{ static('images/landing-page/hello/generated/screen-1-1x.webp') }},
{{ static('images/landing-page/hello/generated/screen-1-2x.webp') }} 2x"
srcset="{{ static('images/landing-page/hello/generated/screen-1-2x.webp') }}"
media="(min-width: 941px)"/>
<source class='appshot-1__img'
type="image/webp"
srcset="{{ static('images/landing-page/hello/generated/screen-1-mobile-1x.webp') }},
{{ static('images/landing-page/hello/generated/screen-1-mobile-2x.webp') }} 2x"
srcset="{{ static('images/landing-page/hello/generated/screen-1-mobile-2x.webp') }}"
media="(max-width: 940px)"/>
<source class='appshot-1__img'
srcset="{{ static('images/landing-page/hello/generated/screen-1-mobile-1x.jpg') }},
{{ static('images/landing-page/hello/generated/screen-1-mobile-2x.jpg') }} 2x"
srcset="{{ static('images/landing-page/hello/generated/screen-1-mobile-2x.jpg') }}"
media="(max-width: 940px)"/>
<img alt="" width="1095" height="496" class='appshot-1__img' src="{{ static('images/landing-page/hello/generated/screen-1-1x.jpg') }}"
srcset="{{ static('images/landing-page/hello/generated/screen-1-1x.jpg') }},
{{ static('images/landing-page/hello/generated/screen-1-2x.jpg') }} 2x"/>
<img alt="" width="1095" height="496" class='appshot-1__img' src="{{ static('images/landing-page/hello/generated/screen-1-2x.jpg') }}"/>
</picture>
<div class="cta-buttons">
<a href="/try-zulip/">
@ -100,17 +93,16 @@
<!-- we only have mobile images here -->
<source class='appshot-2__img'
type="image/webp"
srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-dark-1x.webp') }},
srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-dark-2x.webp') }},
{{ static('images/landing-page/hello/generated/screen-2-mobile-dark-2x.webp') }} 2x"
media="(prefers-color-scheme: dark)"/>
<source class='appshot-2__img'
type="image/webp"
srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-1x.webp') }},
srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-2x.webp') }},
{{ static('images/landing-page/hello/generated/screen-2-mobile-2x.webp') }} 2x"/>
<img alt="" class='appshot-2__img'
src="{{ static('images/landing-page/hello/generated/screen-2-mobile-1x.jpg') }}"
srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-1x.jpg') }},
{{ static('images/landing-page/hello/generated/screen-2-mobile-2x.jpg') }} 2x"/>
src="{{ static('images/landing-page/hello/generated/screen-2-mobile-2x.jpg') }}"
srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-2x.jpg') }}"/>
</picture>
</div>
</div>

View File

@ -32,12 +32,12 @@ def generate_landing_page_images() -> None:
for image_file_path in glob.glob(f"{ORIGINAL_IMAGES_DIR}/*"):
file_name = Path(image_file_path).stem
image = pyvips.Image.new_from_file(image_file_path)
for size in (1, 2):
scaled_width = get_x_size(image.width, size)
scaled_height = get_x_size(image.height, size)
scaled = image.thumbnail_image(scaled_width, height=scaled_height)
for format in ("webp[Q=50]", "jpg[Q=70,optimize-coding=true]"):
scaled.write_to_file(f"{GENERATED_IMAGES_DIR}/{file_name}-{size}x.{format}")
size = 2
scaled_width = get_x_size(image.width, size)
scaled_height = get_x_size(image.height, size)
scaled = image.thumbnail_image(scaled_width, height=scaled_height)
for format in ("webp[Q=55]", "jpg[Q=75,optimize-coding=true]"):
scaled.write_to_file(f"{GENERATED_IMAGES_DIR}/{file_name}-{size}x.{format}")
if __name__ == "__main__":

View File

@ -759,6 +759,7 @@ ul {
.appshot-1__img {
width: auto;
max-width: 400px;
height: auto;
}