Official Group for Steamworks Development Support

Available today in the Steam client beta, Steam store pages have changed from being 940px wide to now 1200px wide. This change takes place as we work our way through various parts of the Steam store to modernize the design and provide a better experience for players with larger monitors.

Additionally, we've added capability for game developers to upload high quality video files to display in the written description area for their games. In most cases, this new support for uploading .mp4 or .webm will result in higher quality and smaller file sizes than the previous support for only .gif files.

Read on for more details of this update.

Individual product pages, as well as the overall store menu, is now up to 1200px wide for players opted into the Steam client beta. This improves the shopping experience in a number of ways, allowing for bigger screenshots and trailers, and allowing more room to describe your features in the written description area. Of course the page will still scale down appropriately for smaller screens or smaller browser windows.

Most developers won't need to do anything for their games' store pages to look great in the new wider format. However, if you had images embedded in your written description that were designed to be exactly the width of the old page, you may wish to replace them with wider versions that are at least 780px wide to fill out the main content column of the page.

For static images, we recommend targeting 2x the resolution (1560px wide) for your images to allow for better quality on high DPI displays.

No need to sweat over the exact dimensions of the assets you upload, as Steam will accept the largest image you have and will create appropriate sizes for display on your store page.

If you upload larger images, Steam will automatically scale them down to fit the width of the page and will provide a button on the image for users to open a larger version.

Any new assets designed for the new page width will also work well with the older page width while we are in this transition period.

When you are editing your store page and select the option to preview your work in progress, you'll now find that the preview is of the new wider version. This will allow you to properly see how any images or videos included in your written description will appear to players once the change has fully rolled out.

You can also browse the entire Steam store with the new wider pages by opting into the Steam client beta (learn how to opt-in here) and exploring the store within the Steam desktop client.

If you have existing images that would present better if centered on your store page, you can now easily do that with a new formatting option. See below for details on new alignment options.

Steam has long supported .gif files as a way to include animated images within store page descriptions. However, we've heard requests from more and more developers to support more options of file formats for better quality and color depth. So we've done just that: Now you can upload high quality video files (.mp4 or .webm) to show off your features, demonstrate specific game mechanics, or just add visual flavor to your store page.

Don't worry about specific compression or quality settings, as the Steamworks backend will transcode them into a good quality and light-weight video format that works well when displayed on desktop, Steam Deck, and in the Steam mobile app.

For newly uploaded videos and images, the following constraints apply:

• Animated assets can be a maximum of 12 seconds in duration

• We accept up to a maximum of 100MB source files, though you likely won't be getting near that limit

• You can upload assets of any dimensions you want but it'll get resized down to a maximum of 4096x8192

• PNG, JPG, GIF, WEBP, WEBM, MP4 uploads are all supported

To support the upload of video files, we have first rebuilt the entire image upload pipeline and re-processed the images and gifs on existing store pages. We addressed the edge cases that we could identify where there were issues with color depth, transparency, or other conversion errors. But please let us know if you notice anything unexpected about the display of images you have uploaded for your store page description.

• Avoid including small text in your images, as it can be hard to read on mobile devices.

• Also note that any text that you include in an image is impossible for screen readers to parse. If you do include text in your image, please set the available alt text for the image. A button to edit alt text appears at the bottom of the image upload area for custom images in your store page editor.

• Keep any animated assets short: they must be under 12 seconds.

• Consider the end user and how much content you are asking them to download in order to read your written description. Use images and animated assets sparingly and with deliberate purpose.

Along with this update, we've also added support for alignment of each line in your written description. Now you can center images or titles for greater flexibility in how you present your game.

If you have existing images in your written description that were specifically designed to be centered in the older, narrower store page, you can simply use the new alignment option to make sure they are centered in the new wider store pages.

Q. How long will the beta run?

A. If everything goes smoothly, this beta may only run for a few weeks before becoming public for everyone. We'd like to give game developers enough of a chance to upload new store page assets if desired, and make sure that we have time to address any encoding issues that we didn't encounter in our testing.

Q. Why these store page changes now?

A. We've been working on modernizing a number of aspects of the Steam store shopping experience. You can see that with the recent new store navigation, currently in beta, as well as our recent trailer player update. This work includes refreshing the page layouts to make better use of modern screen sizes and resolutions, as well as optimizing page loads for display on mobile and handheld devices. Keep an eye out for more announcements about refreshed areas of the store in the coming weeks and months.

Q. How many gifs were transcoded?

A. In our batch process to convert all the existing assets on store pages, we processed over 292,000 gifs into video files. In the process, we found that some GIFs compressed differently, depending on the color depth, transparency, length, and complexity of the animated image. So, for each image, we generated an MP4, a WEBM, and WEBP and then selected the smallest file to display on the store page. Animated GIF files are known to utilize an inefficient compression algorithm, so this process resulted in an average reduction of file size by 87%.

Q. How do you pronounce GIF, with a hard G or a soft J?

A. We on the Steam team are pretty split on how to pronounce it. Regardless of which way you are inclined, be prepared for some heated debates should you share your opinion on the internet.