Optimize and serve chapter/page illustrations

[rviscomi]

The raw illustration JPEGs are 2000 by 1000 pixels and up to 7 MB in size.

• upload raw illustrations
• figure out which image dimensions we'll actually need
• generate optimized versions for each size
• write descriptive alt text for non-visual users
• write the markup and styles to serve the optimized version depending on the viewport size and capabilities
• set the chapter illustration to be the default social media cover image

cc @HTTPArchive/developers

[rviscomi]

@HTTPArchive/developers is anyone available to work on this?

[logicalphase]

I can work on this. Go ahead and assign me and I'll work on it after a chapter review tonight.

[rviscomi]

Thanks @HyperPress!

[logicalphase]

Quick update. I got started late on the Mobile Web Chapter review this evening. I still need to finish that up, and I'll take care of the optimizations tomorrow without fail.

[rviscomi]

@HyperPress have you had a chance to look into this? 🙏

[logicalphase]

I got sidetracked. I'll have finished by the morrow.

[logicalphase]

@rviscomi is there any particular folder you'd like the optimized versions put? Also, is there guidance on sizing, or will we be using something dynamic for that? Or is this a judgement call?

[rviscomi]

@HyperPress I've merged #196 which creates new subdirectories for each chapter to organize all of their images. All chapters start with hero_xl.jpg which is the full-size hero illustration. All size variations of the illustration should go in these subdirs with relevant suffixes (eg hero_lg, hero_sm).

As for how big each image should be, I think we'll need large and small versions to fit the desktop and mobile layouts. The Chapter page desktop design looks like the illustrations are 866x455 px and the mobile illustrations are ~326x203 px.

Besides simply resizing the illustrations I think we should also try optimizing them for file size, eg by converting to webp. We'll still need jpegs for unsupported browsers, so we should run the resized originals through some kind of jpeg optimizer.

And finally, we'll need to update the chapter page template to include a <picture> element with the various sources.

[logicalphase]

Thank you Rick. I'll handle the optimization during the processing sizes and upload them as outlined above. <https://themesurgeons.com> <https://themesurgeons.com>

[rviscomi]

Hi @HyperPress any updates on this?

[logicalphase]

If possible, I need a day or two to get back to this. My daughter is having surgery and I'm traveling for that. I can take care of the remainder, I just need to finish up a few things, test the optimized versions, and the PR. It's mostly done. Sorry about the last minute update. <https://themesurgeons.com> <https://themesurgeons.com>

[rviscomi]

Thanks for the update @HyperPress, totally understand and I hope all is well with your daughter and her surgery ❤️

Would it be possible to create a PR with whatever you have so far and we can iterate on it while you're offline?

[logicalphase]

I'll do that just as soon as I arrive in NC and get checked into hotel, stop by to check on her, and can then VPN. Most of my night will be free anyway, so I expect to have it all finished and ready to merge by late night early morning if all goes as planned. It'll give me something to do to pass time tonight. If plan changes, I'll PR what I have. Thanks for understanding, and kind words.

[logicalphase]

@rviscomi I'm finished with images up through PWA. I'd like to press on and just work on them til they are done. But if you need them, I can split them and ship what I have. I'd say I'm about an hour away from being totally done.

[rviscomi]

I'd like to press on and just work on them til they are done. But if you need them, I can split them and ship what I have. I'd say I'm about an hour away from being totally done.

Sounds good.

What approach did you end up taking for the different image combos? In terms of size and file format.

[logicalphase]

I ran with what you recommended with:
hero_lg.jpg 866w
hero_lg.webp
hero_sm.jpg 326w
hero_sm.webp
and I'm using Squoosh.app for optimization. I left the original in the same folder.

[logicalphase]

@rviscomi I forgot to ask, but should this be a PR for master branch, or is there some other? Images are resized and optimized as discussed. I need to update content page paths. If you can let me know on the other I'll get these up to the Github repo. Also, do you want me to optimize the images in the root /static dir as well?

[rviscomi]

Could you make your PR into the design branch? And yes, if you could optimize the other images in /static that would be very helpful! The design branch has the latest images in that directory so make sure to use that one. Thanks again!

[logicalphase]

Okay, I'll close the PR I just opened for master and and correct that.

[rviscomi]

@HyperPress do you have bandwidth to work on writing the markup to serve the appropriate large/small jpg/webp image in the chapter templates? (checklist item 5)

[logicalphase]

I can. I have some clear time tomorrow evening CST. Sign me up

…

