❓ Ask for help here + See Frequently Asked Questions

Hello !

This may be a weird question, but what's the resolution that MAL use to show background wallpapers on anime/manga list ?
Currently my wallpaper is 800*336, but I can't see the bottom. I'm trying to match both resolution (kinda hard because gifs are getting heavier and heavier... I have to choose between quality, loading speed, resolution, etc...)

Tried
background-size: cover !important;

CSS

Thanks in advance :)

What's the best way to pin/integrate the stats and filter buttons into the status-menu-container, and to also have the stats bar drop down from underneath the status-menu-container when the stats button is clicked, so that it's part of the sticky menu container?



Also, how do I hide the "stats" and "filters" texts so that they're just the icons?

Is it possible to pull the "Broadcast" value from a currently airing anime's page? Would be cool to have that info visible on the list, maybe even with some kind of calc to convert from JST to the user's timezone and possibly indicate whether or not you've watched the latest episode. For example, "Broadcast: Fridays at 23:00 (JST)" from Sousou no Frieren's page could show as "Fridays at 10:00 (EST)". As for the "caught up" indicator, idk if it's possible to pull the number of currently released episodes from the anime page's episodes tab, or if it would need to be estimated from the airing date, current date, and broadcast day/time.

Not sure if CSS has support for logic like that though.

Does anyone know how to fix the upper menu buttons on my lists, I have done some research but I don't know where is the section to be replaced on the css. The problem it's just that the icons don't show, and says "the image is no longer available"...

Thanks.

@Fab3r_of_will try to fix it with these restored topbar codes

https://myanimelist.net/forum/?topicid=2130658

@Str1xRang3 This is a rather confusing question, as MAL doesn't have a specific resolution for wallpapers. MAL has no specific resolution as the resolution of the page will depend on the resolution of the user's browser window that views your page (in this case, you). From there, you decide the size of the wallpaper using CSS. You can set it to a static (non-changing) size, or a dynamic one that depends on the size of the browser window, such as your current "cover" size.

The short explanation is that if you want the image to always fit and never crop you should either use "contain", which will maintain the image width:height ratio but fit it inside the available space with some background colour fill, "auto" to maintain the original size of the image with even more colour fill, or "100% 100%" which will stretch the image to the max extents of both width and height and have no colour fill, but this can often distort the image beyond desirable amounts.

--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---

The longer explanation is if you want to display the entire image, the best way is to use an image of as similar an aspect ratio as your monitor or browser window. For instance, most monitors are 16:9 width:height, so having an image of 1920x1080, 1600x900, and so forth, would be best as these will only crop perhaps a few pixels where your browser interface takes up some room.

However, some people who visit your list will have weird sizes such as 1:1 (square) monitors, 4:3, or even 9:16 (vertical monitors). To account for these cases, or for times when you must use an image that is an unusual size such as your 600x336 image, I prefer to use dynamic sizes such as the "cover" you are already using. "cover" will maintain the image ratio so it still looks good in most scenarios and only crops as much as necessary to fit the entire background. If you want a specific part of the image to be visible, you should use background-position to be sure it's visible all the time. For instance, to make sure the bottom left is always in view, you could use "left bottom" and it will position around that and crop the top and right first. Or you can use % values to target somewhere in between.

There is also the option of statically sizing the image to keep it the same size at all times, and the rest of the page will be filled with your regular background-color. You do this by setting a specific "px" pixel size, such as "600px 336px" or "400px auto" or just "auto" if you want to use the original size. In my opinion though, this often looks sub-optimal unless you fade/blur the image edges using CSS or an image editing program (see the background of Tilt for an example of faded background edges).

@Valerio_Lyndon
Sorry for the late answer.

Thanks a lot for your explanations.


Here is the root of my problem. I may be wrong or using the wrong websites/softwares, but every 1920*1080 gifs that I've generated are way too large (often around 70mb, 1920*1080 resolution) to be uploaded on Imgur (e.g.). This leads to slow loading, which I don't want to happen. This is why i'm currently using 800*366. I tried "auto", "100% 100%", but as you said, "cover" seems to be the best.


TL;DR : how to generate a 1080p 25fps gif which is not heavy and from a 1080p video :

The gif that i'm trying to generate is 24 seconds long (It may be too much for a gif, but possible), and the 1080p mp4 file is around 56mb, down to 35mb if I compress it. My goal is to make a 25fps gif from that video. If I did understood what you said, the "only" good way to make everyone happy (if we consider everyone having a 16:9 screen, which is pretty common) is to make a 1920*1080 gif.

