Many of you have seen in description of our popular theme SimplePuzzle inscriptions such as “Retina-ready” and “SVG is used”. But what do these terms mean and why do you need them? That is precisely about this I’m going to tell in my article. I’ll try to use less unclear to the majority technical terminology and unnecessary information and write article “for people”.
What is Retina?
Retina is name of LCD screens with such pixel (dot) density per 1inch that human eye can’t distinguish them. Initially, Apple introduced new technology in 2010 and now it is massively used in their devices: in monitors, phones, tablets, etc. It is natural that high pixel density allows displays to support higher resolutions. Now there are 27.5″ monitors with resolution 5 k (5120h2880). If in the beginning Retina was used on Apple devices, today it is massively used in production of famous brands: Samsung, LG, etc. Even Chinese various gadgets support Retina ?
Emergence and wide spreading of screens with Retina requires use of detailed graphics. What’s the sense of looking at picture 2К (2048×1024) and lower on screen with resolution 5 k (5120h2880) and see blurred image? The same kind of thing with sites –it is unpleasant to look at blurred images in design of outdated theme. But it is not the best way out to use high-resolution graphics in design elements, as its weight will increase in proportion to resolution. And if monitors in 10K, 100K and so on appear tomorrow, then should you re-do everything from the very beginning every time?
SVG graphics to replace bitmap images
Here vector graphics comes for help which adapts perfectly to any high resolutions. SVG stands for Scalable Vector Graphics. You can draw images in SVG format in Adobe Illustrator. If you have problems with drawing –never mind because there are enough sites-libraries with icons of any format in network, including SVG.
SVG graphics has not only excellent scaling but other benefits as well and there are the following among them:
- weight of vector graphics is far less than weight of similar bitmaps and as a result it affects positively load speed of website
- HTTP requests are sent to server when you upload images but you can avoid it for SVG graphics. As a result, site load is speeded up.
- text in SVG is ordinary one but not a picture. It is perfectly indexed by all search engines and you can select and copy it.
- SVG files can be edited with a text editor and they are perfectly amenable to compression.
- SVG graphics can be animated using javascript
Frankly speaking, for today use of bitmap images in design elements is ignorance and backwardness.Many “professionals” continue creating new templates with bitmap images, this is how people used to do in last century.
PS. I hope that article is useful and it will help while choosing new template for your site. And we continue working on expanding products functionality.
Subscribe to blog updates and recommend to friends.
Thank you for using our products!
