1. Home
  2. gebruik Blocs
  3. Design
  4. Afbeeldingen met meerdere resoluties

Afbeeldingen met meerdere resoluties

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 drie vereiste resolutiegroottes (@1x, @2x en @3x), Blocs maakt het heel eenvoudig om ze te implementeren.

Automatische instelling

Zo lang als alle drie variaties van uw afbeelding hebben de zelfde naam en @ 2x en @ 3x Het achtervoegsel wordt op hun namen toegepast (indien van toepassing) wanneer u de afbeelding met de standaardresolutie op een afbeelding toepast Bric, worden de versies met een hogere resolutie ook automatisch toegepast.

Handmatige setup

Als uw afbeeldingsitems met meerdere resoluties geen overeenkomende namen hebben, kunt u elke resolutie van een item handmatig op een afbeelding toepassen Bric, met behulp van de inspecteursbesturingselementen. Selecteer eenvoudig 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.

 

Afbeeldingen zien er wazig uit in Blocs

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.

Bijgewerkt op 12 december 2023

Was dit artikel behulpzaam?

Gerelateerde artikelen