Recommended Image Optimization Process

• Images should be uploaded in jpg format unless there is transparency on the image, in which case use png format.
• For short video, convert your file to an optimized mp4, never use GIFs (this is for performance reasons)
• Images should be uploaded at appropriate pixel resolution and best practice is to optimize them ahead of being uploaded.

1. Find source files that have the highest quality, for example directly from working source files such as .psd files.
2. Take Original Files and resize them to Suggested Pixels for width.
3. If Original Files are sourced from .psd layered files. Take these steps:
4. 1. Flatten layers.
   2. Crop image according to the reference from the live site.
   3. Trim corners if necessary.
   4. Save for Web (Legacy)
   5. 1. Toggle with settings for Image Quality within the Save for Web modal.
      2. Recommended settings:
      3. 1. Check the boxes "Convert to sRGB" and "Embed Color Profile"
         2. Images containing continuous tone (photography): JPG 100% quality, no resizing of image
         3. Images consisting entirely of line art and having zero continuous tone: PNG
         4. 1. Images containing transparency: 24-bit PNG
            2. Images not containing transparency: 8-bit PNG
         5. Line art / logos that MUST be animated: GIF (for any other type of animation, video should be used, not GIF):
      4. Make sure nothing looks pixelated or blurry before saving.
5. Take properly resized images into https://tinypng.com/ and optimize image size, standard practice for web image size should be under 175kb for optimal site speed.
6. Upload Optimized images into Nyla.
7. Be sure to set the Image Ratio, to prevent the page content jumping around on load.

Additional Notes:

• Optimizing assets through a tool like tinypng (works with all image formats, not just PNG) can reduce file size and strip unwanted metadata from photoshop exports.
• For images, we recommend exporting at 2x the regular pixel width of a standard screen, to account for high DPI devices (retina).
• If using image retouching software such as Adobe Photoshop, you can utilize tools such as Sharpen, Contrast, Curves Layer, and the Reduce Noise filter functions to reduce image size while maintaining sharpness and clarity.
• Make sure all images are saved in RGB Color Space.
• Make sure PNG files are cropped properly right on the edges of the image so there are no unnecessary transparent areas.
• You can convert GIFs to mp4s using an online tool such as ezgif.
• In Nyla, you must set an image ratio, this will prevent CLS issues (things jumping around the page on load). We have recommended standard ratios for each image, but we can set custom ratios where needed.
• Image file format information:
• • If image has transparency (not just a color that matches the background, actual alpha transparency, use PNG
  • If image contains continuous tone images (photos), JPG set to highest quality provides the best format. We’ll share the stats later but we were able to get image sizes down considerably by doing this, which is odd as PNG is a more modern and mature format.
  • This ignores SVG which should be used any time it’s possible to do so

What should I do if my images are pixelated?

• Generally speaking, a width of 2500 - 3000px will work in most scenarios, but you don't need to resize them if your image is larger than that (it'll get resized automatically based on the screen of the end user)

• For the majority of images that you upload, you should use JPG by default.
• For images that contain text, transparency and fine details, use PNG.