De meeste mobiele telefoons en veel moderne computers hebben nu hoge resolutie (Retina) schermen, dit betekent dat ze een hogere pixeldichtheid hebben. Als u de afbeeldingen van uw site er echt scherp wilt laten uitzien op zowel standaard- als hoge-resolutieschermen, moet u aanvullende versies van uw afbeeldingsbestanden met verschillende pixeldichtheden leveren.
Oplossingsvereisten
Bestanden met meerdere resolutie zijn meestal vereist in drie formaten:
@ 1x - Standaardresolutie 1: 1 pixels
@ 2x - Dubbele resolutie 2: 1 pixels
@ 3x - Drievoudige resolutie 3: 1 pixels
Als je geen ontwerpachtergrond hebt, kan dit een beetje verwarrend klinken. In feite een @ 2x afbeelding is tweemaal zo groot in pixels als een @ 1x afbeelding en een @ 3x afbeelding is drie keer zo groot als een @ 1x afbeelding, bijv
@ 1x - 50x50px normale grootte
@ 2x - 100x100px 2x zo groot als @ 1x
@ 3x - 150x150px 3x zo groot als @ 1x
Bij het maken van afbeeldingen met meerdere resoluties, is het gebruikelijk om een tekstachtervoegsel toe te passen in de bestandsnaam voor de hogere resoluties, zodat ze gemakkelijk kunnen worden geïdentificeerd, bijv.
• mijn-afbeelding.jpg
• mijn-afbeelding@2x.jpg
• mijn-afbeelding@3x.jpg
Meerdere resoluties toepassen
Zodra u uw afbeeldingen heeft gemaakt in de 3 vereiste formaten, Blocs maakt het heel eenvoudig om ze aan een project toe te voegen om de juiste grootte te gebruiken op basis van de schermdichtheid van de gebruiker.
Om meerdere resoluties voor een afbeelding toe te voegen Bric, selecteer je gewoon de afbeelding op het ontwerpcanvas door Links klikken het en navigeer vervolgens naar de opties van de zijbalkinspecteur. Onder de sectie met het label Data, er is een 3-weg gesegmenteerde bediening waarbij elke optie is gelabeld @ 1x, @ 2x en @ 3x. Links klikken elk van de 3 opties stelt de afbeeldingsopties voor die doelresolutie in. Nu als je Links klikken de miniatuurafbeelding direct onder het gesegmenteerde besturingselement, wordt u gevraagd om het specifieke afbeeldingsbestand te selecteren dat in die resolutie moet worden weergegeven.
U kunt nu voor beide aanvullende afbeeldingen toepassen @ 2x en @ 3x, worden deze extra afbeeldingen aan een bezoeker aangeboden als ze een apparaat hebben met een hogere pixeldichtheid.
Als je hardloopt Blocs op een scherm met een hoge resolutie ziet u mogelijk dat afbeeldingen er wazig uitzien. Dit komt door het feit binnen de ontwerpomgeving Blocs geeft de niet-retina-versie van een afbeelding weer op het ontwerpcanvas. Wanneer u de voorbeeldmodus opent of uw site exporteert, zou u moeten opmerken dat de variatie in hoge resolutie van de afbeelding nu correct wordt weergegeven.