search

HTTPArchive / almanac.httparchive.org

HTTP Archive's annual "State of the Web" report made by the web community
https://almanac.httparchive.org
Apache License 2.0
615 stars 176 forks source link

Optimize and serve chapter/page illustrations #141

Closed rviscomi closed 4 years ago

rviscomi commented 5 years ago

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

cc @HTTPArchive/developers

rviscomi commented 5 years ago

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

logicalphase commented 5 years ago

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

rviscomi commented 5 years ago

Thanks @hyperpress!

logicalphase commented 5 years ago

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 commented 5 years ago

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

logicalphase commented 5 years ago

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

logicalphase commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

Hi @hyperpress any updates on this?

logicalphase commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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

rviscomi commented 5 years ago

@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 commented 5 years ago

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

On Sun, Oct 20, 2019, 12:26 PM Rick Viscomi notifications@github.com 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 https://github.com/HTTPArchive/almanac.httparchive.org/issues/141?email_source=notifications&email_token=AGALN3LTYSSYCGG7JRYE4WDQPSIC3A5CNFSM4IUAJYXKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBYPEAI#issuecomment-544272897, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGALN3MNW35MFYB2ME3J3PTQPSIC3ANCNFSM4IUAJYXA .

rviscomi commented 5 years ago

Much appreciated!!

rviscomi commented 5 years ago

@HTTPArchive/developers there are a few remaining items for this issue. I think they're first-issue-friendly if anyone new wants to give it a shot (@KJLarson @tjmonsi @chaluvadis @noahblon @matijagrcic @gustavofsantos?)

rviscomi commented 5 years ago

Social media image handled by @bazzadp in #302.

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

logicalphase commented 5 years ago

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

rviscomi commented 5 years ago

Thanks @hyperpress!

logicalphase commented 5 years ago

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

rviscomi commented 5 years ago

@hyperpress any update on this?

logicalphase commented 5 years ago

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

On Fri, Nov 8, 2019 at 8:42 PM Rick Viscomi notifications@github.com 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 https://github.com/HTTPArchive/almanac.httparchive.org/issues/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

GEMServers 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 commented 5 years ago

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 commented 5 years ago

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

logicalphase commented 5 years ago

Somebody was serious about their scale there ;-)

logicalphase commented 5 years ago

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 commented 5 years ago

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

logicalphase commented 5 years ago

I'll take care of that today.

logicalphase commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

rviscomi commented 5 years ago

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

logicalphase commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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.