So let's forget my initial question, and look at the one in the TL;DR.
I tired ezgif as recommended in your guides, but I can't make 1080p gifs, and the website doesn't support 25fps for a 24 seconds video. Also tried other websites on the Internet but they don't offer as many option as ezgif. Went trough all your guides but didn't find nothing related to this kind of problem.


Thanks in advance.

Karmashizzle is right

I dont see how that would be possible, at 24 seconds long + with quality. The GIF is made bigger by all the information it contains, for example, the number of pixels the number of colors, etc. With 24 seconds and 24 frames per second thats almost 600 total frames it has to contain- that's going to make a heavy GIF especially from an anime or game

Even if I take this small (awesome) GIF

And I make it 1080p, and reduce it to half a second in length, it comes out to 10MB for just half a second:

With my own know-how on how to reduce GIF size, which is very time consuming and not something I can easily show anyone how to do, I could maybe reduce the size a bit more, but it won't be much and the quality will deteriorate. This also because a GIF is limited in the number of colors it can contain in total throughout the entire animation. 64 total colors I think which is extremely low. Big GIFs get a weird background effect due to this, since the background which may appear to have only a few colors but actually has many.


Now it is possible in very weird circumstances to have large sized and long timed GIFs that aren't too heavy. If the GIF has very little going on, like say only switching between two colors, and I mean literally only two colors one big red frame and one big blue frame, that makes a 24 second 24FPS GIF = 2MB, which is small in terms of file size for a GIF that long.

Thing is since it's only switching between two colors, there's no point to having it 24 seconds long, you'd only need the two frames since that's the only thing changing and it'd only need to be a split second long.


So tl;dr from all that is if you found a very simple anime scene without much color changing, an anime like Panty and Stocking, for example, or maybe a simplistic game scene, such as something from NES days, then a long GIF in the size you want could be made without much quality reduction but even then the length should be trimmed down a lot in length from 24 seconds. I was able to make some GIFs that were the size you wanted at 30MB or so using scenes from Baki where not much happens though, thats still too big but it is a bit better and if the length was reduced a lot it could probably be usable

ppl who use GIFs for their background usually have the best luck with a GIF of hair blowing, or a city scape. I've seen that before. VL had the single GIF of an anime girl on his own layout and it was lightweight (the wallpaper is not part of the GIF btw).
https://myanimelist.net/forum/?topicid=2112220

Also probably better to use some CSS3 animation for an animated thing instead if a GIF, unfortunately some of the images for the tutorials were removed by Imgur cuz they're anime and they dont want that there
https://myanimelist.net/forum/?goto=post&topicid=2077862&id=68651707

One could also learn and use CSS3 animation to load different large width but short timed GIFs at separate times to try to make one continuous background animation, but that'd be massively complex and janky depending on the viewer's connection and number of visits.. plus there's only like 10 ppl on MAL who know how to use the animation codes + theyd have to be experienced with video-to-GIF animation so that's me and maybe 2 other ppl

@Shishio-kun
Thanks you both for your explantations.
Guess I'm doomed for this one.

But if we come back to the initial question, since a gif needs to be 1920*1080 to fits everyone's screen, can I divide this resolution by 2, 3 or even 4 to let "contain" do his work ? For example, dividing 1920*1080 by 3 makes 640*360, do a 640*360 gif will "scale perfectly" into a 1920*1080 screen ? I may be wrong on this one, but i'm just trying.
I'm saying this because by doing some crash tests, I came up with a 21.9mb, 24secs, 24 fps 600*338 gif that is looking pretty good for his size, but (i think) since we can't multiply it by 2/3/4 to reach exactly 1920*1080, it comes up cropped by the "contain" and is looking weird in my list.

yes at this point i'm kinda desperate lol.
I did generated a 15 seconds long gif two years ago (still my list wallpaper to this day) looking decent, 20mb, 600*338, and it's actually a bit cropped but i was like "meh, it looks good so i'm done with it i guess". With that on mind I thought my luck will be enough this time for this one, but not today i guess ahaha

@Str1xRang3