On Sun, Oct 20, 2019, 12:26 PM Rick Viscomi ***@***.***> wrote: @HyperPress <https://github.com/hyperpress> do you have bandwidth to work on writing the markup to serve the appropriate large/small jpg/webp image in the chapter templates? (checklist item 5) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#141?email_source=notifications&email_token=AGALN3LTYSSYCGG7JRYE4WDQPSIC3A5CNFSM4IUAJYXKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBYPEAI#issuecomment-544272897>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGALN3MNW35MFYB2ME3J3PTQPSIC3ANCNFSM4IUAJYXA> .

[rviscomi]

Social media image handled by @bazzadp in #302.

@HyperPress would you have time to work on tasks 4 and 5?

[logicalphase]

I'm home and available. I'm taking some overdue days off. Sign me up and I'll tackle those tomorrow. Cool?

[rviscomi]

Thanks @HyperPress!

[logicalphase]

Hey @rviscomi - I noticed that the Design branch is no more. Should I commit to Master? Or am I missing something else?

[rviscomi]

@HyperPress any update on this?

[logicalphase]

Finishing this up no later than tomorrow. Swear ;-)

…

On Fri, Nov 8, 2019 at 8:42 PM Rick Viscomi ***@***.***> wrote: @HyperPress <https://github.com/hyperpress> any update on this? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#141?email_source=notifications&email_token=AGALN3OQA3MGPE6D6N6NH4TQSYPPVA5CNFSM4IUAJYXKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDT3ZYY#issuecomment-552058083>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGALN3OZQEY64TWBGWITX7TQSYPPVANCNFSM4IUAJYXA> .

-- Best to you and yours, John *John Teague* *Founder and CEO* Phone: 1+612.284.3001 <1+6122843001> 241 109th Avenue Northwest Minneapolis, MN 55448 USA *GEMS*ervers WordPress Delivery Perfected!

---- *CONFIDENTIALITY NOTICE:* The information contained in this communication, including attachments, is confidential and intended only for the exclusive use of the addressee. If the reader of this message is not the intended recipient, or the employee or agent responsible for delivering it to the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. If you have received this communication in error, please notify us by telephone immediately. Thank you. <https://themesurgeons.com> <https://themesurgeons.com>

[logicalphase]

Hey @rviscomi , Was dropdown.png (which is actually saved as a bitmap) supposed to be a small icon image like 16px x 16px or 24px x 24px in size. It's gigormick and I'm just making sure.

[rviscomi]

Yes, it should be a small icon! I see what you mean. WTF?!

[logicalphase]

Somebody was serious about their scale there ;-)

[logicalphase]

I'll have these done this evening. What I'm doing with the images in the root of /images is to optimize the ones that look close to the proper size. The ones that don't I'm creating additional sized versions with the height and/or width in the file name. I'm also creating webp versions of all those.

[rviscomi]

Only remaining task for this issue is to serve the smaller hero image to mobile viewports.

[logicalphase]

I'll take care of that today.

[logicalphase]

Hey @rviscomi - I need about another 45 minutes to complete the chapters and I really think I can commit the changers on the hero images for the intro pages, etc. the only thing I changed was the icon image names, and that needs to be only updated in templates base.html and base_chapter.html as far as I can see. Otherwise the image names didn't change for the original optimized images. I just created some made slightly smaller copies of each. I can update those whenever. Anyway. that's where I am right now. Going as fast as I can.

[rviscomi]

Thanks @HyperPress. To confirm, the chapter illustrations are unrelated to any icons and the only change should be to this line, so it's not always hero_lg.jpg:

https://github.com/HTTPArchive/almanac.httparchive.org/blob/master/src/templates/en/2019/chapter.html#L115

[logicalphase]

Right. On this issue #141 I'm updating the hero images with picture element and a large and small for now.

[rviscomi]

Ok great, thank you! Go go go! :)

[logicalphase]

Did the commit with the picture elements and srcset not make it in time for the launch? I just noticed that the changes are not in production.

[tunetheweb]

Did the commit with the picture elements and srcset not make it in time for the launch? I just noticed that the changes are not in production.

Hey looks like this did indeed get lost! Looks to me like from the conversation it was agreed to resubmit as a separate PR but don't see that coming in. Not sure if there was confusion as to who would do it.

Can you resubmit as a new PR @HyperPress ? Would be nice to get this in since the back is broken on this.

[rviscomi]

I spoke with @HyperPress on Slack and he's going to stage his changes in a new branch, test, and open a PR. I had started making a PR with his changes from #406 but noticed issues with chapter hero images being too small.