Servage Magazine

Being vector graphics, SVG has several advantages in this responsive web designing era. Therefore, digging deeper for SVG creation through various ways may explicitly help modern web developers . Before jumping into any discussion on SVG let's have some basic concept clear in our mind regarding the SVG and its importance in the web and mobile designing industry. SVG is short for scalable vector graphics. There are two sorts of graphics formats in the digital graphic industry. One is raster or pixel/dot based and another is vector based.   Raster images show pixelations/ugly display of pixels when scaled to an overtly big size. Contrary to this, vectors are the computer mathematics of shapes ...

There are two types of PNG files: 24-bit PNGs (PNG-24), which contain colors from the millions of colors in the RGB color space, and 8-bit indexed PNGs (PNG-8) with a palette limited to 256 colors. This section looks at what you can (and can’t) do to affect the file size of both kinds of PNG files. PNG-24 PNG’s lossless compression makes PNG-24 a wonderful format for preserving quality in images, but unfortunately, it makes it a poor option for web graphics. A PNG-24 will always be significantly larger than a JPEG of the same image because no pixels are sacrificed in the compression process. Therefore, your first “lean ...

We have already discussed about basic GIF optimisation techniques in the previous articles. Here we will be discussing about some advanced GIF Optimisation Techniques. When the colors in an image are reduced to a specific palette, the colors that are not in that palette get approximated by dithering. Dithering is a speckle pattern that results when palette colors are mixed to simulate an unavailable color. In photographic images, dithering is not a problem and can even be beneficial; however, dithering in flat color areas is usually distracting and undesirable. In terms of optimization, dithering is undesirable because the speckles disrupt ...

Presently, responsive web design still struggles to find great solutions for managing images and related reflow problems. Some web designers have made decent attempts to escape reflow problems as we will see in this post. To deal effectively with responsive web design, we need to first concentrate on the images because they consume a greater amount of memory; hence, slower downloading. There are plenty of ways, however, to reduce image weight, but none are effective enough to keep a balance between size and resolution. The reason is simple, when you lower image weight in KBs, your images will show pixilation or render in odd ways on bigger screens. Possible Remedies One issue we ...

Optimized JPEGs have slightly smaller file sizes and better color fidelity (although I’ve never been able to see the difference) than standard JPEGs. For this reason, you should select the Optimized option if your image software offers it. Look for the Optimized option in Photoshop and third-party JPEG compression utilities. Fireworks does not offer the option as of this writing. Remember to save JPEGs that are targeted for iPad Retina displays in Progressive format to circumvent a Safari function that automatically downgrades JPEGs over 2 megapixels (more than 2.1 million pixels in the image). Blurring or smoothing the image Because soft images compress smaller than sharp ...