I agree and echo most of what Karma and Shishio said. GIFs are an ancient format that have been stretched to their limits, so big resolutions are just not very viable. To answer your question and come back to my earlier post, yes! Using a smaller image of the same resolution will work fine as long as you use the correct background-size value. This is what I meant with my earlier "ratio" ramblings. 1920x1080 is a 16:9 ratio so anything in that ratio will appear nicely, such as the 640x360 resolution you mention.


I actually used one big webp image with the frames placed vertically and then animated it using CSS. This allowed a smoother transparency effect, better compression, and higher resolution at the cost of some up-front effort on my part. The same effect could be achieved with a PNG file but at much larger filesize (5.9MB compared to 0.8MB, in my case). I wouldn't particularly recommend this method for a full-page background though, as the CSS animation basically relies on the size being static and a full-page background is anything but static. Plus, it's so much more trouble than just converting to a GIF.

In the future perhaps animated webp will be supported on websites. I can dream, anyway.

@Valerio_Lyndon ooo just noticed how small animated webp are. i've converted my manga list gif bg to webp now its down from 6.4mb to 1.8mb. NOICE

im curious on the coding for that image sheet. where can i see it?


hmm, maybe @Str1xRang3 can convert their enormous gif to webp and it'll be decently sized?¿? https://ezgif.com/gif-to-webp

@Valerio_Lyndon ooo just noticed how small animated webp are. i've converted my manga list gif bg to webp now its down from 6.4mb to 1.8mb. NOICE

im curious on the coding for that image sheet. where can i see it?


hmm, maybe @Str1xRang3 can convert their enormous gif to webp and it'll be decently sized?¿? https://ezgif.com/gif-to-webp

Oh... 😬😬😬😬

Well actually I totally knew that! A-and I was just totally testing you! 😎🥺️

@karmashizzle The problem with animated webp on MAL right now is that MAL doesn't seem to support it. You will be able to see it since you will see the original image link, but anyone else visiting will see MAL's rehosted version which returned a server error when I tested animated webp on my list. So visitors will just see no images where there should be. This could be bypassed though if you hosted the CSS externally so that MAL doesn't reprocess the image links, I guess that would be possible! Disproven, see below replies.

The image sheet is a standard CSS frame animation, been used for years (but rarely). There are probably guides around, I found a few when testing. The relevant code from my list can be seen here though. You set up a standard CSS keyframe animation and then use the "steps()" animation-timing-function. The hardest part is getting the correct % values on the animation but I thankfully had a clean 20.

@karmashizzle

I see the animated banner and avatar

This is a beautiful remix!! Perfection. If you want I can share it in our next showcase, like this one but for December
https://myanimelist.net/forum/?topicid=2127558

@Valerio_Lyndon ooo just noticed how small animated webp are. i've converted my manga list gif bg to webp now its down from 6.4mb to 1.8mb. NOICE

im curious on the coding for that image sheet. where can i see it?


hmm, maybe @Str1xRang3 can convert their enormous gif to webp and it'll be decently sized?¿? https://ezgif.com/gif-to-webp

@Shishio-kun are you talking about my anime or manga list? they're different.

umm, sure why not

@hideso 👍

Hello! I copied a mal list layout from one of the threads and for some reason, it takes a looong time to open my list

https://myanimelist.net/animelist/Aly_VeeVee

It takes like 2 minutes for the list to load

I tried 3 different layouts and all of them takes a while to load

Is it fine for you guys or is there something I'm doing wrong?


Edit: I did ask a friend and it seems to load perfectly fine for them... Must be my internet or computer

Hello,

Been a while since I've had to update my customised mal pages using Stylish so apologies if I missed or overlooked something simple. I've got the Add Custom Backgrounds function added on Stylish and previously used one of the standard backgrounds, but guessing this has disappeared from the page location as my background for the main mal landing page suddenly showed "This Image is no longer Available".

On opening Stylish I noticed the pages I used a couple of years back have changed. I opened the Add Custom Background section and went to the coding tab using editor application. I uploaded an image onto imgur and copied the link into the code and pasted this onto Code Section 01 tab, as follows:

/* MAIN BACKGROUND
*/
.page-common #headerSmall:after {
background-size: cover !important;
background-color: #000000 !important;
background-image: url(https://i.imgur.com/3Fi26Mf.jpg) !important;
background-position: center bottom !important;
}

When I select the preview function the image I selected shows up as the background on my main mal page (not my anime list page, just to be clear), as intended, but when I hit save the background switches to solid light blue. I didn't change any other part of the code, except including the imgur link. Can you help at all please?

Many thanks