Appropriate size and dimensions for a web game

With my current project, the one scene only is about 10 mb… Currently it does not take too long to load, however when i add the music, sound effects and the extra characters it should go well over 20mb…

Is there an appropriate size to a web game? And what about the screen dimensions? I am curently working with 960x540. Is it too large?

This is the WIP i am talking about…

meviportal.esy.es/duels01/

Thank you in advance for your time…

I don’t know actually, but 20 Mb sounds good. If the game gets heavier and heavier I guess your problem may be the sprites too big and animations very smooth, I mean, if you use high-quality resources expect high-quality sizes :smiling_imp:
About the screen size, it depends on the quality you want, most devices work on 1080p now, so this resolution should be fine. The screen aspect ratio is another story :slight_smile:

I have kept the 16:9 aspect and it displays correctly on any monitor i tried… The mb size is what bothers me mostly…

Are you using “heavy” sound files? Maybe the problem is in there?
Im saying this because im using a lot of sound files in my game too and had the same problem with the game file size, around 50Mb. Then i converted all my sound files to .ogg type files (most of them were huge .wav files), and voilá, got a gain of +35mb. Ogg files are great. You can reduce a lot the file size and still mantain an excelent sound quality.

Another possible solution is to reduce the size of the images by compressing them… Hard call here… Maybe you can find a balance here: compress a bit the images (and reduce a bit more the game file size) but still manage to get quality on those same images. Not an easy task, sure, but…

There are so many things to optimize on the contents… I talk in general, not about your game MeX1Co.

About audios :
compression is a point, but also, channels of audio are important : don’t use stereo when it’s not needed. Try to loop some music pattern when it’s possible (on a menu for example)…

About images :
Png are lossless, but if you don’t need tranparency, jpg will be better for size.
Also, you can optimize the size by limit colors in color palette (depending on your render, but sometimes even pictures can look nice with only 256 colors or less!).
Transparent PNG come often with useless pixels : transparent part of the images can be real pixels with just 0% opacity => use a png optimizer like https://tinypng.com for example, it’s very efficient by deleting useless pixel information.

Recently, just by optimizing some multimedias contents, i get my compiled game (native game made with GD4) from 255Mb to 72, and i think i can do even better !

1 Like

Good suggestions, Kink.
Tinypng.com is a must! I use it all the time. Life as we know it, would be a big mess without the cute Tinypng panda! Lol

For the sounds i like this Online Audio Converter, https://online-audio-converter.com/, pretty simple to work with but totally amazing with the results. It allows you to convert all kinds of audio files and with advanced settings (you can set up the number of channels, the rate and output quality you want, fade in/out, etc…) Pretty good for a simple soft.

I am not that worried about music… I am also a musician by hobby and I am fairly competent with optimizing audio… Reaper is an awesome software (and practically free) that can allow you do practically anything…

The png suggestion is awesome!!! I tried the tinyPNG in a single sprite. The original file was 89.9kb. The result from tinypng was 30.1kb. Then I had an idea to do it with photoshop (CS2) and export for web - png-8 and the result was even lower… 28.1kb. I will try to find a similar approach for GIMP and post it…

This is the original file of 89.9kb

This is the tinypng file of 30.1kb

And this is the photoshop file of 28.1kb

:slight_smile:

And this is the same image with GIMP… You change mode to Indexed - Generate optimum palette and export to PNG… The end result is similar to photoshop with 28.4kb…

However, photoshop handles better batch processing for a big number of files which is difficult with GIMP and impossible with tinypng…

Hi guys, very interesting discussion.
I didn’t know tinypng.com and it’s very good! Thank you!
I tried to replicate the same result with Photoshop but with no luck.
I wonder what settings tinypng.com is using.