The hi-res webcomic option
New feature for Pepper&Carrot website : the High Resolution button ( HD ) displaying Pepper&Carrot artworks to 2400p!
Demo:
You can test the HD buttonon all episodes, but for a first time ; I recommend episode 7 . Fastest to load ( 5 pages ). The HD button is at the end of the language buttons:
https://www.peppercarrot.com/en/article273/episode-7-the-wish
How it works :
The resolution update the page to 2481 x 3503px, PNG files ( around 13MB to 20MB per page, it can take 1 or 3 minute after pressing the button to load ). The page will fill your active screen. This feature needs a browser with the support of javascript. It's compatible with hi-resolution and retina display.
Next step?
Probably the next technical step will be a Pepper&Carrot API. This simple API will be more about the specification of folder and file naming + a JSON files updated with a database of links to work with all the pages. It should bring many options for connected applications ( eg. it would ease the creation of a computer desktop widget displaying last cover + linking all episodes ).
Credit:
This feature was coded with the precious help of Sölve Svartskogen, also translator of the Polish version and contributor on the fonts. This project was possible after big autumn cleaning and refactoring with new naming convention.
5 comments
> Probably the next technical step will be a Pepper&Carrot API.
An RSS feed for the comics would already be good :)
Maybe you could use WebP image format to publish these hi-res images as files are then much smaller than JPG or PNG. However, not all web browsers support WebP, maybe Javascript could handle that and fallback to PNG if not supported.
It would be also great to be able to download lossless hi-res WebP images of the comic :-)
@Remi Rampin : Hey! does this one is good enough ? http://www.peppercarrot.com/feed/en/rss/categorie3 If yes, I'll expose better this link on the front page.
@Rob : Oh I spent a lot of time on some stat and test. I tested webp on the renderfarm ; I win around 20 to 30% compression in lossless. It's good! But yes, I'm loosing half of the browsers compatibility ( if not more ). The PNG hi-resolution stored on peppercarrot.com represents 17,4 GB for 11 episode and 25 langages. Storing webP would cost almost 13GB more data stored. For my server and CPU time to convert and manage files , it's not a good option. I'm studying more and more switching the hi-res to JPG wit 92% compression. A 11MB file become a 2,3MB and the impact on quality for printing is invisible. Also, JPG is widly supported by any browser or image-editor. :)
The HD button is good. It lets people choose to view the bigger version if they have a fast enough internet connection, or if they're willing to wait.
Another option is with "responsive images." Then, the browser *automatically* chooses the images to use, based on the user's device. In the future browsers can also optimize for the user's internet speed. The website "CSS Tricks" has a pretty good tutorial about this, if you're comfortable reading about these things in English. <https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/>
I'm working on rebuilding my website to use the srcset attribute for <img /> tags.
@Andrew Toskin : Thanks for the HD button, and also for pointing an article about responsive picture. I'll study it! :)
Post a reply
The comments on this article are archived and unfortunately not yet connected to a dedicated post on Mastodon. Feel free to continue the discussion on the social media of your choice. Link to this post:You can also quote my account so I'll get a notification.
(eg. @davidrevoy@framapiaf.org on my Mastodon profile.)