Finding the BEST graphic EXPORT SETTINGS in Illustrator for web based content

Creating High-Quality Graphics for Your Educational Content

In the world of online education, visuals play an important role in conveying information clearly and engagingly. However, one common challenge that many educators and content creators face is the creation and optimization of graphics that look great across various devices and screen sizes. Whether you’re designing for a desktop, tablet, or mobile device, ensuring that your graphics are clear, crisp, and appropriately sized is essential.

In this post, we’ll walk through the process of creating and exporting graphics for use in your learning management system (LMS), and explore different formats and resolutions to find the best balance between quality and file size.

The Common Struggle: Graphics That Look Great…Until You Resize Them

It’s frustrating to create a beautiful graphic only to see it become pixelated or blurry when viewed on a different screen or after resizing it in your LMS. The last thing you want is to upload a fantastic image, only to find that it’s distorted and not representative of your content’s quality. The challenge lies in maintaining the image’s quality without bloating file sizes to the point where your LMS struggles to load them.

In this experiment, we’ll use Adobe Illustrator to create a simple graphic and export it in various formats to test how the quality and file size change when they are resized and imported into an LMS.

Step 1: Preparing Your Graphic

We’ll start by designing a simple graphic that represents a list of items or steps—something commonly used in educational content. In Illustrator, we create this on an artboard sized at 1280 x 800 pixels. This size is chosen to fit well on a larger screen, but as you’ll see, it’s just one of many factors that come into play when exporting and resizing graphics for online content.

The next step is exporting the graphic in multiple formats with different resolutions to observe the results.

Step 2: Exporting the Graphic

We’ll experiment with the following formats:

  1. PNG at 300 DPI (dots per inch)
  2. PNG at 150 DPI
  3. PNG at 72 DPI
  4. JPEG at 72 DPI
  5. SVG (Scalable Vector Graphics)

Each of these formats serves a different purpose, and understanding their strengths and weaknesses will help you choose the right one for your content.

Exporting Settings

  • 300 DPI PNG: High resolution, perfect for print or detailed digital displays.
  • 150 DPI PNG: A good balance between quality and file size.
  • 72 DPI PNG and JPEG: Lower resolution, smaller file size, ideal for quick-loading web content.
  • SVG: A vector-based format that can be scaled infinitely without loss of quality, ideal for graphics that need to look sharp on any screen.

Step 3: Comparing File Sizes

Before importing the images into our LMS, let’s compare their file sizes:

  • 72 DPI JPEG: 169 KB
  • 72 DPI PNG: 32 KB
  • 150 DPI PNG: 75 KB
  • 300 DPI PNG: 155 KB
  • SVG: 61 KB

As you can see, PNG files with lower DPI have significantly smaller file sizes compared to JPEG files. The SVG format, being a vector graphic, is also much smaller compared to the higher DPI PNGs but offers scalability without any loss in quality.

Step 4: Importing and Viewing the Graphics in an LMS

Now, we’ll import these images into our LMS and view them at their normal display size of 1280 x 800 pixels.

  • The 72 DPI JPEG looks grainy and low quality, especially when resized. It’s fine for small, web-based images but doesn’t hold up well when viewed at larger sizes or on high-resolution screens.
  • The 72 DPI PNG looks similar to the JPEG in terms of quality, but with a smaller file size. The transparency feature in PNGs helps reduce their size, but the quality still isn’t optimal.
  • The 150 DPI PNG is a noticeable improvement in terms of clarity. At 150 DPI, the image retains good quality without becoming a large file, making it a great choice for most educational content.
  • The 300 DPI PNG is crystal clear, but the file size jumps significantly. While it’s ideal for print materials, it’s probably overkill for online content, unless you’re working with high-quality media.
  • The SVG is scalable and remains sharp, regardless of resizing. No matter the screen size or resolution, SVGs will maintain their clarity, which makes them an excellent choice for graphics that need to look good on any device.

Step 5: Resizing for Mobile and Tablet Displays

One important aspect to consider when choosing the right file format is how the image behaves when resized for smaller screens, like tablets or smartphones. Resizing graphics to fit different screen sizes can cause issues with pixelation, especially for lower DPI files. As you scale the images to 100% of the screen width, here’s how they perform:

  • The 72 DPI PNG and JPEG images begin to break up as they are resized, showing clear signs of pixelation.
  • The 150 DPI PNG remains sharp even at larger sizes. This resolution strikes a good balance between quality and file size, making it ideal for most online content.
  • The 300 DPI PNG looks sharp, but the file size may be too large for efficient use on mobile devices or websites with slower load times.
  • The SVG always looks crisp, no matter the screen size, thanks to its vector-based format. This makes SVG a perfect option for graphics that need to adapt to various screen sizes without losing clarity.

Final Recommendations

Based on our test, here are a few takeaways:

  • For web content, aim for 150 DPI for most images. It provides a good balance of quality and file size and works well for different screen sizes.
  • For scalable images, such as logos or diagrams that need to look sharp on all screen sizes, SVG is the best choice. It’s lightweight and always crisp, no matter how large or small you scale it.
  • For print materials, stick with 300 DPI PNG or the Illustrator file to ensure high-quality prints.

Conclusion

By understanding how different file formats and resolutions impact your graphics, you can ensure that your educational content looks professional and performs well across all devices. Test and experiment with these settings to find the optimal balance for your LMS and other platforms. Remember, clarity matters—don’t sacrifice image quality for the sake of file size, but also be mindful of how large images can impact your site’s load time.

If you’re looking to dive deeper into creating content for your LMS, check out my courses on Moodle and other online education platforms. Experiment with these different formats and see what works best for your needs. Thanks for reading, and happy designing!

See all Moodle Courses

For a more visual exploration, be sure to check out the full video tutorial, where I demonstrate these steps and results in real-time.