Web graphics file size

However, images improperly exported can look low quality, cause your site to load slowly and lose engagement from users. Here are some tips you can use to make sure every graphic is beautiful and crisp. RGB red, green, blue is the standard color space for digital devices.

By default, any image created by a camera or computer is saved in this color profile. However, you may have images that are CMYK, a color profile used by printers. Before using these images on the web, a program such as Adobe Photoshop can convert the colors to RGB so your images are vivid and bright. This will convert the image to the RGB color space and you may notice some colors are more vibrant.

Next, go to File then Save As and save the file. Be sure to change the file name so you or someone else knows it is a file for digital applications. When saving images for the web, we recommend the file size should be less than 2MB kilobytes to maintain fast page loading speeds.

That being said, we also want images to be sharp and not pixelated. Image quality is contingent on factors such as the final file size and compression settings. With the right compression settings, you can achieve good image quality and a small file size.

You can use a free tool such as Imagify to further compress the file size. Therefore, you can strike a good balance between image quality and file size. One of the important thing about graphics on the web is keeping the file size down, while maintaining acceptable quality. GIF is better for images with less colors and especially if they're flat colors. Therefore, images are great for logos, cartoons, fancy text etc. GIFs are animatable — so they can be used to create small animations and low-resolution movies.

PNG is a raster graphics file format that supports lossless data compression. It supports Alpha Transparency. When this tutorial was first written, PNG was a relatively new format, but with very little browser support. Hi or Low Resolution refers to the density of pixels in an image. Images used for the web will have lower resolution, with 72 DPI as the standard. Images used for print will have higher resolution, with DPI or greater as the standard. Be careful not to create an image for print that is low-res; otherwise, it will end up pixelated and distorted; or an image for the web that is too hi-res, otherwise it will take forever to load.

Lossless or lossy refers to the way data is compressed in a file and how much information it retains. Lossy files lose some of that original data when compressed or converted. JPEGs are raster images and are composed of hundreds and hundreds of tiny pixels. Think of it like taking a photocopy of your favorite picture, the photocopy still looks like the original photo, but some of the original data is lost.

Likewise, because the information in a JPEG is limited, they cannot be made larger once they are a certain size. Have you ever taken a photo off of Facebook and tried to get it printed despite the small file size or low-resolution warning? Did you end up with a super blurry, pixelated photo?

Despite their aversion to scale, JPEGs can be used for both print and web. A rule of thumb: web images can have a lower resolution like 72 DPI, so that the image loads quickly , while print images require a higher resolution like DPI, to retain as much image information as possible. One of the factors that make a PNG stand out most is that they support transparency. This allows you to have a transparent background on a logo file, instead of the file having a white background that cannot be altered.

PNG file compression is lossless, so there is no loss in quality, giving them the ability to handle detailed, high contrast information. PNGs are great for use on the web but are not ideal for print.

An SVG is a vector-based file and is used to display a variety of graphics, primarily on the web. SVG uses shapes, numbers, and coordinates to create graphics in a browser, making it independent of resolution constraints and infinitely scalable—unlike files created in a pixel grid that are confined.

Remember how SVG files speak code? This makes them editable and scriptable with code languages and allows them to be indexed and searchable on the web. Pretty cool, huh? Trick question, a GIF is actually defined as a lossless format for image files that supports both animated and static images.